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 for={id} class="text-xs font-medium tracking-wide text-foreground-default uppercase">
31 {label}
32 {#if required}
33 <span class="text-foreground-danger">*</span>
34 {/if}
35 </label>
36 {/if}
37 {@render children({ id })}
38 {#if subtitle}
39 <p class="text-xs text-foreground-muted">{subtitle}</p>
40 {/if}
41</div>