@byyuurin/ui 0.0.6 → 0.0.8

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,15 +1,15 @@
 import { type MaybeRefOrGetter } from 'vue';
 export interface UseComponentIconsProps {
-    /** Display an icon based on the `prefix` and `suffix` props. */
+    /** Display an icon based on the `leading` and `trailing` props. */
     icon?: string;
     /** When `true`, the icon will be displayed on the left side. */
-    prefix?: boolean;
+    leading?: boolean;
     /** Display an icon on the left side. */
-    prefixIcon?: string;
+    leadingIcon?: string;
     /** When `true`, the icon will be displayed on the right side. */
-    suffix?: boolean;
+    trailing?: boolean;
     /** Display an icon on the right side. */
-    suffixIcon?: string;
+    trailingIcon?: string;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**
@@ -19,8 +19,8 @@ export interface UseComponentIconsProps {
     loadingIcon?: string;
 }
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
-    isPrefix: import("vue").ComputedRef<boolean>;
-    isSuffix: import("vue").ComputedRef<boolean>;
-    prefixIconName: import("vue").ComputedRef<string | undefined>;
-    suffixIconName: import("vue").ComputedRef<string | undefined>;
+    isLeading: import("vue").ComputedRef<boolean>;
+    isTrailing: import("vue").ComputedRef<boolean>;
+    leadingIconName: import("vue").ComputedRef<string | undefined>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
 };

package/dist/runtime/composables/useComponentIcons.js

@@ -0,0 +1,24 @@
+import { computed, toValue } from "vue";
+import { useTheme } from "./useTheme.js";
+export function useComponentIcons(componentProps) {
+  const { theme } = useTheme();
+  const props = computed(() => toValue(componentProps));
+  const isLeading = computed(() => props.value.icon && props.value.leading || props.value.icon && !props.value.trailing || props.value.loading && !props.value.trailing || !!props.value.leadingIcon);
+  const isTrailing = computed(() => props.value.icon && props.value.trailing || props.value.loading && props.value.trailing || !!props.value.trailingIcon);
+  const leadingIconName = computed(() => {
+    if (props.value.loading)
+      return props.value.loadingIcon || theme.value.app.icons.loading;
+    return props.value.leadingIcon || props.value.icon;
+  });
+  const trailingIconName = computed(() => {
+    if (props.value.loading && !isLeading.value)
+      return props.value.loadingIcon || theme.value.app.icons.loading;
+    return props.value.trailingIcon || props.value.icon;
+  });
+  return {
+    isLeading,
+    isTrailing,
+    leadingIconName,
+    trailingIconName
+  };
+}

package/dist/runtime/composables/useKbd.d.ts

@@ -0,0 +1,35 @@
+interface KbdKeysSpecificMap {
+    meta: string;
+    alt: string;
+    ctrl: string;
+}
+export declare const kbdKeysMap: {
+    meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
+    command: string;
+    shift: string;
+    option: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
+export declare const useKbd: () => {
+    macOS: import("vue").ComputedRef<any>;
+    getKbdKey: (value?: KbdKey | (string & {})) => string | undefined;
+};
+export {};

package/dist/runtime/composables/useKbd.js

@@ -0,0 +1,49 @@
+import { createSharedComposable } from "@vueuse/core";
+import { computed, onMounted, reactive } from "vue";
+export const kbdKeysMap = {
+  meta: "",
+  ctrl: "",
+  alt: "",
+  win: "\u229E",
+  command: "\u2318",
+  shift: "\u21E7",
+  option: "\u2325",
+  enter: "\u21B5",
+  delete: "\u2326",
+  backspace: "\u232B",
+  escape: "\u238B",
+  tab: "\u21E5",
+  capslock: "\u21EA",
+  arrowup: "\u2191",
+  arrowright: "\u2192",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  pageup: "\u21DE",
+  pagedown: "\u21DF",
+  home: "\u2196",
+  end: "\u2198"
+};
+export const useKbd = createSharedComposable(() => {
+  const macOS = computed(() => import.meta.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/));
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " "
+  });
+  onMounted(() => {
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : kbdKeysMap.win;
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "alt";
+    kbdKeysSpecificMap.ctrl = macOS.value ? "\u2303" : "ctrl";
+  });
+  function getKbdKey(value) {
+    if (!value)
+      return;
+    if (["meta", "alt", "ctrl"].includes(value))
+      return kbdKeysSpecificMap[value];
+    return kbdKeysMap[value] || value.toUpperCase();
+  }
+  return {
+    macOS,
+    getKbdKey
+  };
+});

package/dist/runtime/composables/useLocale.d.ts

@@ -0,0 +1,8 @@
+import type { Translator } from '../utils/translator.js';
+export declare const useLocale: () => {
+    locale: import("vue").ComputedRef<import("../utils").Locale<import("..").Messages>>;
+    lang: import("vue").ComputedRef<string>;
+    code: import("vue").ComputedRef<string>;
+    dir: import("vue").ComputedRef<import("../utils").Direction>;
+    t: Translator<import("..").Messages>;
+};

package/dist/runtime/composables/useLocale.js

@@ -0,0 +1,22 @@
+import { createSharedComposable } from "@vueuse/core";
+import { computed, toValue } from "vue";
+import { injectLocaleContext } from "../app/injections.js";
+import localeDefault from "../locale/en.js";
+import { createTranslator } from "../utils/index.js";
+export const useLocale = createSharedComposable(() => {
+  const _locale = injectLocaleContext();
+  const locale = computed(() => toValue(_locale) ?? localeDefault);
+  const lang = computed(() => locale.value.name);
+  const code = computed(() => locale.value.code);
+  const dir = computed(() => locale.value.dir ?? "ltr");
+  const t = (path, options) => {
+    return createTranslator(toValue(locale))(path, options);
+  };
+  return {
+    locale,
+    lang,
+    code,
+    dir,
+    t
+  };
+});

package/dist/runtime/composables/useModal.d.ts

@@ -1,11 +1,6 @@
-import type { Component, ShallowRef } from 'vue';
+import type { Component } from 'vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
-import type { ModalProps } from '../types';
-export interface ModalState {
-    component: Component | string;
-    props: ModalProps;
-}
-export declare const InjectionKeyModalState: import("vue").InjectionKey<ShallowRef<ModalState>>, injectModalState: () => ShallowRef<ModalState> | undefined, provideModalState: (value: ShallowRef<ModalState>) => void;
+import type { ModalProps } from '../types/index.js';
 export declare const useModal: () => {
     open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
     close: () => void;

package/dist/runtime/composables/{useModal.mjs → useModal.js}

@@ -1,11 +1,6 @@
 import { createSharedComposable } from "@vueuse/core";
 import { ref } from "vue";
-import { defineInjection } from "./defineInjection.mjs";
-export const {
-  InjectionKey: InjectionKeyModalState,
-  inject: injectModalState,
-  provide: provideModalState
-} = defineInjection("ui.modal");
+import { injectModalState } from "../app/injections.js";
 export const useModal = createSharedComposable(() => {
   const modalState = injectModalState();
   const isOpen = ref(false);

package/dist/runtime/composables/useTheme.d.ts

@@ -1,9 +1,5 @@
-import type { UserConfig } from '@unocss/core';
-import type { MaybeRefOrGetter } from 'vue';
-import * as theme from '../theme';
-export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
-export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<UserConfig<object>>, provideUnoConfig: (value: UserConfig<object>) => void, injectUnoConfig: () => UserConfig<object>;
+import * as theme from '../theme/index.js';
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
-    createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit/index").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };
+    createStyler: <V extends import("@byyuurin/ui-kit").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit").CVCompoundVariants<V, S, B>, DV extends import("@byyuurin/ui-kit").CVDefaultVariants<V, S>, B extends import("@byyuurin/ui-kit").ClassValue = undefined, S extends import("@byyuurin/ui-kit").CVSlots = undefined>(theme: import("@byyuurin/ui-kit").CVMeta<V, CV, DV, B, S>) => [keyof V] extends string[] ? (props: import("@byyuurin/ui-kit").VariantProps<import("@byyuurin/ui-kit").CVReturnType<V, S, B>> & import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; } : (props?: import("..").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit").CVHandler<V, S, string>; };
 };

package/dist/runtime/composables/useTheme.js

@@ -0,0 +1,16 @@
+import { transformUnoRules } from "@byyuurin/ui/unocss";
+import { createSharedComposable } from "@vueuse/core";
+import { computed, toValue } from "vue";
+import { injectThemeExtension, injectUnoConfig } from "../app/injections.js";
+import * as theme from "../theme/index.js";
+import { extendTheme, prepareStyler } from "../utils/index.js";
+export const useTheme = createSharedComposable(() => {
+  const themeExtension = injectThemeExtension();
+  const unoConfig = injectUnoConfig();
+  const mergeRules = transformUnoRules(toValue(unoConfig));
+  const { createStyler } = prepareStyler(mergeRules);
+  return {
+    theme: computed(() => extendTheme(toValue(themeExtension), theme)),
+    createStyler
+  };
+});

package/dist/runtime/composables/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from '../types';
+import type { ToastProps } from '../types/index.js';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
     onClick?: (toast: Toast) => void;

package/dist/runtime/index.d.ts

@@ -0,0 +1,40 @@
+export { default as Accordion } from './components/Accordion.vue.js';
+export { default as Alert } from './components/Alert.vue.js';
+export { default as App } from './components/App.vue.js';
+export { default as Avatar } from './components/Avatar.vue.js';
+export { default as AvatarGroup } from './components/AvatarGroup.vue.js';
+export { default as Badge } from './components/Badge.vue.js';
+export { default as Breadcrumb } from './components/Breadcrumb.vue.js';
+export { default as Button } from './components/Button.vue.js';
+export { default as ButtonGroup } from './components/ButtonGroup.vue.js';
+export { default as Card } from './components/Card.vue.js';
+export { default as Carousel } from './components/Carousel.vue.js';
+export { default as Checkbox } from './components/Checkbox.vue.js';
+export { default as Chip } from './components/Chip.vue.js';
+export { default as Collapsible } from './components/Collapsible.vue.js';
+export { default as Drawer } from './components/Drawer.vue.js';
+export { default as Input } from './components/Input.vue.js';
+export { default as InputNumber } from './components/InputNumber.vue.js';
+export { default as Kbd } from './components/Kbd.vue.js';
+export { default as Link } from './components/Link.vue.js';
+export { default as LinkBase } from './components/LinkBase.vue.js';
+export { default as Modal } from './components/Modal.vue.js';
+export { default as ModalProvider } from './components/ModalProvider.vue.js';
+export { default as Pagination } from './components/Pagination.vue.js';
+export { default as PinInput } from './components/PinInput.vue.js';
+export { default as Popover } from './components/Popover.vue.js';
+export { default as Progress } from './components/Progress.vue.js';
+export { default as RadioGroup } from './components/RadioGroup.vue.js';
+export { default as ScrollArea } from './components/ScrollArea.vue.js';
+export { default as Select } from './components/Select.vue.js';
+export { default as Separator } from './components/Separator.vue.js';
+export { default as Skeleton } from './components/Skeleton.vue.js';
+export { default as Slider } from './components/Slider.vue.js';
+export { default as Switch } from './components/Switch.vue.js';
+export { default as Table } from './components/Table.vue.js';
+export { default as Tabs } from './components/Tabs.vue.js';
+export { default as Textarea } from './components/Textarea.vue.js';
+export { default as Toast } from './components/Toast.vue.js';
+export { default as Toaster } from './components/Toaster.vue.js';
+export { default as Tooltip } from './components/Tooltip.vue.js';
+export * from './types/index.js';

package/dist/runtime/index.js

@@ -0,0 +1,40 @@
+export { default as Accordion } from "./components/Accordion.vue";
+export { default as Alert } from "./components/Alert.vue";
+export { default as App } from "./components/App.vue";
+export { default as Avatar } from "./components/Avatar.vue";
+export { default as AvatarGroup } from "./components/AvatarGroup.vue";
+export { default as Badge } from "./components/Badge.vue";
+export { default as Breadcrumb } from "./components/Breadcrumb.vue";
+export { default as Button } from "./components/Button.vue";
+export { default as ButtonGroup } from "./components/ButtonGroup.vue";
+export { default as Card } from "./components/Card.vue";
+export { default as Carousel } from "./components/Carousel.vue";
+export { default as Checkbox } from "./components/Checkbox.vue";
+export { default as Chip } from "./components/Chip.vue";
+export { default as Collapsible } from "./components/Collapsible.vue";
+export { default as Drawer } from "./components/Drawer.vue";
+export { default as Input } from "./components/Input.vue";
+export { default as InputNumber } from "./components/InputNumber.vue";
+export { default as Kbd } from "./components/Kbd.vue";
+export { default as Link } from "./components/Link.vue";
+export { default as LinkBase } from "./components/LinkBase.vue";
+export { default as Modal } from "./components/Modal.vue";
+export { default as ModalProvider } from "./components/ModalProvider.vue";
+export { default as Pagination } from "./components/Pagination.vue";
+export { default as PinInput } from "./components/PinInput.vue";
+export { default as Popover } from "./components/Popover.vue";
+export { default as Progress } from "./components/Progress.vue";
+export { default as RadioGroup } from "./components/RadioGroup.vue";
+export { default as ScrollArea } from "./components/ScrollArea.vue";
+export { default as Select } from "./components/Select.vue";
+export { default as Separator } from "./components/Separator.vue";
+export { default as Skeleton } from "./components/Skeleton.vue";
+export { default as Slider } from "./components/Slider.vue";
+export { default as Switch } from "./components/Switch.vue";
+export { default as Table } from "./components/Table.vue";
+export { default as Tabs } from "./components/Tabs.vue";
+export { default as Textarea } from "./components/Textarea.vue";
+export { default as Toast } from "./components/Toast.vue";
+export { default as Toaster } from "./components/Toaster.vue";
+export { default as Tooltip } from "./components/Tooltip.vue";
+export * from "./types/index.js";

package/dist/runtime/locale/en.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../utils").Locale<import("..").Messages>;
+export default _default;

package/dist/runtime/locale/en.js

@@ -0,0 +1,28 @@
+import { defineLocale } from "../utils/index.js";
+export default defineLocale({
+  name: "English",
+  code: "en",
+  messages: {
+    alert: {
+      close: "Close"
+    },
+    carousel: {
+      prev: "Prev",
+      next: "Next",
+      goto: "Go to slide {page}"
+    },
+    inputNumber: {
+      increment: "Increment",
+      decrement: "Decrement"
+    },
+    modal: {
+      close: "Close"
+    },
+    table: {
+      noData: "No data"
+    },
+    toast: {
+      close: "Close"
+    }
+  }
+});

package/dist/runtime/locale/index.d.ts

@@ -0,0 +1,2 @@
+export { default as en } from './en.js';
+export { default as zhTW } from './zh-tw.js';

package/dist/runtime/locale/index.js

@@ -0,0 +1,2 @@
+export { default as en } from "./en.js";
+export { default as zhTW } from "./zh-tw.js";

package/dist/runtime/locale/zh-tw.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../utils").Locale<import("..").Messages>;
+export default _default;

package/dist/runtime/locale/zh-tw.js

@@ -0,0 +1,28 @@
+import { defineLocale } from "../utils/index.js";
+export default defineLocale({
+  name: "\u7E41\u9AD4\u4E2D\u6587",
+  code: "zh-TW",
+  messages: {
+    alert: {
+      close: "\u95DC\u9589"
+    },
+    carousel: {
+      prev: "\u4E0A\u4E00\u9801",
+      next: "\u4E0B\u4E00\u9801",
+      goto: "\u8DF3\u8F49\u5230\u7B2C {page} \u9801"
+    },
+    inputNumber: {
+      increment: "\u589E\u52A0",
+      decrement: "\u6E1B\u5C11"
+    },
+    modal: {
+      close: "\u95DC\u9589"
+    },
+    table: {
+      noData: "\u6C92\u6709\u8CC7\u6599"
+    },
+    toast: {
+      close: "\u95DC\u9589"
+    }
+  }
+});

package/dist/runtime/theme/accordion.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
         trigger: string;
         content: string[];
         body: string;
-        icon: string;
+        leadingIcon: string;
         trailingIcon: string;
         label: string;
     };
@@ -18,7 +18,7 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
         disabled: {
             true: {
                 trigger: string;
@@ -31,11 +31,11 @@ declare const _default: {
         trigger: string;
         content: string[];
         body: string;
-        icon: string;
+        leadingIcon: string;
         trailingIcon: string;
         label: string;
     }, undefined>;
-    defaultVariants: import("@byyuurin/ui-kit/index").CVDefaultVariants<{
+    defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
         disabled: {
             true: {
                 trigger: string;
@@ -48,7 +48,7 @@ declare const _default: {
         trigger: string;
         content: string[];
         body: string;
-        icon: string;
+        leadingIcon: string;
         trailingIcon: string;
         label: string;
     }>;

package/dist/runtime/theme/{accordion.mjs → accordion.js}

@@ -13,8 +13,8 @@ export default ct(
         "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"
       ],
       body: "text-sm pb-4 color-ui-cb/80",
-      icon: "shrink-0 size-5",
-      trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+      leadingIcon: "shrink-0 size-5",
+      trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-all duration-200",
       label: "text-start break-words"
     },
     variants: {

package/dist/runtime/theme/alert.d.ts

@@ -41,7 +41,7 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
         variant: {
             solid: {
                 root: string;
@@ -81,7 +81,7 @@ declare const _default: {
         actions: string;
         close: string;
     }, undefined>;
-    defaultVariants: import("@byyuurin/ui-kit/index").CVDefaultVariants<{
+    defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
         variant: {
             solid: {
                 root: string;

package/dist/runtime/theme/{alert.mjs → alert.js}

@@ -14,17 +14,17 @@ export default ct(
     variants: {
       variant: {
         "solid": {
-          root: "color-ui-c1 bg-solid-ui-fill",
+          root: "color-ui-cx bg-ui-fill",
           close: "ui-base-inverted"
         },
         "outline": {
-          root: "color-ui-content bg-solid-ui-c1 ring ring-inset ring-ui-fill"
+          root: "color-ui-content bg-ui-cx ring ring-inset ring-ui-fill/30"
         },
         "soft": {
-          root: "color-ui-content bg-solid-ui-fill/10"
+          root: "color-ui-content bg-soft-ui-fill/10"
         },
         "soft-outline": {
-          root: "color-ui-content bg-solid-ui-fill/10 ring ring-inset ring-ui-fill/40"
+          root: "color-ui-content bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
         }
       },
       orientation: {

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

@@ -4,12 +4,15 @@ declare const _default: {
         loading: string;
         check: string;
         indeterminate: string;
-        down: string;
-        arrowLeft: string;
-        arrowRight: string;
-        doubleLeft: string;
-        doubleRight: string;
+        chevronUp: string;
+        chevronDown: string;
+        chevronLeft: string;
+        chevronRight: string;
+        chevronDoubleLeft: string;
+        chevronDoubleRight: string;
         ellipsis: string;
+        plus: string;
+        minus: string;
     };
 };
 export default _default;

package/dist/runtime/theme/app.js

@@ -0,0 +1,18 @@
+export default {
+  /* @unocss-include */
+  icons: {
+    close: "i-mdi-close",
+    loading: "i-mdi-loading",
+    check: "i-mdi-check-bold",
+    indeterminate: "i-mdi-minus-thick",
+    chevronUp: "i-mdi-chevron-up",
+    chevronDown: "i-mdi-chevron-down",
+    chevronLeft: "i-mdi-chevron-left",
+    chevronRight: "i-mdi-chevron-right",
+    chevronDoubleLeft: "i-mdi-chevron-double-left",
+    chevronDoubleRight: "i-mdi-chevron-double-right",
+    ellipsis: "i-mdi-dots-horizontal",
+    plus: "i-mdi-plus",
+    minus: "i-mdi-minus"
+  }
+};

package/dist/runtime/theme/avatar-group.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        base: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+    }, undefined>;
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/avatar-group.js

@@ -0,0 +1,32 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "inline-flex flex-row-reverse justify-end",
+      base: "relative rounded-full ring-ui-cx first:me-0"
+    },
+    variants: {
+      size: {
+        xs: {
+          base: "ring-1 -me-0.125em"
+        },
+        sm: {
+          base: "ring-2 -me-0.125em"
+        },
+        md: {
+          base: "ring-2 -me-0.25em"
+        },
+        lg: {
+          base: "ring-3 -me-0.5em"
+        },
+        xl: {
+          base: "ring-3 -me-0.5em"
+        }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);