@byyuurin/ui 0.1.0 → 0.3.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) Yuurin<https://github.com/byyuurin>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) Yuurin<https://github.com/byyuurin>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -98,13 +98,13 @@ export default setup({
   },
   ui: {
     colors: {
-      primary: 'green',
-      secondary: 'blue',
+      primary: 'orange',
+      secondary: 'teal',
       success: 'green',
       info: 'blue',
       warning: 'yellow',
       error: 'red',
-      neutral: 'slate',
+      neutral: 'stone',
     },
     icons: {
       close: 'i-lucide-x',
@@ -117,6 +117,8 @@ export default setup({
       chevronDoubleLeft: 'i-lucide-chevrons-left',
       chevronDoubleRight: 'i-lucide-chevrons-right',
       ellipsis: 'i-lucide-ellipsis',
+      folder: 'i-lucide-folder',
+      folderOpen: 'i-lucide-folder-open',
       plus: 'i-lucide-plus',
       minus: 'i-lucide-minus',
       external: 'i-lucide-arrow-up-right',

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@byyuurin/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.2"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import { v as version, n as name, a as addTemplates } from './shared/ui.DSyJHSTk.mjs';
-import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.CzIlLITK.mjs';
+import { v as version, n as name, a as addTemplates } from './shared/ui.DpkP12cX.mjs';
+import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.9kQouwss.mjs';
 import 'node:process';
 import 'node:url';
 import '@unocss/config';

package/dist/runtime/components/Accordion.vue

@@ -35,47 +35,47 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <AccordionItem
-      v-for="(item, index) in props.items"
-      v-slot="{ open }"
-      :key="index"
-      :value="item.value || String(index)"
-      :disabled="item.disabled"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
-      data-part="item"
-    >
-      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })" data-part="header">
-        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })" data-part="trigger">
-          <slot name="leading" v-bind="{ item, index, open, ui }">
-            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leading-icon" />
-          </slot>
-
-          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
-            <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
-          </span>
-
-          <slot name="trailing" v-bind="{ item, index, open, ui }">
-            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailing-icon" />
-          </slot>
-        </AccordionTrigger>
-      </AccordionHeader>
-
-      <AccordionContent
-        v-if="item.content || !!slots.content || item.slot && slots[item.slot] || !!slots.body || item.slot && slots[`${item.slot}-body`]"
-        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
-        data-part="content"
-      >
-        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
-          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })" data-part="body">
-            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
-              {{ item.content }}
-            </slot>
-          </div>
-        </slot>
-      </AccordionContent>
-    </AccordionItem>
-  </AccordionRoot>
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <AccordionItem
+      v-for="(item, index) in props.items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      data-part="item"
+    >
+      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })" data-part="header">
+        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })" data-part="trigger">
+          <slot name="leading" v-bind="{ item, index, open, ui }">
+            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leadingIcon" />
+          </slot>
+
+          <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
+            <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
+          </span>
+
+          <slot name="trailing" v-bind="{ item, index, open, ui }">
+            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailingIcon" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent
+        v-if="item.content || !!slots.content || item.slot && slots[item.slot] || !!slots.body || item.slot && slots[`${item.slot}-body`]"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
+        data-part="content"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
+          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })" data-part="body">
+            <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
 </template>
 
 <style>

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

@@ -56,10 +56,14 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     open: boolean;
     ui: ComponentStyler<typeof theme>;
 }>;
-declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {
         "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: AccordionSlots<T>;
@@ -67,8 +71,8 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
 }>) => 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/Alert.vue

@@ -40,67 +40,67 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :data-orientation="props.orientation"
-    data-part="root"
-  >
-    <slot name="leading" :ui="ui">
-      <Avatar
-        v-if="props.avatar"
-        :size="props.ui?.avatarSize || ui.avatarSize()"
-        v-bind="props.avatar"
-        :class="ui.avatar({ class: props.ui?.avatar })"
-        data-part="avatar"
-      />
-      <Icon
-        v-else-if="props.icon"
-        :name="props.icon"
-        :class="ui.icon({ class: props.ui?.icon })"
-        data-part="icon"
-      />
-    </slot>
-
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
-        <slot name="title">
-          {{ props.title }}
-        </slot>
-      </div>
-      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description">
-          {{ props.description }}
-        </slot>
-      </div>
-
-      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
-        <slot name="actions">
-          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </div>
-    </div>
-
-    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
-      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
-        <slot name="actions">
-          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
-        </slot>
-      </template>
-
-      <slot name="close" :ui="ui">
-        <Button
-          v-if="props.close"
-          :icon="props.closeIcon || appConfig.ui.icons.close"
-          color="neutral"
-          variant="link"
-          :aria-label="t('alert.close')"
-          v-bind="typeof props.close === 'object' ? props.close : {}"
-          :class="ui.close({ class: props.ui?.close })"
-          data-part="close"
-          @click="emit('update:open', false)"
-        />
-      </slot>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :data-orientation="props.orientation"
+    data-part="root"
+  >
+    <slot name="leading" :ui="ui">
+      <Avatar
+        v-if="props.avatar"
+        :size="props.ui?.avatarSize || ui.avatarSize()"
+        v-bind="props.avatar"
+        :class="ui.avatar({ class: props.ui?.avatar })"
+        data-part="avatar"
+      />
+      <Icon
+        v-else-if="props.icon"
+        :name="props.icon"
+        :class="ui.icon({ class: props.ui?.icon })"
+        data-part="icon"
+      />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.title || slots.title" :class="ui.title({ class: props.ui?.title })" data-part="title">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </div>
+      <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </div>
+
+      <div v-if="props.orientation === 'vertical' && (props.actions?.length || slots.actions)" :class="ui.actions({ class: props.ui?.actions })" data-part="actions">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions) || props.close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
+      <template v-if="props.orientation === 'horizontal' && (props.actions?.length || slots.actions)">
+        <slot name="actions">
+          <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="ui">
+        <Button
+          v-if="props.close"
+          :icon="props.closeIcon || appConfig.ui.icons.close"
+          color="neutral"
+          variant="link"
+          :aria-label="t('alert.close')"
+          v-bind="typeof props.close === 'object' ? props.close : {}"
+          :class="ui.close({ class: props.ui?.close })"
+          data-part="close"
+          @click="emit('update:open', false)"
+        />
+      </slot>
+    </div>
+  </Primitive>
 </template>

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

@@ -1,7 +1,7 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/alert';
-import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { AvatarProps, ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkPropsKeys } from '../types';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 export interface AlertProps extends ComponentBaseProps {
@@ -33,7 +33,7 @@ export interface AlertProps extends ComponentBaseProps {
      * Display a close button to dismiss the alert.
      * @default false
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @default app.icons.close
@@ -55,6 +55,8 @@ export interface AlertSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
@@ -62,8 +64,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertP
 }>, {
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/App.vue

@@ -15,6 +15,7 @@ const props = defineProps({
   tooltip: { type: Object, required: false },
   locale: { type: Object, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: "body" },
+  dir: { type: String, required: false },
   scrollBody: { type: [Boolean, Object], required: false },
   nonce: { type: String, required: false }
 });
@@ -29,14 +30,14 @@ providePortalTarget(portal);
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId()" :dir="locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
-    <TooltipProvider v-bind="tooltipProps">
-      <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
-        <slot></slot>
-      </ToastProvider>
-      <slot v-else></slot>
-
-      <OverlayProvider />
-    </TooltipProvider>
-  </ConfigProvider>
+  <ConfigProvider :use-id="() => useId()" :dir="props.dir || locale?.dir" :locale="locale?.code" v-bind="configProviderProps">
+    <TooltipProvider v-bind="tooltipProps">
+      <ToastProvider v-if="props.toaster !== null" v-bind="toastProviderProps">
+        <slot></slot>
+      </ToastProvider>
+      <slot v-else></slot>
+
+      <OverlayProvider />
+    </TooltipProvider>
+  </ConfigProvider>
 </template>

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

@@ -1,7 +1,7 @@
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
 import type { Locale, Messages, ToastProviderProps } from '../types';
 import type { MaybeNull, StaticSlot } from '../types/utils';
-export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'locale'> {
     toaster?: MaybeNull<ToastProviderProps>;
     tooltip?: TooltipProviderProps;
     locale?: Locale<T>;
@@ -10,8 +10,12 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
 export interface AppSlots {
     default: StaticSlot;
 }
-declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: AppSlots;
@@ -19,8 +23,8 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
 }>) => 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/Avatar.vue

@@ -62,33 +62,33 @@ function onError() {
 </script>
 
 <template>
-  <component
-    :is="props.chip ? Chip : Primitive"
-    :as="as.root"
-    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    :style="props.style"
-  >
-    <component
-      :is="as.img || ImageComponent"
-      v-if="props.src && !error"
-      :src="props.src"
-      :alt="props.alt"
-      :width="sizePx"
-      :height="sizePx"
-      v-bind="$attrs"
-      :class="ui.image({ class: props.ui?.image })"
-      data-part="image"
-      @error="onError"
-    />
-
-    <slot v-else v-bind="$attrs">
-      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
-      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
-        <template v-if="fallback">{{ fallback }}</template>
-        <template v-else>&nbsp;</template>
-      </span>
-    </slot>
-  </component>
+  <component
+    :is="props.chip ? Chip : Primitive"
+    :as="as.root"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    :style="props.style"
+  >
+    <component
+      :is="as.img || ImageComponent"
+      v-if="props.src && !error"
+      :src="props.src"
+      :alt="props.alt"
+      :width="sizePx"
+      :height="sizePx"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+      data-part="image"
+      @error="onError"
+    />
+
+    <slot v-else v-bind="$attrs">
+      <Icon v-if="props.icon" :name="props.icon" :class="ui.icon({ class: props.ui?.icon })" data-part="icon" />
+      <span v-else :class="ui.fallback({ class: props.ui?.fallback })" data-part="fallback">
+        <template v-if="fallback">{{ fallback }}</template>
+        <template v-else>&nbsp;</template>
+      </span>
+    </slot>
+  </component>
 </template>

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

@@ -2,13 +2,14 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/avatar';
 import type { ChipProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ImgHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 interface InnerAs {
     root?: PrimitiveProps['as'];
     img?: PrimitiveProps['as'];
 }
-export interface AvatarProps extends ComponentBaseProps {
+export interface AvatarProps extends ComponentBaseProps, /** @vue-ignore */ Omit<ImgHTMLAttributes, 'src' | 'alt'> {
     /**
      * The element or component this component should render as.
      * @default "span"
@@ -27,11 +28,11 @@ export interface AvatarProps extends ComponentBaseProps {
 export interface AvatarSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/AvatarGroup.vue

@@ -53,8 +53,8 @@ provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="ui.base({ class: props.ui?.base })" data-part="base" />
+  </Primitive>
 </template>

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

@@ -20,9 +20,9 @@ export interface AvatarGroupProps extends ComponentBaseProps {
 export interface AvatarGroupSlots {
     default: StaticSlot;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;