@eslamdevui/ui 3.3.3 → 4.0.0-beta

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

@@ -0,0 +1,112 @@
+import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/tree';
+import type { IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
+export type TreeItem = {
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    defaultExpanded?: boolean;
+    disabled?: boolean;
+    slot?: string;
+    children?: TreeItem[];
+    onToggle?(e: Event): void;
+    onSelect?(e?: Event): void;
+    class?: any;
+    ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
+    [key: string]: any;
+};
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'ul'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Tree['variants']['color'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Tree['variants']['size'];
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * The icon displayed on the right side of a parent node.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is expanded.
+     * @defaultValue appConfig.ui.icons.folderOpen
+     * @IconifyIcon
+     */
+    expandedIcon?: IconProps['name'];
+    /**
+     * The icon displayed when a parent node is collapsed.
+     * @defaultValue appConfig.ui.icons.folder
+     * @IconifyIcon
+     */
+    collapsedIcon?: IconProps['name'];
+    items?: T;
+    /** The controlled value of the Tree. Can be bind as `v-model`. */
+    modelValue?: M extends true ? T[number][] : T[number];
+    /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
+    defaultValue?: M extends true ? T[number][] : T[number];
+    /** Whether multiple options can be selected or not. */
+    multiple?: M & boolean;
+    class?: any;
+    ui?: Tree['slots'];
+}
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
+type SlotProps<T extends TreeItem> = (props: {
+    item: T;
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}) => any;
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
+    index: number;
+    level: number;
+    expanded: boolean;
+    selected: boolean;
+}>;
+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;
+    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>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Tree.vue

@@ -15,11 +15,11 @@ const props = defineProps({
   as: { type: null, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
-  valueKey: { type: null, required: false, default: "value" },
+  getKey: { type: Function, required: false },
   labelKey: { type: null, required: false, default: "label" },
-  trailingIcon: { type: String, required: false },
-  expandedIcon: { type: String, required: false },
-  collapsedIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  expandedIcon: { type: [String, Object], required: false },
+  collapsedIcon: { type: [String, Object], required: false },
   items: { type: null, required: false },
   modelValue: { type: null, required: false },
   defaultValue: { type: null, required: false },
@@ -33,10 +33,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   bubbleSelect: { type: Boolean, required: false }
 });
-const emits = defineEmits(["update:expanded", "update:modelValue"]);
+const emits = defineEmits(["update:modelValue", "update:expanded"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
 const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
   color: props.color,
@@ -45,11 +45,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })
 function getItemLabel(item) {
   return get(item, props.labelKey);
 }
-function getItemValue(item) {
-  return get(item, props.valueKey) ?? get(item, props.labelKey);
+function getItemKey(item) {
+  return props.getKey ? props.getKey(item) || getItemLabel(item) : getItemLabel(item);
 }
 function getDefaultOpenedItems(item) {
-  const currentItem = item.defaultExpanded ? getItemValue(item) : null;
+  const currentItem = item.defaultExpanded ? getItemKey(item) : null;
   const childItems = item.children?.flatMap((child) => getDefaultOpenedItems(child)) ?? [];
   return [currentItem, ...childItems].filter(Boolean);
 }
@@ -60,22 +60,37 @@ const defaultExpanded = computed(
 
 <template>
   <DefineTreeTemplate v-slot="{ items, level }">
-    <li
+    <TreeItem
       v-for="(item, index) in items"
       :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      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"
     >
-      <TreeItem
-        v-slot="{ isExpanded, isSelected }"
-        as-child
-        :level="level"
-        :value="item"
-        @toggle="item.onToggle"
-        @select="item.onSelect"
+      <slot
+        :name="item.slot ? `${item.slot}-wrapper` : 'item-wrapper'"
+        v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+        :item="item"
       >
-        <button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
-          <slot :name="item.slot || 'item'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="item">
-            <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="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'"
+            v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+            :item="item"
+          >
+            <slot
+              :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
+              v-bind="{ index, level, expanded: isExpanded, selected: isSelected }"
+              :item="item"
+            >
               <UIcon
                 v-if="item.icon"
                 :name="item.icon"
@@ -88,35 +103,63 @@ const defaultExpanded = computed(
               />
             </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="{ item, index, level, expanded: isExpanded, selected: isSelected }" :item="item">
+            <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="{ item, index, level, expanded: isExpanded, selected: isSelected }" :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] })" />
+            <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 }"
+                :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>
         </button>
+      </slot>
 
-        <ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: [props.ui?.listWithChildren, item.ui?.listWithChildren] })">
-          <ReuseTreeTemplate :items="item.children" :level="level + 1" />
-        </ul>
-      </TreeItem>
-    </li>
+      <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>
   </DefineTreeTemplate>
 
   <TreeRoot
     v-bind="{ ...rootProps, ...$attrs }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :get-key="getItemValue"
+    :get-key="getItemKey"
     :default-expanded="defaultExpanded"
     :selection-behavior="selectionBehavior"
   >
-    <ReuseTreeTemplate :items="items" :level="0" />
+    <ReuseTreeTemplate :items="items" :level="1" />
   </TreeRoot>
 </template>

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

@@ -1,21 +1,22 @@
 import type { TreeRootProps, TreeRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/tree';
-import type { DynamicSlots, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, ComponentConfig } from '../types/utils';
+import type { IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Tree = ComponentConfig<typeof theme, AppConfig, 'tree'>;
 export type TreeItem = {
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     label?: string;
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     defaultExpanded?: boolean;
     disabled?: boolean;
-    value?: string;
     slot?: string;
     children?: TreeItem[];
     onToggle?(e: Event): void;
@@ -24,7 +25,7 @@ export type TreeItem = {
     ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
     [key: string]: any;
 };
-export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
+export interface TreeProps<T extends TreeItem[] = TreeItem[], M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'ul'
@@ -38,45 +39,42 @@ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItem
      * @defaultValue 'md'
      */
     size?: Tree['variants']['size'];
-    /**
-     * The key used to get the value from the item.
-     * @defaultValue 'value'
-     */
-    valueKey?: VK;
+    /** This function is passed the index of each item and should return a unique key for that item */
+    getKey?: (val: T[number]) => string;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: keyof NestedItem<T>;
+    labelKey?: GetItemKeys<T>;
     /**
      * The icon displayed on the right side of a parent node.
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is expanded.
      * @defaultValue appConfig.ui.icons.folderOpen
      * @IconifyIcon
      */
-    expandedIcon?: string;
+    expandedIcon?: IconProps['name'];
     /**
      * The icon displayed when a parent node is collapsed.
      * @defaultValue appConfig.ui.icons.folder
      * @IconifyIcon
      */
-    collapsedIcon?: string;
+    collapsedIcon?: IconProps['name'];
     items?: T;
     /** The controlled value of the Tree. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
+    modelValue?: M extends true ? T[number][] : T[number];
     /** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: M extends true ? T[number][] : T[number];
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     class?: any;
     ui?: Tree['slots'];
 }
-export type TreeEmits<A extends TreeItem[], VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<TreeRootEmits, 'update:modelValue'> & GetModelValueEmits<A, VK, M>;
+export type TreeEmits<T extends TreeItem[] = TreeItem[], M extends boolean = false> = TreeRootEmits<T[number], M>;
 type SlotProps<T extends TreeItem> = (props: {
     item: T;
     index: number;
@@ -84,26 +82,27 @@ type SlotProps<T extends TreeItem> = (props: {
     expanded: boolean;
     selected: boolean;
 }) => any;
-export type TreeSlots<A extends TreeItem[] = TreeItem[], T extends NestedItem<A> = NestedItem<A>> = {
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
-    'item-trailing': SlotProps<T>;
-} & DynamicSlots<T, undefined, {
+export type TreeSlots<T extends TreeItem[] = TreeItem[]> = {
+    'item-wrapper': SlotProps<T[number]>;
+    'item': SlotProps<T[number]>;
+    'item-leading': SlotProps<T[number]>;
+    'item-label': SlotProps<T[number]>;
+    'item-trailing': SlotProps<T[number]>;
+} & DynamicSlots<T[number], undefined, {
     index: number;
     level: number;
     expanded: boolean;
     selected: boolean;
 }>;
-declare const _default: <T extends TreeItem[], 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<{
+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"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        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, VK, M> & Partial<{}>> & import("vue").PublicProps;
+    } & 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;
     attrs: any;
-    slots: TreeSlots<T, NestedItem<T>>;
-    emit: ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "update:expanded", val: string[]) => void);
+    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>;
 };

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

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
+export interface UserProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    name?: string;
+    description?: string;
+    avatar?: Omit<AvatarProps, 'size'> & {
+        [key: string]: any;
+    };
+    chip?: boolean | Omit<ChipProps, 'size' | 'inset'>;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: User['variants']['size'];
+    /**
+     * The orientation of the user.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: User['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    ui?: User['slots'];
+}
+export interface UserSlots {
+    avatar(props?: {}): 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<{}>, {
+    orientation: User["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, UserSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/User.vue

@@ -7,6 +7,9 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import UChip from "./Chip.vue";
+import UAvatar from "./Avatar.vue";
+import ULink from "./Link.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },

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

@@ -1,6 +1,7 @@
-import theme from '#build/ui/user';
 import type { AppConfig } from '@nuxt/schema';
-import type { AvatarProps, ChipProps, LinkProps, ComponentConfig } from '../types';
+import theme from '#build/ui/user';
+import type { AvatarProps, ChipProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type User = ComponentConfig<typeof theme, AppConfig, 'user'>;
 export interface UserProps {
     /**
@@ -35,7 +36,7 @@ export interface UserSlots {
     description(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserProps> & Readonly<{}>, {
+declare const _default: __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>;
 export default _default;

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

@@ -0,0 +1,7 @@
+import type { AvatarProps } from '@eslamdevui/ui';
+export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+    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>;
+export default _default;

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

@@ -3,6 +3,7 @@
 </script>
 
 <script setup>
+import UAvatar from "../Avatar.vue";
 defineOptions({ inheritAttrs: false });
 defineProps({
   light: { type: String, required: true },

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

@@ -1,7 +1,7 @@
-import type { AvatarProps } from '../../types';
+import type { AvatarProps } from '@eslamdevui/ui';
 export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const _default: import("vue").DefineComponent<ColorModeAvatarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@eslamdevui/ui';
+export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    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<{}>, {
+    color: ButtonProps["color"];
+    variant: ButtonProps["variant"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    fallback(props?: {}): any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -5,14 +5,15 @@
 <script setup>
 import { computed } from "vue";
 import { useColorMode, useAppConfig } from "#imports";
-import { useLocalePro } from "../../composables/useLocalePro";
+import { useLocale } from "../../composables/useLocale";
+import UButton from "../Button.vue";
 defineOptions({ inheritAttrs: false });
 defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" }
 });
 defineSlots();
-const { t } = useLocalePro();
+const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const isDark = computed({

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '../../types';
+import type { ButtonProps } from '@eslamdevui/ui';
 export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     /**
      * @defaultValue 'neutral'
@@ -9,13 +9,12 @@ export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProp
      */
     variant?: ButtonProps['variant'];
 }
-export interface ColorModeButtonSlots {
+declare const _default: __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: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
-    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ColorModeButtonSlots>;
+}>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,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>;
+export default _default;

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

@@ -1,7 +1,3 @@
-<script>
-
-</script>
-
 <script setup>
 import ImageComponent from "#build/ui-image-component";
 defineOptions({ inheritAttrs: false });

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

@@ -1,6 +1,6 @@
-export interface ColorModeImageProps {
+type __VLS_Props = {
     dark: string;
     light: string;
-}
-declare const _default: import("vue").DefineComponent<ColorModeImageProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
+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>;
 export default _default;

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

@@ -0,0 +1,5 @@
+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>;
+export default _default;