frontend-svelte/src/shared/ui/ControlGroup/ControlGroup.svelte

<!--
    Component: ControlGroup
    Labeled container for form controls
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';

interface Props {
    /**
     * Group label
     */
    label: string;
    /**
     * Content snippet
     */
    children: Snippet;
    /**
     * CSS classes
     */
    class?: string;
}

const { label, children, class: className }: Props = $props();
</script>

<div class={cn('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
    <div class="flex justify-between items-center text-[0.6875rem] font-primary font-bold tracking-tight text-neutral-900 dark:text-neutral-100 uppercase leading-none">
        {label}
    </div>
    {@render children?.()}
</div>