aecfb0ddaa
recreated package using sv, marking correctly as a library. seems I was missing some sveltekit tooling somewhere along the way otherwise.
53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { RadioGroup } from 'melt/builders';
|
|
import type { RadioGroupProps } from 'melt/builders';
|
|
import { scale } from 'svelte/transition';
|
|
|
|
let {
|
|
items,
|
|
label,
|
|
...props
|
|
}: RadioGroupProps & {
|
|
items: string[];
|
|
label: string;
|
|
} = $props();
|
|
|
|
const group = new RadioGroup(props);
|
|
const isVert = $derived(group.orientation === 'vertical');
|
|
</script>
|
|
|
|
<div class="flex w-fit flex-col gap-2" {...group.root}>
|
|
<label {...group.label} class="font-medium">{label}</label>
|
|
<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row gap-3'}">
|
|
{#each items as i}
|
|
{@const item = group.getItem(i)}
|
|
<div
|
|
class="ring-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3
|
|
data-disabled:cursor-not-allowed data-disabled:opacity-50"
|
|
{...item.attrs}
|
|
>
|
|
<div
|
|
class="group-aria-[checked]:border-accent-500 relative size-6
|
|
rounded-full border-2 border-neutral-400 bg-neutral-100 shadow-sm
|
|
group-aria-[checke]:bg-transparent hover:bg-gray-100
|
|
data-[disabled=true]:bg-gray-400 dark:border-white dark:bg-transparent"
|
|
>
|
|
{#if item.checked}
|
|
<div
|
|
class="group-aria-[checked]:bg-accent-500 absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2
|
|
rounded-full"
|
|
aria-hidden="true"
|
|
transition:scale={{ duration: 75 }}
|
|
></div>
|
|
{/if}
|
|
</div>
|
|
|
|
<span class="cursor-default leading-none font-semibold capitalize select-none">
|
|
{i}
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<input {...group.hiddenInput} />
|
|
</div>
|