@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Badge.vue

@@ -1,46 +1,78 @@
 <script>
-
+import theme from "#build/ui/badge";
 </script>
 
 <script setup>
-import { Primitive, Slot } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { computed } from "vue";
-import { useTheme } from "../composables/useTheme";
-defineOptions({
-  inheritAttrs: false
-});
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
 const props = defineProps({
-  as: { type: null, required: false },
-  text: { type: [String, Number], required: false },
+  as: { type: null, required: false, default: "span" },
+  variant: { type: null, required: false },
   size: { type: null, required: false },
-  position: { type: null, required: false, default: "top-right" },
-  show: { type: Boolean, required: false },
-  inset: { type: Boolean, required: false },
-  standalone: { type: Boolean, required: false },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  color: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  label: { type: [String, Number], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false }
+});
+const slots = defineSlots();
+const { size, orientation } = useFieldGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.badge));
+  return styler({
+    ...props,
+    size: size.value,
+    fieldGroup: orientation.value,
+    square: props.square || !slots.default && !props.label
+  });
 });
-defineEmits(["update:show"]);
-defineSlots();
-const show = defineModel("show", { type: Boolean, ...{ default: true } });
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("badge", props));
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
-    :data-part="$attrs['data-part'] ?? 'root'"
-  >
-    <Slot v-bind="$attrs">
-      <slot></slot>
-    </Slot>
+  <Primitive :as="props.as" :class="ui.base({ class: [props.ui?.base, props.class] })" data-part="base">
+    <slot name="leading" :ui="ui">
+      <Icon
+        v-if="isLeading && leadingIconName"
+        :name="leadingIconName"
+        :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+        data-part="leadingIcon"
+      />
+      <Avatar
+        v-else-if="props.avatar"
+        :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+        v-bind="props.avatar"
+        :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+        data-part="leadingAvatar"
+      />
+    </slot>
+
+    <slot :ui="ui">
+      <span v-if="props.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+        {{ props.label }}
+      </span>
+    </slot>
 
-    <span v-if="show" :class="style.base({ class: props.ui?.base })" data-part="base">
-      <slot name="content">
-        {{ props.text }}
-      </slot>
-    </span>
+    <slot name="trailing" :ui="ui">
+      <Icon
+        v-if="isTrailing && trailingIconName"
+        :name="trailingIconName"
+        :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+        data-part="trailingIcon"
+      />
+    </slot>
   </Primitive>
 </template>

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

@@ -1,41 +1,42 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { PrimitiveProps } from 'reka-ui';
-import type { badge } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-export interface BadgeEmits {
-    'update:show': [payload: boolean];
-}
-export interface BadgeSlots {
-    default?: (props?: {}) => any;
-    content?: (props?: {}) => any;
-}
-type BadgeVariants = VariantProps<typeof badge>;
-export interface BadgeProps extends ComponentAttrs<typeof badge> {
+import theme from '#build/ui/badge';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface BadgeProps extends ComponentBaseProps, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
      * @default "div"
      */
     as?: PrimitiveProps['as'];
-    text?: string | number;
-    size?: BadgeVariants['size'];
-    position?: BadgeVariants['position'];
-    show?: boolean;
-    /** When `true`, keep the badge inside the component for rounded elements. */
-    inset?: boolean;
-    /** When `true`, render the badge relatively to the parent. */
-    standalone?: boolean;
+    /** @default "solid" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** Render the badge with equal padding on all sides. */
+    square?: boolean;
+    label?: string | number;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface BadgeSlots {
+    leading: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    default: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    trailing: StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps & {
-    show?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:show": (...args: unknown[]) => any;
-}, string, import("vue").PublicProps, Readonly<BadgeProps & {
-    show?: boolean;
-}> & Readonly<{
-    "onUpdate:show"?: ((...args: unknown[]) => any) | undefined;
-}>, {
-    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Breadcrumb.vue

@@ -1,63 +1,81 @@
 <script>
-
+import theme from "#build/ui/breadcrumb";
 </script>
 
 <script setup>
 import { Primitive } from "reka-ui";
 import { computed } from "vue";
+import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
-import { useTheme } from "../composables/useTheme";
 import { get, pickLinkProps } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
 import Link from "./Link.vue";
 import LinkBase from "./LinkBase.vue";
 const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   items: { type: Array, required: false },
   separatorIcon: { type: String, required: false },
-  labelKey: { type: String, required: false, default: "label" },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  labelKey: { type: null, required: false, default: "label" },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
 });
 const slots = defineSlots();
 const { dir } = useLocale();
-const { theme, generateStyle } = useTheme();
-const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
-const style = computed(() => generateStyle("breadcrumb", props));
+const appConfig = useAppConfig();
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.breadcrumb));
+  return styler(props);
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <ol :class="style.list({ class: props.ui?.list })" data-part="list">
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <ol :class="ui.list({ class: props.ui?.list })" data-part="list">
       <template v-for="(item, index) in props.items" :key="index">
-        <li :class="style.item({ class: props.ui?.item })" data-part="item">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" data-part="item">
           <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <LinkBase
               v-bind="slotProps"
               as="span"
-              :aria-current="active && index === items.length - 1 ? 'page' : void 0"
-              :class="style.link({ class: props.ui?.link, active: index === items.length - 1, disabled: item.disabled, to: !!item.to })"
+              :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
+              :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: item.disabled, to: !!item.to })"
               data-part="link"
             >
-              <slot :name="item.slot || 'item'" :item="item" :index="index">
-                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items.length - 1" :index="index">
-                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })" data-part="link-leading-icon"></span>
+              <slot :name="item.slot || 'item'" :item="item" :index="index" :active="item.active ?? index === items.length - 1" :ui="ui">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="item.active ?? index === items.length - 1" :index="index" :ui="ui">
+                  <Icon
+                    v-if="item.icon"
+                    :name="item.icon"
+                    :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    data-part="linkLeadingIcon"
+                  />
+                  <Avatar
+                    v-else-if="item.avatar"
+                    :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
+                    v-bind="item.avatar"
+                    :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    data-part="linkLeadingAvatar"
+                  />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })" data-part="link-label">
-                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items.length - 1" :index="index"></slot>
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="item.active ?? index === items.length - 1" :index="index"></slot>
               </slot>
             </LinkBase>
           </Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })" data-part="separator">
-          <slot name="separator">
-            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })" data-part="separator-icon"></span>
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
+          <slot name="separator" :ui="ui">
+            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separatorIcon" />
           </slot>
         </li>
       </template>

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

@@ -1,25 +1,16 @@
 import type { PrimitiveProps } from 'reka-ui';
-import type { breadcrumb } from '../theme/index.js';
-import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types/index.js';
+import theme from '#build/ui/breadcrumb';
+import type { AvatarProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkProps } from '../types';
+import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     label?: string;
-    icon?: string;
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
     slot?: string;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
     [key: string]: any;
 }
-type SlotProps<T extends BreadcrumbItem> = (props: {
-    item: T;
-    index: number;
-    active?: boolean;
-}) => any;
-export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-    'item'?: SlotProps<T>;
-    'item-leading'?: SlotProps<T>;
-    'item-label'?: SlotProps<T>;
-    'item-trailing'?: SlotProps<T>;
-    'separator'?: any;
-} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>;
-export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentBaseProps {
     /**
      * The element or component this component should render as.
      * @default "nav"
@@ -35,18 +26,54 @@ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> exte
      * The key used to get the label from the item.
      * @default "label"
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
+    ui?: ComponentUIProps<typeof theme>;
 }
-declare const _default: <T extends BreadcrumbItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BreadcrumbProps<T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
+    'item': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-leading': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-label': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+    }>;
+    'item-trailing': StaticSlot<{
+        item: T;
+        index: number;
+        active: boolean;
+    }>;
+    'separator': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+} & DynamicSlots<T, 'label' | 'trailing', {
+    index: number;
+    active: boolean;
+}> & DynamicSlots<T, 'leading', {
+    index: number;
+    active?: boolean;
+    ui: ComponentStyler<typeof theme>;
+}>;
+declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: BreadcrumbSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Button.vue

@@ -1,42 +1,54 @@
 <script>
-
+import theme from "#build/ui/button";
 </script>
 
 <script setup>
 import { useForwardProps } from "reka-ui";
-import { computed } from "vue";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { computed, shallowRef } from "vue";
+import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
-import { useTheme } from "../composables/useTheme";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { injectFormLoading } from "../composables/useFormField";
 import { omit, pickLinkProps } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
 import Link from "./Link.vue";
+import LinkBase from "./LinkBase.vue";
 const props = defineProps({
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   label: { type: String, required: false },
-  variant: { type: null, required: false, default: "solid" },
+  variant: { type: null, required: false },
+  activeVariant: { type: null, required: false },
   size: { type: null, required: false },
-  loading: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  class: { type: null, required: false },
+  color: { type: null, required: false },
+  activeColor: { type: null, required: false },
+  square: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  onClick: { type: [Function, Array], required: false },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
-  loadingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
   as: { type: null, required: false },
   type: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
   exact: { type: Boolean, required: false },
   exactQuery: { type: [Boolean, String], required: false },
   exactHash: { type: Boolean, required: false },
   inactiveClass: { type: String, required: false },
-  disableClass: { type: String, required: false },
   to: { type: null, required: false },
   href: { type: null, required: false },
   external: { type: Boolean, required: false },
-  target: { type: [String, Object, null], required: false },
-  rel: { type: [String, Object, null], required: false },
+  target: { type: [String, Object], required: false },
+  rel: { type: [String, Object], required: false },
   noRel: { type: Boolean, required: false },
   prefetchedClass: { type: String, required: false },
   prefetch: { type: Boolean, required: false },
@@ -49,57 +61,106 @@ const props = defineProps({
   replace: { type: Boolean, required: false }
 });
 const slots = defineSlots();
-const { size, orientation } = useButtonGroup(props);
+const linkProps = useForwardProps(pickLinkProps(props));
+const loadingAutoState = shallowRef(false);
+const formLoading = injectFormLoading();
+async function onClickWrapper(event) {
+  loadingAutoState.value = true;
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick];
+  try {
+    await Promise.all(callbacks.map((fn) => fn?.(event)));
+  } finally {
+    loadingAutoState.value = false;
+  }
+}
+const isLoading = computed(() => props.loading || props.loadingAuto && (loadingAutoState.value || formLoading?.value && props.type === "submit"));
+const { size, orientation } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
-  computed(() => ({ ...props, loading: props.loading }))
+  computed(() => ({ ...props, loading: isLoading.value }))
 );
-const linkProps = useForwardProps(pickLinkProps(props));
-const { generateStyle } = useTheme();
-const style = computed(() => {
-  return generateStyle("button", {
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const uiConfig = {
+    ...appConfig.ui.button,
+    variants: {
+      ...appConfig.ui.button?.variants,
+      active: {
+        true: {
+          base: [appConfig.ui.button?.variants?.active?.true?.base, props.activeClass].filter(Boolean).join(" ")
+        },
+        false: {
+          base: [appConfig.ui.button?.variants?.active?.false?.base, props.inactiveClass].filter(Boolean).join(" ")
+        }
+      }
+    }
+  };
+  const styler = cv(merge(theme, uiConfig));
+  return styler({
     ...props,
+    loading: isLoading.value,
     size: size.value,
-    groupOrientation: orientation.value,
+    fieldGroup: orientation.value,
+    block: props.block,
+    square: props.square || !slots.default && !props.label,
     leading: isLeading.value,
-    trailing: isTrailing.value,
-    class: [
-      props.class,
-      props.active ? props.activeClass : props.inactiveClass,
-      props.disabled ? props.disableClass : void 0
-    ]
+    trailing: isTrailing.value
   });
 });
 </script>
 
 <template>
   <Link
-    :class="style.base({ class: [props.class, props.ui?.base] })"
+    v-slot="{ active, ...slotProps }"
     :type="props.type"
     :disabled="props.disabled || props.loading"
-    v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
+    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     data-part="base"
-    raw
+    custom
   >
-    <slot name="leading">
-      <span
-        v-if="isLeading && leadingIconName"
-        :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
-        data-part="leading-icon"
-      ></span>
-    </slot>
-    <span
-      v-if="props.label || slots.default"
-      :class="style.label({ class: props.ui?.label })"
-      data-part="label"
+    <LinkBase
+      v-bind="slotProps"
+      :class="ui.base({
+  class: [props.ui?.base, props.class],
+  active,
+  ...props.active && props.activeVariant ? { variant: props.activeVariant } : {},
+  ...props.active && props.activeColor ? { color: props.activeColor } : {}
+})"
+      @click="onClickWrapper"
     >
-      <slot>{{ label }}</slot>
-    </span>
-    <slot name="trailing">
-      <span
-        v-if="isTrailing && trailingIconName"
-        :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
-        data-part="trailing-icon"
-      ></span>
-    </slot>
+      <slot name="leading" :ui="ui">
+        <Icon
+          v-if="isLeading && leadingIconName"
+          :name="leadingIconName"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
+          data-part="leadingIcon"
+        />
+        <Avatar
+          v-else-if="props.avatar"
+          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+          v-bind="props.avatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })"
+          data-part="leadingAvatar"
+        />
+      </slot>
+
+      <slot :ui="ui">
+        <span
+          v-if="props.label"
+          :class="ui.label({ class: props.ui?.label, active })"
+          data-part="label"
+        >
+          {{ label }}
+        </span>
+      </slot>
+
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="isTrailing && trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </LinkBase>
   </Link>
 </template>