<script>
import theme from "#build/b24ui/skeleton";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { tv } from "../utils/tv";
const _props = defineProps({
  accent: { type: null, required: false, default: "default" },
  as: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const props = useComponentProps("skeleton", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.skeleton || {} })({
  accent: props.accent
}));
</script>

<template>
  <Primitive
    :as="props.as"
    aria-busy="true"
    aria-label="loading"
    aria-live="polite"
    role="alert"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
  >
    <slot />
  </Primitive>
</template>
