@refrakt-md/lumina 0.4.0

package/sveltekit/components/Comparison.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import type { SerializedTag, RendererNode } from '@refrakt-md/svelte';
+	import { Renderer } from '@refrakt-md/svelte';
+	import type { Snippet } from 'svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const typeName = tag.attributes.typeof;
+
+	function isTag(n: RendererNode): n is SerializedTag {
+		return n !== null && typeof n === 'object' && !Array.isArray(n) && (n as any).$$mdtype === 'Tag';
+	}
+
+	function meta(node: SerializedTag, prop: string): string {
+		const child = node.children.find(
+			(c): c is SerializedTag => isTag(c) && c.name === 'meta' && c.attributes?.property === prop
+		);
+		return child?.attributes?.content ?? '';
+	}
+
+	function propText(node: SerializedTag, prop: string): string {
+		const child = node.children.find(
+			(c): c is SerializedTag => isTag(c) && c.attributes?.property === prop
+		);
+		if (!child) return '';
+		return child.children.filter((c): c is string => typeof c === 'string').join('');
+	}
+
+	function findByType(node: SerializedTag, type: string): SerializedTag[] {
+		const results: SerializedTag[] = [];
+		function walk(children: RendererNode[]) {
+			for (const c of children) {
+				if (isTag(c)) {
+					if (c.attributes?.typeof === type) {
+						results.push(c);
+					} else {
+						walk(c.children);
+					}
+				} else if (Array.isArray(c)) {
+					walk(c);
+				}
+			}
+		}
+		walk(node.children);
+		return results;
+	}
+
+	function findRef(node: SerializedTag, name: string): SerializedTag | undefined {
+		for (const c of node.children) {
+			if (isTag(c) && c.attributes?.['data-name'] === name) return c;
+		}
+		return undefined;
+	}
+
+	const isComparison = typeName === 'Comparison';
+	const layout = isComparison ? (meta(tag, 'layout') || 'table') : '';
+	const verdict = isComparison ? meta(tag, 'verdict') : '';
+	const highlightedName = isComparison ? meta(tag, 'highlighted') : '';
+	const labelsPosition = isComparison ? (meta(tag, 'labels') || 'left') : '';
+	const rowLabelsJson = isComparison ? meta(tag, 'rowLabels') : '[]';
+	const rowLabels: string[] = isComparison ? (() => { try { return JSON.parse(rowLabelsJson); } catch { return []; } })() : [];
+	const columns = isComparison ? findByType(tag, 'ComparisonColumn') : [];
+
+	const titleTag = isComparison ? tag.children.find(
+		(c): c is SerializedTag => isTag(c) && /^h[1-6]$/.test(c.name)
+	) : undefined;
+	const titleText = titleTag ? titleTag.children.filter((c): c is string => typeof c === 'string').join('') : '';
+
+	interface ColumnData {
+		name: string;
+		highlighted: boolean;
+		rows: SerializedTag[];
+	}
+
+	const columnData: ColumnData[] = isComparison ? columns.map(col => ({
+		name: propText(col, 'name'),
+		highlighted: meta(col, 'highlighted') === 'true',
+		rows: findByType(col, 'ComparisonRow'),
+	})) : [];
+
+	const isColumn = typeName === 'ComparisonColumn';
+	const colName = isColumn ? propText(tag, 'name') : '';
+	const colHighlighted = isColumn ? meta(tag, 'highlighted') === 'true' : false;
+
+	const isRow = typeName === 'ComparisonRow';
+	const rowLabel = isRow ? propText(tag, 'label') : '';
+	const rowType = isRow ? meta(tag, 'rowType') : '';
+	const rowBody = isRow ? findRef(tag, 'body') : undefined;
+</script>
+
+{#if isComparison}
+	<section class="rf-comparison rf-comparison--{layout}">
+		{#if titleText}
+			<h2 class="rf-comparison__title">{titleText}</h2>
+		{/if}
+
+		{#if layout === 'cards'}
+			<div class="rf-comparison__cards">
+				{#each columnData as col}
+					<div class="rf-comparison-card {col.highlighted ? 'rf-comparison-card--highlighted' : ''}">
+						{#if col.highlighted}
+							<div class="rf-comparison-card__badge">Recommended</div>
+						{/if}
+						<h3 class="rf-comparison-card__name">{col.name}</h3>
+						<ul class="rf-comparison-card__rows">
+							{#each col.rows as row}
+								{@const rType = meta(row, 'rowType')}
+								{@const rLabel = propText(row, 'label')}
+								{@const rBody = findRef(row, 'body')}
+								{#if rType !== 'empty'}
+									<li class="rf-comparison-card__row {rType === 'negative' ? 'rf-comparison-card__row--negative' : ''} {rType === 'callout' ? 'rf-comparison-card__row--callout' : ''}">
+										{#if rType === 'check'}
+											<span class="rf-comparison__row-icon rf-comparison__row-icon--check" aria-label="Supported">&#10003;</span>
+											{#if rLabel}<strong>{rLabel}</strong>{/if}
+											{#if rBody}<Renderer node={rBody.children} />{/if}
+										{:else if rType === 'cross'}
+											<span class="rf-comparison__row-icon rf-comparison__row-icon--cross" aria-label="Not supported">&#10007;</span>
+											{#if rLabel}<strong>{rLabel}</strong>{/if}
+											{#if rBody}<Renderer node={rBody.children} />{/if}
+										{:else if rType === 'negative'}
+											{#if rLabel}<strong>{rLabel}</strong>{/if}
+											{#if rBody}<span class="rf-comparison__negative"><Renderer node={rBody.children} /></span>{/if}
+										{:else if rType === 'callout'}
+											<div class="rf-comparison__callout-badge">
+												{#if rBody}<Renderer node={rBody.children} />{/if}
+											</div>
+										{:else}
+											{#if rLabel}<strong>{rLabel}</strong>{/if}
+											{#if rBody}<Renderer node={rBody.children} />{/if}
+										{/if}
+									</li>
+								{/if}
+							{/each}
+						</ul>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="rf-comparison__table-wrapper">
+				<table class="rf-comparison__table">
+					<thead>
+						<tr>
+							{#if labelsPosition !== 'hidden'}
+								<th class="rf-comparison__label-col"></th>
+							{/if}
+							{#each columnData as col}
+								<th class="{col.highlighted ? 'rf-comparison__col-header--highlighted' : ''}">
+									{col.name}
+									{#if col.highlighted}
+										<span class="rf-comparison__recommended-badge">Recommended</span>
+									{/if}
+								</th>
+							{/each}
+						</tr>
+					</thead>
+					<tbody>
+						{#each rowLabels as label, i}
+							<tr>
+								{#if labelsPosition !== 'hidden'}
+									<th class="rf-comparison__row-label" scope="row">{label}</th>
+								{/if}
+								{#each columnData as col}
+									{@const row = col.rows[i]}
+									{@const rType = row ? meta(row, 'rowType') : 'empty'}
+									{@const rBody = row ? findRef(row, 'body') : undefined}
+									<td class="rf-comparison__cell {col.highlighted ? 'rf-comparison__cell--highlighted' : ''} {rType === 'empty' ? 'rf-comparison__cell--empty' : ''}">
+										{#if rType === 'check'}
+											<span class="rf-comparison__row-icon rf-comparison__row-icon--check" aria-label="Supported">&#10003;</span>
+										{:else if rType === 'cross'}
+											<span class="rf-comparison__row-icon rf-comparison__row-icon--cross" aria-label="Not supported">&#10007;</span>
+										{:else if rType === 'negative'}
+											{#if rBody}
+												<span class="rf-comparison__negative"><Renderer node={rBody.children} /></span>
+											{/if}
+										{:else if rType === 'empty'}
+											<span class="rf-comparison__cell--empty" aria-label="Not applicable">&mdash;</span>
+										{:else if rType === 'callout'}
+											{#if rBody}
+												<span class="rf-comparison__callout-badge"><Renderer node={rBody.children} /></span>
+											{/if}
+										{:else}
+											{#if rBody}
+												<Renderer node={rBody.children} />
+											{/if}
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+
+		{#if verdict}
+			<p class="rf-comparison__verdict">{verdict}</p>
+		{/if}
+	</section>
+{:else if isColumn}
+	<div class="rf-comparison-column {colHighlighted ? 'rf-comparison-column--highlighted' : ''}">
+		<h3>{colName}</h3>
+		{@render children()}
+	</div>
+{:else if isRow}
+	<div class="rf-comparison-row rf-comparison-row--{rowType}">
+		{#if rowLabel}<strong>{rowLabel}</strong>{/if}
+		{@render children()}
+	</div>
+{/if}

package/sveltekit/components/DataTable.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { SerializedTag } from '@refrakt-md/svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const sortable = (tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'sortable')?.attributes?.content || '').split(',').map((s: string) => s.trim()).filter(Boolean);
+	const searchable = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'searchable')?.attributes?.content === 'true';
+	const pageSize = parseInt(tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'pageSize')?.attributes?.content || '0', 10);
+	const defaultSort = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'defaultSort')?.attributes?.content || '';
+
+	let searchQuery = $state('');
+	let sortColumn = $state(defaultSort);
+	let sortDirection = $state<'asc' | 'desc'>('asc');
+	let currentPage = $state(0);
+
+	let contentEl: HTMLDivElement;
+	let headers: string[] = [];
+	let allRows: { el: HTMLTableRowElement; cells: string[] }[] = [];
+	let totalFiltered = $state(0);
+
+	function toggleSort(column: string) {
+		if (!sortable.includes(column)) return;
+		if (sortColumn === column) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortColumn = column;
+			sortDirection = 'asc';
+		}
+		currentPage = 0;
+	}
+
+	onMount(() => {
+		const table = contentEl?.querySelector('table');
+		if (!table) return;
+
+		const thEls = table.querySelectorAll('th');
+		headers = Array.from(thEls).map(th => th.textContent?.trim() || '');
+
+		thEls.forEach((th) => {
+			const name = th.textContent?.trim() || '';
+			if (sortable.includes(name)) {
+				th.style.cursor = 'pointer';
+				th.style.userSelect = 'none';
+				th.addEventListener('click', () => toggleSort(name));
+			}
+		});
+
+		const bodyRows = table.querySelectorAll('tbody tr');
+		const rows = bodyRows.length > 0 ? bodyRows : table.querySelectorAll('tr:not(:first-child)');
+		allRows = Array.from(rows).map(tr => ({
+			el: tr as HTMLTableRowElement,
+			cells: Array.from(tr.querySelectorAll('td')).map(td => td.textContent?.trim() || ''),
+		}));
+
+		totalFiltered = allRows.length;
+	});
+
+	$effect(() => {
+		if (!allRows.length) return;
+
+		let filtered = [...allRows];
+
+		if (searchQuery) {
+			const q = searchQuery.toLowerCase();
+			filtered = filtered.filter(r => r.cells.some(c => c.toLowerCase().includes(q)));
+		}
+
+		if (sortColumn) {
+			const idx = headers.indexOf(sortColumn);
+			if (idx >= 0) {
+				filtered.sort((a, b) => {
+					const cmp = a.cells[idx].localeCompare(b.cells[idx], undefined, { numeric: true });
+					return sortDirection === 'asc' ? cmp : -cmp;
+				});
+			}
+		}
+
+		totalFiltered = filtered.length;
+
+		const visible = pageSize > 0
+			? filtered.slice(currentPage * pageSize, (currentPage + 1) * pageSize)
+			: filtered;
+
+		const tbody = contentEl?.querySelector('tbody') || contentEl?.querySelector('table');
+		if (!tbody) return;
+
+		allRows.forEach(r => r.el.style.display = 'none');
+		visible.forEach(r => {
+			r.el.style.display = '';
+			tbody.appendChild(r.el);
+		});
+
+		const thEls = contentEl?.querySelectorAll('th');
+		thEls?.forEach(th => {
+			const name = th.textContent?.replace(/[▲▼]/g, '').trim() || '';
+			const indicator = th.querySelector('.sort-indicator');
+			if (sortable.includes(name)) {
+				if (sortColumn === name) {
+					if (indicator) {
+						indicator.textContent = sortDirection === 'asc' ? ' ▲' : ' ▼';
+					} else {
+						const span = document.createElement('span');
+						span.className = 'sort-indicator';
+						span.textContent = sortDirection === 'asc' ? ' ▲' : ' ▼';
+						th.appendChild(span);
+					}
+				} else {
+					if (indicator) indicator.remove();
+				}
+			}
+		});
+	});
+
+	const totalPages = $derived(pageSize > 0 ? Math.ceil(totalFiltered / pageSize) : 1);
+</script>
+
+<div class="rf-datatable" typeof="DataTable">
+	{#if searchable}
+		<div class="rf-datatable__toolbar">
+			<input
+				type="search"
+				placeholder="Filter rows..."
+				bind:value={searchQuery}
+				class="rf-datatable__input"
+			/>
+		</div>
+	{/if}
+	<div class="rf-datatable__content" bind:this={contentEl}>
+		{@render children()}
+	</div>
+	{#if pageSize > 0 && totalPages > 1}
+		<div class="rf-datatable__pagination">
+			<button
+				class="rf-datatable__page-btn"
+				disabled={currentPage === 0}
+				onclick={() => currentPage--}
+			>
+				&larr; Prev
+			</button>
+			<span class="rf-datatable__page-info">
+				{currentPage + 1} / {totalPages}
+			</span>
+			<button
+				class="rf-datatable__page-btn"
+				disabled={currentPage >= totalPages - 1}
+				onclick={() => currentPage++}
+			>
+				Next &rarr;
+			</button>
+		</div>
+	{/if}
+</div>

package/sveltekit/components/Details.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { SerializedTag } from '@refrakt-md/svelte';
+	import type { Snippet } from 'svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const summary = $derived(tag.children
+		.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'summary')
+		?.children?.[0] ?? 'Details');
+
+	const isOpen = $derived(tag.children
+		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'open')
+		?.attributes?.content ?? false);
+</script>
+
+<details class="rf-details" open={isOpen || undefined}>
+	<summary class="rf-details__summary">
+		<span>{summary}</span>
+	</summary>
+	<div class="rf-details__body">
+		{@render children()}
+	</div>
+</details>

package/sveltekit/components/Diagram.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { SerializedTag } from '@refrakt-md/svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const language = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'language')?.attributes?.content || 'mermaid';
+	const title = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'title')?.attributes?.content || '';
+	const source = tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.['data-name'] === 'source')?.attributes?.content || '';
+
+	let container: HTMLDivElement;
+	let rendered = $state(false);
+
+	onMount(async () => {
+		if (language === 'mermaid' && source) {
+			try {
+				const cdn = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+				const mermaid = (await import(/* @vite-ignore */ cdn)).default;
+				mermaid.initialize({ startOnLoad: false, theme: 'default' });
+				const { svg } = await mermaid.render('mermaid-' + Math.random().toString(36).slice(2), source);
+				container.innerHTML = svg;
+				rendered = true;
+			} catch (e) {
+				container.textContent = source;
+			}
+		} else if (language === 'ascii' && source) {
+			container.textContent = source;
+			container.style.fontFamily = 'var(--rf-font-mono)';
+			container.style.whiteSpace = 'pre';
+			rendered = true;
+		}
+	});
+</script>
+
+<figure class="rf-diagram" typeof="Diagram">
+	{#if title}
+		<figcaption class="rf-diagram__title">{title}</figcaption>
+	{/if}
+	<div class="rf-diagram__container" bind:this={container}>
+		{#if !rendered}
+			<pre class="rf-diagram__source"><code>{source}</code></pre>
+		{/if}
+	</div>
+</figure>

package/sveltekit/components/Embed.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { SerializedTag } from '@refrakt-md/svelte';
+	import type { Snippet } from 'svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const getMeta = (prop: string) => tag.children
+		.find((c: any) => c?.name === 'meta' && c?.attributes?.property === prop)
+		?.attributes?.content;
+
+	const embedUrl = getMeta('embedUrl') || getMeta('url') || '';
+	const title = getMeta('title') || 'Embedded content';
+	const aspect = getMeta('aspect') || '16:9';
+	const provider = getMeta('provider') || '';
+
+	const [w, h] = aspect.split(':').map(Number);
+	const paddingPercent = h && w ? (h / w) * 100 : 56.25;
+</script>
+
+<figure class="rf-embed" data-provider={provider || undefined}>
+	{#if embedUrl}
+		<div class="rf-embed__wrapper" style="padding-bottom: {paddingPercent}%">
+			<iframe
+				src={embedUrl}
+				{title}
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+				allowfullscreen
+				loading="lazy"
+			></iframe>
+		</div>
+	{/if}
+	<div class="rf-embed__fallback">
+		{@render children()}
+	</div>
+</figure>

package/sveltekit/components/Form.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SerializedTag } from '@refrakt-md/svelte';
+
+	let { tag, children }: { tag: SerializedTag; children: Snippet } = $props();
+
+	const isForm = tag.attributes.typeof === 'Form';
+
+	// Form-level properties
+	const action = isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'action')?.attributes?.content || ''
+		: '';
+	const method = isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'method')?.attributes?.content || 'POST'
+		: 'POST';
+	const success = isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'success')?.attributes?.content || ''
+		: '';
+	const errorMsg = isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'error')?.attributes?.content || ''
+		: '';
+	const formStyle = isForm
+		? tag.attributes['data-style'] || 'stacked'
+		: 'stacked';
+	const honeypot = isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'honeypot')?.attributes?.content !== 'false'
+		: true;
+
+	// FormField properties
+	const fieldName = !isForm
+		? tag.children.find((c: any) => c?.name === 'span' && c?.attributes?.property === 'name')?.children?.[0] || ''
+		: '';
+	const fieldType = !isForm
+		? tag.attributes['data-field-type'] || 'text'
+		: '';
+	const required = !isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'required')?.attributes?.content === 'true'
+		: false;
+	const placeholder = !isForm
+		? tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'placeholder')?.attributes?.content || ''
+		: '';
+	const options = !isForm
+		? (tag.children.find((c: any) => c?.name === 'meta' && c?.attributes?.property === 'options')?.attributes?.content || '')
+			.split(',')
+			.map((o: string) => o.trim())
+			.filter(Boolean)
+		: [];
+
+	const fieldId = !isForm ? `field-${fieldName.toLowerCase().replace(/\s+/g, '-')}` : '';
+
+	// Form submission state
+	let status = $state<'idle' | 'submitting' | 'success' | 'error'>('idle');
+	let statusMessage = $state('');
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (!action) return;
+
+		status = 'submitting';
+		const formData = new FormData(e.target as HTMLFormElement);
+
+		try {
+			const response = await fetch(action, {
+				method: method,
+				body: formData,
+				headers: { 'Accept': 'application/json' },
+			});
+
+			if (response.ok) {
+				status = 'success';
+				statusMessage = success || 'Form submitted successfully.';
+				(e.target as HTMLFormElement).reset();
+			} else {
+				status = 'error';
+				statusMessage = errorMsg || 'Something went wrong. Please try again.';
+			}
+		} catch {
+			status = 'error';
+			statusMessage = errorMsg || 'Something went wrong. Please try again.';
+		}
+	}
+</script>
+
+{#if isForm}
+	<form
+		class="rf-form {formStyle !== 'stacked' ? `rf-form--${formStyle}` : ''}"
+		action={action}
+		method={method}
+		onsubmit={handleSubmit}
+	>
+		{#if honeypot}
+			<div class="rf-form__hp" aria-hidden="true">
+				<input type="text" name="_gotcha" autocomplete="off" tabindex={-1} />
+			</div>
+		{/if}
+		{@render children()}
+		{#if status === 'submitting'}
+			<div class="rf-form__status rf-form__status--submitting" role="status">Submitting...</div>
+		{:else if status === 'success'}
+			<div class="rf-form__status rf-form__status--success" role="alert">{statusMessage}</div>
+		{:else if status === 'error'}
+			<div class="rf-form__status rf-form__status--error" role="alert">{statusMessage}</div>
+		{/if}
+	</form>
+{:else if fieldType === 'group'}
+	<fieldset class="rf-form-fieldset">
+		<legend>{fieldName}</legend>
+		{@render children()}
+	</fieldset>
+{:else if fieldType === 'submit'}
+	<button type="submit" class="rf-form__submit">{fieldName}</button>
+{:else if fieldType === 'separator'}
+	<hr class="rf-form__separator" />
+{:else if fieldType === 'help'}
+	<p class="rf-form__help">{fieldName}</p>
+{:else if fieldType === 'description'}
+	<p class="rf-form__text">{fieldName}</p>
+{:else if fieldType === 'textarea'}
+	<div class="rf-form-field">
+		<label for={fieldId}>
+			{fieldName}
+			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
+		</label>
+		<textarea
+			id={fieldId}
+			name={fieldId}
+			placeholder={placeholder}
+			required={required}
+			rows={4}
+		></textarea>
+	</div>
+{:else if fieldType === 'select'}
+	<div class="rf-form-field">
+		<label for={fieldId}>
+			{fieldName}
+			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
+		</label>
+		<select id={fieldId} name={fieldId} required={required}>
+			<option value="" disabled selected>Select an option</option>
+			{#each options as option}
+				<option value={option}>{option}</option>
+			{/each}
+		</select>
+	</div>
+{:else if fieldType === 'radio'}
+	<fieldset class="rf-form-field rf-form-choice-group">
+		<legend>
+			{fieldName}
+			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
+		</legend>
+		{#each options as option, i}
+			<label class="rf-form-choice">
+				<input
+					type="radio"
+					name={fieldId}
+					value={option}
+					required={required && i === 0}
+				/>
+				<span>{option}</span>
+			</label>
+		{/each}
+	</fieldset>
+{:else if fieldType === 'checkbox'}
+	<fieldset class="rf-form-field rf-form-choice-group">
+		<legend>
+			{fieldName}
+			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
+		</legend>
+		{#each options as option}
+			<label class="rf-form-choice">
+				<input
+					type="checkbox"
+					name={fieldId}
+					value={option}
+				/>
+				<span>{option}</span>
+			</label>
+		{/each}
+	</fieldset>
+{:else}
+	<div class="rf-form-field">
+		<label for={fieldId}>
+			{fieldName}
+			{#if required}<span class="rf-form-field__required" aria-hidden="true">*</span>{/if}
+		</label>
+		<input
+			type={fieldType}
+			id={fieldId}
+			name={fieldId}
+			placeholder={placeholder}
+			required={required}
+		/>
+	</div>
+{/if}