@byyuurin/ui 0.0.7 → 0.0.8

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.13.1"
   },
-  "version": "0.0.7",
+  "version": "0.0.8",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,9 +1,9 @@
 import { defineNuxtModule, useLogger, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { p as packageName } from './shared/ui.d1728164.mjs';
+import { n as name } from './shared/ui.ba24b380.mjs';
 
 const module = defineNuxtModule({
   meta: {
-    name: packageName,
+    name: name,
     configKey: "ui",
     compatibility: {
       nuxt: ">=3.13.1"
@@ -13,15 +13,15 @@ const module = defineNuxtModule({
     prefix: "U"
   },
   setup(options, nuxt) {
-    const logger = useLogger(packageName);
+    const logger = useLogger(name);
     const { resolve } = createResolver(import.meta.url);
     if (!nuxt.options.modules.includes("@unocss/nuxt")) {
-      logger.error(`\`${packageName}\` requires the \`@unocss/nuxt\` module to be installed.`);
+      logger.error(`\`${name}\` requires the \`@unocss/nuxt\` module to be installed.`);
       return;
     }
     nuxt.options.vite.optimizeDeps ??= {};
     nuxt.options.vite.optimizeDeps.include ??= [];
-    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`);
+    nuxt.options.vite.optimizeDeps.include.push(`${name}/unocss`);
     nuxt.options.alias["#ui"] = resolve("./runtime");
     addComponentsDir({
       path: resolve("./runtime/components"),

package/dist/module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":[],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,WAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAU,WAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,cAAc,CAAG,EAAA;AAClD,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAA,WAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAG,WAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}
+{"version":3,"file":"module.mjs","sources":["../src/module.ts"],"sourcesContent":["import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, useLogger } from '@nuxt/kit'\nimport { packageName } from './shared'\n\nexport interface ModuleOptions {\n  /**\n   * prefix for components used in templates\n   *\n   * @default \"U\"\n   */\n  prefix?: string\n}\n\nexport default defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: packageName,\n    configKey: 'ui',\n    compatibility: {\n      nuxt: '>=3.13.1',\n    },\n  },\n  defaults: {\n    prefix: 'U',\n  },\n  setup(options, nuxt) {\n    const logger = useLogger(packageName)\n    const { resolve } = createResolver(import.meta.url)\n\n    // Make sure the UnoCSS Nuxt module is installed\n    if (!nuxt.options.modules.includes('@unocss/nuxt')) {\n      logger.error(`\\`${packageName}\\` requires the \\`@unocss/nuxt\\` module to be installed.`)\n      return\n    }\n\n    nuxt.options.vite.optimizeDeps ??= {}\n    nuxt.options.vite.optimizeDeps.include ??= []\n    nuxt.options.vite.optimizeDeps.include.push(`${packageName}/unocss`)\n\n    nuxt.options.alias['#ui'] = resolve('./runtime')\n\n    addComponentsDir({\n      path: resolve('./runtime/components'),\n      prefix: options.prefix,\n      pathPrefix: false,\n    })\n\n    addImportsDir(resolve('./runtime/composables'))\n  },\n})\n"],"names":["packageName"],"mappings":";;;AAYA,eAAe,gBAAgC,CAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,IAAM,EAAAA,IAAA;AAAA,IACN,SAAW,EAAA,IAAA;AAAA,IACX,aAAe,EAAA;AAAA,MACb,IAAM,EAAA,UAAA;AAAA,KACR;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EACA,KAAA,CAAM,SAAS,IAAM,EAAA;AACnB,IAAM,MAAA,MAAA,GAAS,UAAUA,IAAW,CAAA,CAAA;AACpC,IAAA,MAAM,EAAE,OAAA,EAAY,GAAA,cAAA,CAAe,YAAY,GAAG,CAAA,CAAA;AAGlD,IAAA,IAAI,CAAC,IAAK,CAAA,OAAA,CAAQ,OAAQ,CAAA,QAAA,CAAS,cAAc,CAAG,EAAA;AAClD,MAAO,MAAA,CAAA,KAAA,CAAM,CAAK,EAAA,EAAAA,IAAW,CAA0D,wDAAA,CAAA,CAAA,CAAA;AACvF,MAAA,OAAA;AAAA,KACF;AAEA,IAAK,IAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,YAAA,KAAiB,EAAC,CAAA;AACpC,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,CAAK,YAAa,CAAA,OAAA,KAAY,EAAC,CAAA;AAC5C,IAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,YAAA,CAAa,QAAQ,IAAK,CAAA,CAAA,EAAGA,IAAW,CAAS,OAAA,CAAA,CAAA,CAAA;AAEnE,IAAA,IAAA,CAAK,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA,GAAI,QAAQ,WAAW,CAAA,CAAA;AAE/C,IAAiB,gBAAA,CAAA;AAAA,MACf,IAAA,EAAM,QAAQ,sBAAsB,CAAA;AAAA,MACpC,QAAQ,OAAQ,CAAA,MAAA;AAAA,MAChB,UAAY,EAAA,KAAA;AAAA,KACb,CAAA,CAAA;AAED,IAAc,aAAA,CAAA,OAAA,CAAQ,uBAAuB,CAAC,CAAA,CAAA;AAAA,GAChD;AACF,CAAC,CAAA;;;;"}

package/dist/runtime/app/injections.d.ts

@@ -0,0 +1,16 @@
+import type { UserConfig } from '@unocss/core';
+import type { Component, ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+import type { AvatarGroupProps, ButtonGroupProps, Messages, ModalProps } from '../types/index.js';
+import type { Locale } from '../utils/index.js';
+export type AvatarGroupProvideValue = Pick<AvatarGroupProps, 'size'>;
+export declare const InjectionKeyAvatarGroup: import("vue").InjectionKey<ComputedRef<AvatarGroupProvideValue>>, injectAvatarGroup: () => ComputedRef<AvatarGroupProvideValue> | undefined, provideAvatarGroup: (value: ComputedRef<AvatarGroupProvideValue>) => void;
+export type ButtonGroupProvideValue = Pick<ButtonGroupProps, 'size' | 'orientation'>;
+export declare const InjectionKeyButtonGroup: import("vue").InjectionKey<ComputedRef<ButtonGroupProvideValue>>, injectButtonGroup: () => ComputedRef<ButtonGroupProvideValue> | undefined, provideButtonGroup: (value: ComputedRef<ButtonGroupProvideValue>) => void;
+export declare const InjectionKeyLocaleContext: import("vue").InjectionKey<MaybeRefOrGetter<Locale<Messages> | undefined>>, injectLocaleContext: () => MaybeRefOrGetter<Locale<Messages> | undefined>, provideLocaleContext: (value: MaybeRefOrGetter<Locale<Messages> | undefined>) => void;
+export interface ModalStateProvideValue {
+    component: Component | string;
+    props: ModalProps;
+}
+export declare const InjectionKeyModalState: import("vue").InjectionKey<ShallowRef<ModalStateProvideValue>>, injectModalState: () => ShallowRef<ModalStateProvideValue> | undefined, provideModalState: (value: ShallowRef<ModalStateProvideValue>) => void;
+export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("..").PartialTheme<typeof import("../theme")>>;
+export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<MaybeRefOrGetter<UserConfig<object>>>, provideUnoConfig: (value: MaybeRefOrGetter<UserConfig<object>>) => void, injectUnoConfig: () => MaybeRefOrGetter<UserConfig<object>>;

package/dist/runtime/app/injections.js

@@ -0,0 +1,31 @@
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyAvatarGroup,
+  inject: injectAvatarGroup,
+  provide: provideAvatarGroup
+} = defineInjection("ui.avatar-group");
+export const {
+  InjectionKey: InjectionKeyButtonGroup,
+  inject: injectButtonGroup,
+  provide: provideButtonGroup
+} = defineInjection("ui.button-group");
+export const {
+  InjectionKey: InjectionKeyLocaleContext,
+  inject: injectLocaleContext,
+  provide: provideLocaleContext
+} = defineInjection("ui.locale-context");
+export const {
+  InjectionKey: InjectionKeyModalState,
+  inject: injectModalState,
+  provide: provideModalState
+} = defineInjection("ui.modal");
+export const {
+  InjectionKey: InjectionKeyThemeExtension,
+  provide: provideThemeExtension,
+  inject: injectThemeExtension
+} = defineInjection("ui.theme-extension", {});
+export const {
+  InjectionKey: InjectionKeyUnoConfig,
+  provide: provideUnoConfig,
+  inject: injectUnoConfig
+} = defineInjection("ui.uno-config", {});

package/dist/runtime/components/Accordion.vue

@@ -1,12 +1,24 @@
 <script lang="ts">
 import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
 import type { accordion } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends { slot?: string }> = {
+  default?: SlotProps<T>
+  leading?: SlotProps<T>
+  trailing?: SlotProps<T>
+  content?: SlotProps<T>
+  body?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 
 export interface AccordionItem {
   label?: string
   icon?: string
-  suffixIcon?: string
+  trailingIcon?: string
   slot?: string
   content?: string
   /** A unique value for the accordion item. Defaults to the index. */
@@ -14,25 +26,13 @@ export interface AccordionItem {
   disabled?: boolean
 }
 
-export interface AccordionEmits extends AccordionRootEmits {}
-
-type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
-
-export type AccordionSlots<T extends { slot?: string }> = {
-  default?: SlotProps<T>
-  prefix?: SlotProps<T>
-  suffix?: SlotProps<T>
-  content?: SlotProps<T>
-  body?: SlotProps<T>
-} & Record<string, SlotProps<T>>
-
 export interface AccordionProps<T> extends ComponentAttrs<typeof accordion>, Pick<AccordionRootProps, 'as' | 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
   items?: T[]
   /**
    * The icon displayed on the right side of the trigger.
-   * @default app.icons.down
+   * @default app.icons.chevronDown
    */
-  suffixIcon?: string
+  trailingIcon?: string
   labelKey?: string
 }
 </script>
@@ -74,16 +74,16 @@ const style = computed(() => {
     >
       <AccordionHeader :class="style.header({ class: props.ui?.header })">
         <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
-          <slot name="prefix" v-bind="{ item, index, open }">
-            <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
+          <slot name="leading" v-bind="{ item, index, open }">
+            <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
           </slot>
 
           <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
             <slot v-bind="{ item, index, open }">{{ get(item, props.labelKey) }}</slot>
           </span>
 
-          <slot name="suffix" v-bind="{ item, index, open }">
-            <span :class="style.suffixIcon({ class: [item.suffixIcon || props.suffixIcon || theme.app.icons.down, props.ui?.suffixIcon] })"></span>
+          <slot name="trailing" v-bind="{ item, index, open }">
+            <span :class="style.trailingIcon({ class: [item.trailingIcon || props.trailingIcon || theme.app.icons.chevronDown, props.ui?.trailingIcon] })"></span>
           </slot>
         </AccordionTrigger>
       </AccordionHeader>

package/dist/runtime/components/Alert.vue

@@ -4,9 +4,26 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { alert } from '../theme'
 import type { ButtonProps, ComponentAttrs } from '../types'
 
+export interface AlertEmits {
+  (event: 'update:open', value: boolean): void
+}
+
+export interface AlertSlots {
+  leading?: (props?: {}) => any
+  title?: (props?: {}) => any
+  description?: (props?: {}) => any
+  actions?: (props?: {}) => any
+  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
+}
+
 type AlertVariants = VariantProps<typeof alert>
 
-export interface AlertProps extends ComponentAttrs<typeof alert>, Pick<PrimitiveProps, 'as'> {
+export interface AlertProps extends ComponentAttrs<typeof alert> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   title?: string
   description?: string
   icon?: string
@@ -29,23 +46,12 @@ export interface AlertProps extends ComponentAttrs<typeof alert>, Pick<Primitive
    */
   closeIcon?: string
 }
-
-export interface AlertEmits {
-  (event: 'update:open', value: boolean): void
-}
-
-export interface AlertSlots {
-  prepend?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  actions?: (props?: {}) => any
-  close?: (props: { ui: ComponentAttrs<typeof alert>['ui'] }) => any
-}
 </script>
 
 <script setup lang="ts">
 import { Primitive } from 'reka-ui'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 import Button from './Button.vue'
 
@@ -57,6 +63,7 @@ const props = withDefaults(defineProps<AlertProps>(), {
 const emit = defineEmits<AlertEmits>()
 const slots = defineSlots<AlertSlots>()
 
+const { t } = useLocale()
 const { theme, createStyler } = useTheme()
 const style = computed(() => {
   const styler = createStyler(theme.value.alert)
@@ -73,7 +80,7 @@ const style = computed(() => {
     :data-orientation="props.orientation"
     :class="style.root({ class: [props.class, props.ui?.root] })"
   >
-    <slot name="prepend">
+    <slot name="leading">
       <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
     </slot>
 
@@ -109,7 +116,7 @@ const style = computed(() => {
           :icon="props.closeIcon || theme.app.icons.close"
           size="md"
           variant="link"
-          aria-label="Close"
+          :aria-label="t('alert.close')"
           v-bind="typeof props.close === 'object' ? props.close : undefined"
           :class="style.close({ class: props.ui?.close })"
           @click="emit('update:open', false)"

package/dist/runtime/components/App.vue

@@ -1,27 +1,28 @@
 <script lang="ts">
 import type { UserConfig } from '@unocss/core'
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { ThemeExtension, ToasterProps } from '../types'
+import type { Messages, ThemeExtension, ToasterProps } from '../types'
+import type { Locale } from '../utils'
+
+export interface AppSlots {
+  default: (props?: {}) => any
+}
 
 export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   unoConfig?: UserConfig
   ui?: ThemeExtension
-  tooltip?: TooltipProviderProps
   toaster?: ToasterProps
-}
-
-export interface AppSlots {
-  default: (props?: Record<string, unknown>) => any
+  tooltip?: TooltipProviderProps
+  locale?: Locale<Messages>
 }
 </script>
 
 <script setup lang="ts">
 import { reactivePick } from '@vueuse/core'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
-import { computed, shallowRef, toRef, useId } from 'vue'
-import type { ModalState } from '../composables/useModal'
-import { provideModalState } from '../composables/useModal'
-import { provideThemeExtension, provideUnoConfig } from '../composables/useTheme'
+import { shallowRef, toRef, useId } from 'vue'
+import type { ModalStateProvideValue } from '../app/injections'
+import { provideLocaleContext, provideModalState, provideThemeExtension, provideUnoConfig } from '../app/injections'
 import ModalProvider from './ModalProvider.vue'
 import Toaster from './Toaster.vue'
 
@@ -36,16 +37,15 @@ const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
 
-const modalState = shallowRef<ModalState>({
+const modalState = shallowRef<ModalStateProvideValue>({
   component: 'div',
   props: {},
 })
 
-const themeExtension = computed(() => props.ui)
-
 provideModalState(modalState)
-provideUnoConfig(props.unoConfig)
-provideThemeExtension(themeExtension)
+provideUnoConfig(() => props.unoConfig)
+provideThemeExtension(() => props.ui)
+provideLocaleContext(() => props.locale)
 </script>
 
 <template>

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { AvatarRootProps } from 'reka-ui'
+import type { avatar } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface AvatarSlots {
+  default?: (props?: {}) => any
+}
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends ComponentAttrs<typeof avatar> {
+  /**
+   * The element or component this component should render as.
+   * @default "span"
+   */
+  as?: AvatarRootProps['as']
+  src?: string
+  alt?: string
+  icon?: string
+  text?: string
+  size?: AvatarVariants['size']
+  style?: string | HTMLElement['style']
+}
+</script>
+
+<script setup lang="ts">
+import { AvatarFallback, AvatarImage, AvatarRoot } from 'reka-ui'
+import { computed, shallowRef, watch } from 'vue'
+import { useAvatarGroup } from '../composables/useAvatarGroup'
+import { useTheme } from '../composables/useTheme'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  src: '',
+})
+
+const { size } = useAvatarGroup(props)
+const fallback = computed(() => props.text || (props.alt || '').split(' ').map((word) => word.charAt(0)).join('').slice(0, 2))
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.avatar)
+  return styler({
+    ...props,
+    size: size.value,
+  })
+})
+
+const error = shallowRef(false)
+
+watch(() => props.src, () => {
+  if (error.value)
+    error.value = false
+})
+</script>
+
+<template>
+  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+    <AvatarImage
+      :src="props.src"
+      :alt="props.alt"
+      :class="style.image({ class: props.ui?.image })"
+    />
+
+    <AvatarFallback as-child>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
+      <span v-else :class="style.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/AvatarGroup.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { avatarGroup } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface AvatarGroupSlots {
+  default?: (props?: {}) => any
+}
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { provideAvatarGroup } from '../app/injections'
+import { useTheme } from '../composables/useTheme'
+import Avatar from './Avatar.vue'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const children = computed(() => {
+  let nodes = slots.default?.()
+
+  if (Array.isArray(nodes) && nodes?.length) {
+    nodes = nodes.flatMap((child) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string')
+          return null
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return nodes || []
+})
+
+const visibleAvatars = computed(() => {
+  if (children.value.length === 0)
+    return []
+
+  if (!max.value || max.value <= 0)
+    return [...children.value].reverse()
+
+  return [...children.value].slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  if (children.value.length === 0)
+    return 0
+
+  return children.value.length - visibleAvatars.value.length
+})
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.avatarGroup)
+  return styler(props)
+})
+
+provideAvatarGroup(computed(() => props))
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" />
+  </Primitive>
+</template>

package/dist/runtime/components/Badge.vue

@@ -4,9 +4,23 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { badge } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface BadgeEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface BadgeSlots {
+  default?: (props?: {}) => any
+  content?: (props?: {}) => any
+}
+
 type BadgeVariants = VariantProps<typeof badge>
 
-export interface BadgeProps extends ComponentAttrs<typeof badge>, Pick<PrimitiveProps, 'as'> {
+export interface BadgeProps extends ComponentAttrs<typeof badge> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   text?: string | number
   size?: BadgeVariants['size']
   position?: BadgeVariants['position']
@@ -16,15 +30,6 @@ export interface BadgeProps extends ComponentAttrs<typeof badge>, Pick<Primitive
   /** When `true`, render the badge relatively to the parent. */
   standalone?: boolean
 }
-
-export interface BadgeEmits {
-  (e: 'update:show', payload: boolean): void
-}
-
-export interface BadgeSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Breadcrumb.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { breadcrumb } from '../theme'
+import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item'?: SlotProps<T>
+  'item-leading'?: SlotProps<T>
+  'item-label'?: SlotProps<T>
+  'item-trailing'?: SlotProps<T>
+  'separator'?: (props?: {}) => any
+} & DynamicSlots<T, SlotProps<T>>
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> extends ComponentAttrs<typeof breadcrumb> {
+  /**
+   * The element or component this component should render as.
+   * @default "nav"
+   */
+  as?: PrimitiveProps['as']
+  dir?: 'rtl' | 'ltr'
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @default app.icons.chevronRight
+   */
+  separatorIcon?: string
+  /**
+   * The key used to get the label from the item.
+   * @default "label"
+   */
+  labelKey?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends BreadcrumbItem">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { get, pickLinkProps } from '../utils'
+import Link from './Link.vue'
+import LinkBase from './LinkBase.vue'
+
+const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
+  as: 'nav',
+  labelKey: 'label',
+})
+
+const slots = defineSlots<BreadcrumbSlots<T>>()
+
+const { theme, createStyler } = useTheme()
+
+const separatorIcon = computed(() => props.separatorIcon || (props.dir === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
+
+const style = computed(() => {
+  const styler = createStyler(theme.value.breadcrumb)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <ol :class="style.list({ class: props.ui?.list })">
+      <template v-for="(item, index) in props.items" :key="index">
+        <li :class="style.item({ class: props.ui?.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' : undefined"
+              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+            >
+              <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] })"></span>
+                </slot>
+
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="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>
+            </LinkBase>
+          </Link>
+        </li>
+
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })">
+          <slot name="separator">
+            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </Primitive>
+</template>