@byyuurin/ui 0.0.9 → 0.0.11

package/dist/runtime/app/injections.js

@@ -9,6 +9,41 @@ export const {
   inject: injectButtonGroup,
   provide: provideButtonGroup
 } = defineInjection("ui.button-group");
+export const {
+  InjectionKey: InjectionKeyFormOptions,
+  inject: injectFormOptions,
+  provide: provideFormOptions
+} = defineInjection("ui.form-options");
+export const {
+  InjectionKey: InjectionKeyFormBus,
+  inject: injectFormBus,
+  provide: provideFormBus
+} = defineInjection("ui.form-bus");
+export const {
+  InjectionKey: InjectionKeyFormItem,
+  inject: injectFormItem,
+  provide: provideFormItem
+} = defineInjection("ui.form-item");
+export const {
+  InjectionKey: InjectionKeyFormInputId,
+  inject: injectFormInputId,
+  provide: provideFormInputId
+} = defineInjection("ui.form-input-id");
+export const {
+  InjectionKey: InjectionKeyFormInputs,
+  inject: injectFormInputs,
+  provide: provideFormInputs
+} = defineInjection("ui.form-inputs");
+export const {
+  InjectionKey: InjectionKeyFormLoading,
+  inject: injectFormLoading,
+  provide: provideFormLoading
+} = defineInjection("ui.form-loading");
+export const {
+  InjectionKey: InjectionKeyFormErrors,
+  inject: injectFormErrors,
+  provide: provideFormErrors
+} = defineInjection("ui.form-errors", null);
 export const {
   InjectionKey: InjectionKeyLocaleContext,
   inject: injectLocaleContext,

package/dist/runtime/components/Accordion.vue

@@ -1,71 +1,36 @@
-<script lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
-import type { accordion } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface AccordionEmits extends AccordionRootEmits {}
-
-type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
-
-type DynamicSlots<T extends { slot?: string }, SlotProps, Slot = T['slot']> =
-  Slot extends string
-    ? Record<Slot | `${Slot}-body`, SlotProps>
-    : Record<string, never>
-
-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
-  trailingIcon?: string
-  slot?: string
-  content?: string
-  /** A unique value for the accordion item. Defaults to the index. */
-  value?: string
-  disabled?: boolean
-}
-
-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.chevronDown
-   */
-  trailingIcon?: string
-  labelKey?: string
-}
 </script>
 
-<script setup lang="ts" generic="T extends AccordionItem">
-import { reactivePick } from '@vueuse/core'
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { get } from '../utils'
-
-const props = withDefaults(defineProps<AccordionProps<T>>(), {
-  type: 'single',
-  collapsible: true,
-  unmountOnHide: true,
-  labelKey: 'label',
-})
-
-const emit = defineEmits<AccordionEmits>()
-const slots = defineSlots<AccordionSlots<T>>()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type', 'unmountOnHide'), emit)
-
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('accordion', props))
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { useTheme } from "../composables/useTheme";
+import { get } from "../utils";
+const props = defineProps({
+  items: { type: Array, required: false },
+  trailingIcon: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  type: { type: String, required: false, default: "single" },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emit);
+const { theme, generateStyle } = useTheme();
+const style = computed(() => generateStyle("accordion", props));
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+  <AccordionRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -73,29 +38,31 @@ const style = computed(() => generateStyle('accordion', props))
       :value="item.value || String(index)"
       :disabled="item.disabled"
       :class="style.item({ class: props.ui?.item })"
+      data-part="item"
     >
-      <AccordionHeader :class="style.header({ class: props.ui?.header })">
-        <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
+      <AccordionHeader :class="style.header({ class: props.ui?.header })" data-part="header">
+        <AccordionTrigger :class="style.trigger({ class: props.ui?.trigger, disabled: item.disabled })" data-part="trigger">
           <slot name="leading" v-bind="{ item, index, open }">
-            <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
+            <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
           </slot>
 
-          <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
+          <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.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 }">
-            <span :class="style.trailingIcon({ class: [item.trailingIcon || props.trailingIcon || theme.app.icons.chevronDown, props.ui?.trailingIcon] })"></span>
+            <span :class="style.trailingIcon({ class: [item.trailingIcon || props.trailingIcon || theme.app.icons.chevronDown, props.ui?.trailingIcon] })" data-part="trailing-icon"></span>
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
       <AccordionContent
-        v-if="item.content || slots.content || (item.slot && slots[item.slot]) || slots.body || (item.slot && slots[`${item.slot}-body`])"
+        v-if="item.content || slots.content || item.slot && slots[item.slot] || slots.body || item.slot && slots[`${item.slot}-body`]"
         :class="style.content({ class: props.ui?.content })"
+        data-part="content"
       >
         <slot :name="item.slot || 'content'" v-bind="{ item, index, open }">
-          <div :class="style.body({ class: props.ui?.body })">
+          <div :class="style.body({ class: props.ui?.body })" data-part="body">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" v-bind="{ item, index, open }">
               {{ item.content }}
             </slot>

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

@@ -0,0 +1,52 @@
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
+import type { accordion } from '../theme/index.js';
+import type { ComponentAttrs, DynamicSlots } from '../types/index.js';
+export interface AccordionEmits extends AccordionRootEmits {
+}
+export interface AccordionItem {
+    label?: string;
+    icon?: string;
+    trailingIcon?: string;
+    slot?: string;
+    content?: string;
+    /** A unique value for the accordion item. Defaults to the index. */
+    value?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+type SlotProps<T extends AccordionItem> = (props: {
+    item: T;
+    index: number;
+    open: boolean;
+}) => any;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    default?: SlotProps<T>;
+    leading?: SlotProps<T>;
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+    body?: SlotProps<T>;
+} & DynamicSlots<T, 'body', SlotProps<T>>;
+export interface AccordionProps<T extends AccordionItem = AccordionItem> 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.chevronDown
+     */
+    trailingIcon?: string;
+    labelKey?: string;
+}
+declare const _default: <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<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: AccordionSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Alert.vue

@@ -1,106 +1,67 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { alert } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+<script>
 
-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> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  title?: string
-  description?: string
-  icon?: string
-  variant?: AlertVariants['variant']
-  orientation?: AlertVariants['orientation']
-  /**
-   * Display a list of actions:
-   * - under the title and description when orientation is `vertical`
-   * - next to the close button when orientation is `horizontal`
-   */
-  actions?: ButtonProps[]
-  /**
-   * Display a close button to dismiss the alert.
-   * @default false
-   */
-  close?: ButtonProps | boolean
-  /**
-   * The icon displayed in the close button.
-   * @default app.icons.close
-   */
-  closeIcon?: string
-}
 </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'
-
-const props = withDefaults(defineProps<AlertProps>(), {
-  variant: 'solid',
-  orientation: 'vertical',
-})
-
-const emit = defineEmits<AlertEmits>()
-const slots = defineSlots<AlertSlots>()
-
-const { t } = useLocale()
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('alert', {
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import Button from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false },
+  variant: { type: null, required: false, default: "solid" },
+  orientation: { type: null, required: false, default: "vertical" },
+  actions: { type: Array, required: false },
+  close: { type: [Object, Boolean], required: false },
+  closeIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["update:open"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const { theme, generateStyle } = useTheme();
+const style = computed(() => generateStyle("alert", {
   ...props,
-  title: !!props.title || !!slots.title,
-}))
+  title: !!props.title || !!slots.title
+}));
 </script>
 
 <template>
   <Primitive
     :as="props.as"
-    :data-orientation="props.orientation"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    :data-orientation="props.orientation"
+    data-part="root"
   >
     <slot name="leading">
-      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })"></span>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })" data-part="icon"></span>
     </slot>
 
-    <div :class="style.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="props.title || slots.title" :class="style.title({ class: props.ui?.title })">
+    <div :class="style.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.title || slots.title" :class="style.title({ class: props.ui?.title })" data-part="title">
         <slot name="title">
           {{ props.title }}
         </slot>
       </div>
-      <div v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+      <div v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })" data-part="description">
         <slot name="description">
           {{ props.description }}
         </slot>
       </div>
 
-      <div v-if="props.orientation === 'vertical' && props.actions?.length" :class="style.actions({ class: props.ui?.actions })">
+      <div v-if="props.orientation === 'vertical' && props.actions?.length" :class="style.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) || props.close" :class="style.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="props.orientation === 'horizontal' && props.actions?.length || props.close" :class="style.actions({ class: props.ui?.actions, orientation: 'horizontal' })" data-part="actions">
       <template v-if="props.orientation === 'horizontal' && props.actions?.length">
         <slot name="actions">
           <Button v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
@@ -114,8 +75,9 @@ const style = computed(() => generateStyle('alert', {
           size="md"
           variant="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof props.close === 'object' ? props.close : undefined"
+          v-bind="typeof props.close === 'object' ? props.close : void 0"
           :class="style.close({ class: props.ui?.close })"
+          data-part="close"
           @click="emit('update:open', false)"
         />
       </slot>

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

@@ -0,0 +1,59 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { alert } from '../theme/index.js';
+import type { ButtonProps, ComponentAttrs } from '../types/index.js';
+export interface AlertEmits {
+    'update:open': [value: boolean];
+}
+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> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    title?: string;
+    description?: string;
+    icon?: string;
+    variant?: AlertVariants['variant'];
+    orientation?: AlertVariants['orientation'];
+    /**
+     * Display a list of actions:
+     * - under the title and description when orientation is `vertical`
+     * - next to the close button when orientation is `horizontal`
+     */
+    actions?: ButtonProps[];
+    /**
+     * Display a close button to dismiss the alert.
+     * @default false
+     */
+    close?: ButtonProps | boolean;
+    /**
+     * The icon displayed in the close button.
+     * @default app.icons.close
+     */
+    closeIcon?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    variant: "solid" | "outline" | "soft" | "soft-outline";
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/App.vue

@@ -1,46 +1,31 @@
-<script lang="ts">
-import type { UserConfig } from '@unocss/core'
-import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { Messages, ThemeExtension, ToastProviderProps } from '../types'
-import type { Locale } from '../utils'
+<script>
 
-export interface AppSlots {
-  default: (props?: {}) => any
-}
-
-export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
-  unoConfig?: UserConfig
-  ui?: ThemeExtension
-  toaster?: ToastProviderProps
-  tooltip?: TooltipProviderProps
-  locale?: Locale<Messages>
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
-import { toRef, useId } from 'vue'
-import { provideLocaleContext, provideThemeExtension, provideUnoConfig } from '../app/injections'
-import OverlayProvider from './OverlayProvider.vue'
-import ToastProvider from './ToastProvider.vue'
-
-const props = withDefaults(defineProps<AppProps>(), {
-  unoConfig: () => ({}),
-  ui: () => ({}),
-})
-
-defineSlots<AppSlots>()
-
-const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
-const tooltipProps = toRef(() => props.tooltip)
-const toastProviderProps = toRef(() => props.toaster)
-
-provideUnoConfig(() => props.unoConfig)
-provideThemeExtension(() => props.ui)
-
-const locale = toRef(() => props.locale)
-provideLocaleContext(locale)
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { ConfigProvider, TooltipProvider, useForwardProps } from "reka-ui";
+import { toRef, useId } from "vue";
+import { provideLocaleContext, provideThemeExtension, provideUnoConfig } from "../app/injections";
+import OverlayProvider from "./OverlayProvider.vue";
+import ToastProvider from "./ToastProvider.vue";
+const props = defineProps({
+  unoConfig: { type: Object, required: false, default: () => ({}) },
+  ui: { type: null, required: false, default: () => ({}) },
+  toaster: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  locale: { type: Object, required: false },
+  scrollBody: { type: [Boolean, Object], required: false },
+  nonce: { type: String, required: false }
+});
+defineSlots();
+const configProviderProps = useForwardProps(reactivePick(props, "scrollBody"));
+const tooltipProps = toRef(() => props.tooltip);
+const toastProviderProps = toRef(() => props.toaster);
+provideUnoConfig(() => props.unoConfig);
+provideThemeExtension(() => props.ui);
+const locale = toRef(() => props.locale);
+provideLocaleContext(locale);
 </script>
 
 <template>

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

@@ -0,0 +1,24 @@
+import type { UserConfig } from '@unocss/core';
+import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui';
+import type { Messages, ThemeExtension, ToastProviderProps } from '../types/index.js';
+import type { Locale } from '../utils/index.js';
+export interface AppSlots {
+    default: (props?: {}) => any;
+}
+export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
+    unoConfig?: UserConfig;
+    ui?: ThemeExtension;
+    toaster?: ToastProviderProps;
+    tooltip?: TooltipProviderProps;
+    locale?: Locale<Messages>;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & Readonly<{}>, {
+    ui: ThemeExtension;
+    unoConfig: UserConfig;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AppSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Avatar.vue

@@ -1,70 +1,50 @@
-<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'
+<script>
 
-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 { generateStyle } = useTheme()
-const style = computed(() => generateStyle('avatar', {
+<script setup>
+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 = defineProps({
+  as: { type: null, required: false },
+  src: { type: String, required: false, default: "" },
+  alt: { type: String, required: false },
+  icon: { type: String, required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  style: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const { size } = useAvatarGroup(props);
+const fallback = computed(() => props.text || (props.alt || "").split(" ").map((word) => word.charAt(0)).join("").slice(0, 2));
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("avatar", {
   ...props,
-  size: size.value,
-}))
-
-const error = shallowRef(false)
-
+  size: size.value
+}));
+const error = shallowRef(false);
 watch(() => props.src, () => {
   if (error.value)
-    error.value = false
-})
+    error.value = false;
+});
 </script>
 
 <template>
-  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :style="props.style">
+  <AvatarRoot :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" :data-part="$attrs['data-part'] ?? 'root'" :style="props.style">
     <AvatarImage
       :src="props.src"
       :alt="props.alt"
       :class="style.image({ class: props.ui?.image })"
+      data-part="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>
+      <span v-if="props.icon" :class="style.icon({ class: [props.icon, props.ui?.icon] })" data-part="icon"></span>
+      <span v-else :class="style.fallback({ class: props.ui?.fallback })" data-part="fallback">{{ fallback || "\xA0" }}</span>
     </AvatarFallback>
   </AvatarRoot>
 </template>