alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import type { Snippet } from "svelte";
3 import type { HTMLAttributes } from "svelte/elements";
4
5 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
6 label?: string;
7 subtitle?: string;
8 for?: string;
9 required?: boolean;
10 class?: string;
11 children: Snippet<[{ id: string }]>;
12 }
13
14 let {
15 label,
16 subtitle,
17 for: forId,
18 required = false,
19 class: className = "",
20 children,
21 ...rest
22 }: Props = $props();
23
24 const generatedId = $props.id();
25 const id = $derived(forId ?? generatedId);
26</script>
27
28<div class={`flex flex-col gap-1.5 ${className}`} {...rest}>
29 {#if label}
30 <label
31 for={id}
32 class="text-paragraph-small font-medium tracking-wide text-foreground-default uppercase"
33 >
34 {label}
35 {#if required}
36 <span class="text-foreground-danger">*</span>
37 {/if}
38 </label>
39 {/if}
40 {@render children({ id })}
41 {#if subtitle}
42 <p class="text-paragraph-small text-foreground-muted">{subtitle}</p>
43 {/if}
44</div>