@eslamdevui/ui 4.0.0 → 4.1.1-rc.1

package/dist/runtime/components/Tree.vue

@@ -3,9 +3,10 @@ import theme from "#build/ui/tree";
 </script>
 
 <script setup>
-import { computed } from "vue";
-import { TreeRoot, TreeItem, useForwardPropsEmits } from "reka-ui";
+import { computed, toRef, ref } from "vue";
+import { TreeRoot, TreeItem, TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { defu } from "defu";
 import { useAppConfig } from "#imports";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -24,6 +25,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
+  nested: { type: Boolean, required: false, default: true },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
+  onSelect: { type: Function, required: false },
+  onToggle: { type: Function, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   expanded: { type: Array, required: false },
@@ -36,12 +41,62 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const as = computed(() => {
+  if (typeof props.as === "string" || typeof props.as?.render === "function") {
+    return { root: props.as, link: "button" };
+  }
+  return defu(props.as, { root: "ul", link: "button" });
+});
+const nested = computed(() => props.virtualize ? false : props.nested);
+const flattenedPaddingFormula = computed(() => {
+  const sizeConfig = {
+    xs: { base: 2, perLevel: 5.5 },
+    // px-2, ms-4 + ps-1.5
+    sm: { base: 2.5, perLevel: 6 },
+    // px-2.5, ms-4.5 + ps-1.5
+    md: { base: 2.5, perLevel: 6.5 },
+    // px-2.5, ms-5 + ps-1.5
+    lg: { base: 3, perLevel: 7 },
+    // px-3, ms-5.5 + ps-1.5
+    xl: { base: 3, perLevel: 7.5 }
+    // px-3, ms-6 + ps-1.5
+  };
+  const config = sizeConfig[props.size || "md"];
+  return (level) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`;
+});
+const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 36,
+    xl: 40
+  }[props.size || "md"]
+}));
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    level: {
+      type: Number,
+      required: true
+    }
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  virtualize: !!props.virtualize
 }));
+const rootRef = ref();
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
@@ -53,106 +108,120 @@ function getDefaultOpenedItems(item) {
   const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
   return [currentItem, ...childItems].filter(Boolean);
 }
-const defaultExpanded = computed(
-  () => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item))
-);
+const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap((item) => getDefaultOpenedItems(item)));
+defineExpose({
+  get $el() {
+    return rootRef.value?.$el;
+  }
+});
 </script>
 
 <template>
-  <DefineTreeTemplate v-slot="{ items, level }">
-    <TreeItem
-      v-for="(item, index) in items"
-      :key="`${level}-${index}`"
-      v-slot="{ isExpanded, isSelected }"
-      :level="level"
-      :value="item"
-      :class="level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
-      @toggle="item.onToggle"
-      @select="item.onSelect"
+  <DefineItemTemplate v-slot="{ item, index, level }">
+    <li
+      role="presentation"
+      :class="!!nested && level > 1 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
     >
-      <slot
-        :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
-        v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-        :item="item"
+      <TreeItem
+        v-slot="{ isExpanded, isSelected, isIndeterminate, handleSelect, handleToggle }"
+        :level="level"
+        :value="item"
+        as-child
+        @toggle="(item.onToggle ?? props.onToggle)?.($event, item)"
+        @select="(item.onSelect ?? props.onSelect)?.($event, item)"
       >
-        <button
-          type="button"
-          :disabled="item.disabled || disabled"
-          :data-expanded="isExpanded"
-          :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+        <slot
+          :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
+          v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+          :item="item"
         >
-          <slot
-            :name="item.slot || 'item'"
-            v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-            :item="item"
+          <component
+            :is="as.link"
+            :type="as.link === 'button' ? 'button' : void 0"
+            :disabled="item.disabled || disabled"
+            :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })"
+            :style="!nested && level > 1 ? { paddingLeft: flattenedPaddingFormula(level) } : void 0"
           >
             <slot
-              :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
-              v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+              :name="item.slot || 'item'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
               :item="item"
-            >
-              <UIcon
-                v-if="item.icon"
-                :name="item.icon"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-              <UIcon
-                v-else-if="item.children?.length"
-                :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
-                :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
-              />
-            </slot>
-
-            <span
-              v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
-              :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
             >
               <slot
-                :name="item.slot ? `${item.slot}-label` : 'item-label'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
-                :item="item"
-              >
-                {{ getItemLabel(item) }}
-              </slot>
-            </span>
-
-            <span
-              v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
-              :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-            >
-              <slot
-                :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
-                v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+                :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+                v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
                 :item="item"
               >
                 <UIcon
-                  v-if="item.trailingIcon"
-                  :name="item.trailingIcon"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  v-if="item.icon"
+                  :name="item.icon"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
                 <UIcon
                   v-else-if="item.children?.length"
-                  :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
-                  :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  :name="isExpanded ? expandedIcon ?? appConfig.ui.icons.folderOpen : collapsedIcon ?? appConfig.ui.icons.folder"
+                  :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon] })"
                 />
               </slot>
-            </span>
-          </slot>
-        </button>
-      </slot>
 
-      <ul
-        v-if="item.children?.length && isExpanded"
-        role="group"
-        :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
-      >
-        <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-      </ul>
-    </TreeItem>
+              <span
+                v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
+                :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-label` : 'item-label'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  {{ getItemLabel(item) }}
+                </slot>
+              </span>
+
+              <span
+                v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
+                :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+              >
+                <slot
+                  :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
+                  v-bind="{ index, level, expanded: isExpanded, selected: isSelected, indeterminate: isIndeterminate, handleSelect, handleToggle, ui }"
+                  :item="item"
+                >
+                  <UIcon
+                    v-if="item.trailingIcon"
+                    :name="item.trailingIcon"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                  <UIcon
+                    v-else-if="item.children?.length"
+                    :name="trailingIcon ?? appConfig.ui.icons.chevronDown"
+                    :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon] })"
+                  />
+                </slot>
+              </span>
+            </slot>
+          </component>
+        </slot>
+
+        <ul
+          v-if="nested && item.children?.length && isExpanded"
+          role="group"
+          :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })"
+        >
+          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </DefineItemTemplate>
+
+  <DefineTreeTemplate v-slot="{ items, level }">
+    <ReuseItemTemplate v-for="(item, index) in items" :key="`${level}-${index}`" :item="item" :index="index" :level="level" />
   </DefineTreeTemplate>
 
   <TreeRoot
+    ref="rootRef"
+    v-slot="{ flattenItems }"
     v-bind="{ ...rootProps, ...$attrs }"
+    :as="as.root"
     :model-value="modelValue"
     :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
@@ -160,6 +229,25 @@ const defaultExpanded = computed(
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="items" :level="1" />
+    <TreeVirtualizer
+      v-if="!!virtualize"
+      v-slot="{ item, virtualItem }"
+      :text-content="(item2) => getItemLabel(item2.value)"
+      v-bind="virtualizerProps"
+    >
+      <ReuseItemTemplate :item="item.value" :index="virtualItem.index" :level="item.level" />
+    </TreeVirtualizer>
+
+    <template v-else-if="!nested">
+      <ReuseItemTemplate
+        v-for="(item, index) in flattenItems"
+        :key="item._id"
+        :item="item.value"
+        :index="index"
+        :level="item.level"
+      />
+    </template>
+
+    <ReuseTreeTemplate v-else :items="items" :level="1" />
   </TreeRoot>
 </template>

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

@@ -1,4 +1,4 @@
-import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { TreeRootProps, TreeRootEmits, TreeItemSelectEvent, TreeItemToggleEvent } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
 import type { IconProps } from '../types';
@@ -19,8 +19,8 @@ export type TreeItem = {
     disabled?: boolean;
     slot?: string;
     children?: TreeItem[];
-    onToggle?(e: Event): void;
-    onSelect?(e?: Event): void;
+    onToggle?: (e: TreeItemToggleEvent<TreeItem>) => void;
+    onSelect?: (e: TreeItemSelectEvent<TreeItem>) => void;
     class?: any;
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
@@ -30,7 +30,10 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
      * The element or component this component should render as.
      * @defaultValue 'ul'
      */
-    as?: any;
+    as?: any | {
+        root?: any;
+        link?: any;
+    };
     /**
      * @defaultValue 'primary'
      */
@@ -71,6 +74,31 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean
     defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
+    /**
+     * Use nested DOM structure (children inside parents) vs flattened structure (all items at same level).
+     * When `virtualize` is enabled, this is automatically set to `false`.
+     * @defaultValue true
+     */
+    nested?: boolean;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, the tree structure is flattened like if `nested` was set to `false`.
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
+    onSelect?: (e: TreeItemSelectEvent<T[number]>, item: T[number]) => void;
+    onToggle?: (e: TreeItemToggleEvent<T[number]>, item: T[number]) => void;
     class?: any;
     ui?: Tree['slots'];
 }
@@ -81,6 +109,10 @@ type SlotProps<T extends TreeItem> = (props: {
     level: number;
     expanded: boolean;
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
+    ui: Tree['ui'];
 }) => any;
 export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     'item-wrapper': SlotProps<T[number]>;
@@ -92,20 +124,24 @@ export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
     index: number;
     level: number;
     expanded: boolean;
+    ui: Tree['ui'];
     selected: boolean;
+    indeterminate: boolean | undefined;
+    handleSelect: () => void;
+    handleToggle: () => void;
 }>;
-declare const _default: <T extends TreeItem[], 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 "onUpdate:modelValue"?: ((val: M extends true ? T[number][] : T[number]) => any) | undefined;
-        readonly "onUpdate:expanded"?: ((val: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:expanded"> & TreeProps<T, M> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends TreeItem[], 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<TreeProps<T, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: string[]) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
+    }>) => void;
     attrs: any;
     slots: TreeSlots<T>;
     emit: ((evt: "update:modelValue", val: M extends true ? T[number][] : T[number]) => void) & ((evt: "update:expanded", val: 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/User.d.vue.ts

@@ -31,14 +31,17 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
     orientation: User["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/User.vue

@@ -36,7 +36,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.user || {} })
 
 <template>
   <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
-    <slot name="avatar">
+    <slot name="avatar" :ui="ui">
       <UChip v-if="chip && avatar" inset v-bind="typeof chip === 'object' ? chip : {}" :size="size">
         <UAvatar :alt="name" v-bind="avatar" :size="size" :class="ui.avatar({ class: props.ui?.avatar })" />
       </UChip>

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

@@ -31,14 +31,17 @@ export interface UserProps {
     ui?: User['slots'];
 }
 export interface UserSlots {
-    avatar(props?: {}): any;
+    avatar(props: {
+        ui: User['ui'];
+    }): any;
     name(props?: {}): any;
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<UserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
     orientation: User["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -3,5 +3,6 @@ export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProp
     light: string;
     dark: string;
 }
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -3,5 +3,6 @@ export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProp
     light: string;
     dark: string;
 }
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -9,12 +9,13 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: ButtonProps["color"];
     variant: ButtonProps["variant"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     fallback(props?: {}): any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/color-mode/ColorModeButton.vue.d.ts

@@ -9,12 +9,13 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     color: ButtonProps["color"];
     variant: ButtonProps["variant"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     fallback(props?: {}): any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/color-mode/ColorModeImage.d.vue.ts

@@ -2,5 +2,6 @@ type __VLS_Props = {
     dark: string;
     light: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeImage.vue.d.ts

@@ -2,5 +2,6 @@ type __VLS_Props = {
     dark: string;
     light: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.d.vue.ts

@@ -1,5 +1,6 @@
 import type { SelectMenuProps } from '@eslamdevui/ui';
 export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSelect.vue.d.ts

@@ -1,5 +1,6 @@
 import type { SelectMenuProps } from '@eslamdevui/ui';
 export interface ColorModeSelectProps extends /** @vue-ignore */ Pick<SelectMenuProps<any>, 'color' | 'variant' | 'size' | 'trailingIcon' | 'selectedIcon' | 'content' | 'arrow' | 'portal' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSelectProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.d.vue.ts

@@ -1,5 +1,6 @@
 import type { SwitchProps } from '@eslamdevui/ui';
 export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeSwitch.vue.d.ts

@@ -1,5 +1,6 @@
 import type { SwitchProps } from '@eslamdevui/ui';
 export interface ColorModeSwitchProps extends /** @vue-ignore */ Pick<SwitchProps, 'as' | 'color' | 'size' | 'disabled' | 'ui'> {
 }
-declare const _default: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeSwitchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/ContentNavigation.d.vue.ts

@@ -78,6 +78,7 @@ export interface ContentNavigationEmits extends AccordionRootEmits {
 type SlotProps<T> = (props: {
     link: T;
     active?: boolean;
+    ui: ContentNavigation['ui'];
 }) => any;
 export interface ContentNavigationSlots<T extends ContentNavigationLink = ContentNavigationLink> {
     'link': SlotProps<T>;
@@ -85,17 +86,16 @@ export interface ContentNavigationSlots<T extends ContentNavigationLink = Conten
     'link-title': SlotProps<T>;
     'link-trailing': SlotProps<T>;
 }
-declare const _default: <T extends ContentNavigationLink>(__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 "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ContentNavigationProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T extends ContentNavigationLink>(__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<ContentNavigationProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: ContentNavigationSlots<T>;
     emit: (evt: "update:modelValue", value: string | string[] | undefined) => 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];