<script>
import theme from "#build/b24ui/field-group";
</script>

<script setup>
import { provide, computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { fieldGroupInjectionKey } from "../composables/useFieldGroup";
import { tv } from "../utils/tv";
const props = defineProps({
  as: { type: null, required: false },
  size: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  noSplit: { type: Boolean, required: false, default: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.fieldGroup || {} }));
provide(fieldGroupInjectionKey, computed(() => ({
  orientation: props.orientation,
  noSplit: Boolean(props.noSplit),
  size: props.size
})));
</script>

<template>
  <Primitive
    :as="as"
    :data-orientation="orientation"
    class="group/items is-field-group"
    :class="b24ui({ orientation, class: props.class })"
  >
    <slot />
  </Primitive>
</template>
