<script>
  import { boundElements } from 'svelte-preprocess-delegate-events/runtime';
  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
  import { get_current_component } from 'svelte/internal';"use strict";
export let size = "md";
export let label = "";
export let caption = "";
export let value = "";
export let disabled = false;
export let readonly = false;
export let name = "";
export let group = "";

  const input0 = boundElements();
  const component0 = get_current_component();
  $: registerDelegatedEvents(input0.bounds, component0, (handler) => handler, {});
</script>

<div class="flex flex-col space-y-1 w-fit" class:opacity-30={disabled}>
	<label class="inline-flex items-center" class:cursor-pointer={!disabled}>
		<input
			bind:this={input0.bounds}
			type="radio"
			bind:group
			{value}
			disabled={readonly || disabled}
			{name}
			class="rounded-full outline-2 border-stone-300 focus:ring-offset-0 focus:ring focus:ring-sky-500"
			class:text-blue-600={!readonly}
			class:hover:text-blue-700={!disabled && !readonly}
			class:text-stone-500={readonly}
			class:bg-stone-200={readonly}
			class:cursor-pointer={!disabled && !readonly}
			class:h-4={size === 'sm'}
			class:w-4={size === 'sm'}
			class:h-5={size === 'md'}
			class:w-5={size === 'md'}
			class:w-6={size === 'lg'}
			class:h-6={size === 'lg'}
			class:!bg-[length:20px]={size === 'sm'}
			class:!bg-[length:26px]={size === 'md'}
			class:!bg-[length:32px]={size === 'lg'}
			{...$$restProps}
		/>
		{#if label}
			<span class="ml-2 text-2xl text-stone-600">{label}</span>
		{/if}
	</label>
	{#if caption}
		<p class="text-xl text-stone-400 ml-7">{caption}</p>
	{/if}
</div>
