fix: moved input radio to its own component.

Author: Sahil2004

platforms/metagram/src/lib/ui/Input/Input.svelte

@@ -4,8 +4,6 @@
 
 	interface IInputProps extends HTMLInputAttributes {
 		type: HTMLInputTypeAttribute;
-		selected?: string;
-		name?: string;
 		input?: HTMLInputElement;
 		value: string | number | any;
 		placeholder?: string;
@@ -15,57 +13,20 @@
 		type = 'text',
 		input = $bindable(),
 		value = $bindable(),
-		selected = $bindable(),
-		name = '',
 		placeholder = '',
 		...restProps
 	}: IInputProps = $props();
 
-	let radioElement: HTMLInputElement | null = $state(null);
-
 	const cbase =
 		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent';
-
-	const customRadioStyles = $derived({
-		common: "before:h-4.5 before:w-4.5 before:border-brand-burnt-orange before:-left-0.75 before:-bottom-0.25 relative before:absolute before:rounded-full before:border-2 before:bg-white before:content-['']",
-		selected:
-			'after:h-2.5 after:w-2.5 after:bg-brand-burnt-orange after:absolute after:bottom-0.75 after:left-0.25 after:rounded-full'
-	});
 </script>
 
-{#if type === 'radio'}
-	<div
-		class={cn(
-			[customRadioStyles.common, selected === value ? customRadioStyles.selected : ''].join(
-				' '
-			)
-		)}
-		aria-checked={selected === value}
-		role="radio"
-		tabindex="0"
-		onclick={() => radioElement?.click()}
-		onkeypress={() => radioElement?.click()}
-	>
-		<input
-			{...restProps}
-			type="radio"
-			{value}
-			bind:group={selected}
-			bind:this={radioElement}
-			{name}
-			checked={selected === value}
-			class={cn([cbase, restProps.class].join(' '))}
-			tabindex="0"
-		/>
-	</div>
-{:else}
-	<input
-		{...restProps}
-		{type}
-		{placeholder}
-		bind:this={input}
-		bind:value
-		class={cn([cbase, restProps.class].join(' '))}
-		tabindex="0"
-	/>
-{/if}
+<input
+	{...restProps}
+	{type}
+	{placeholder}
+	bind:this={input}
+	bind:value
+	class={cn([cbase, restProps.class].join(' '))}
+	tabindex="0"
+/>

platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts

@@ -0,0 +1,19 @@
+import { InputRadio } from "..";
+
+export default {
+    title: "UI/InputRadio",
+    component: InputRadio,
+    tags: ["autodocs"],
+    render: (args: { type: string; placeholder: string }) => ({
+        Component: InputRadio,
+        props: args,
+    }),
+};
+
+export const Radio = {
+    args: {
+        type: "radio",
+        value: "option1",
+        name: "option-1",
+    },
+};

platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IInputRadioProps extends HTMLAttributes<HTMLElement> {
+		selected?: string;
+		name?: string;
+		value: string;
+	}
+
+	let {
+		value = '',
+		selected = $bindable(''),
+		name = '',
+		...restProps
+	}: IInputRadioProps = $props();
+
+	let radioElement: HTMLInputElement | null = $state(null);
+
+	const cbase =
+		"before:h-4.5 before:w-4.5 before:border-brand-burnt-orange before:-left-0.75 before:-bottom-0.25 relative before:absolute before:rounded-full before:border-2 before:bg-white before:content-['']";
+</script>
+
+<input
+	{...restProps}
+	type="radio"
+	{value}
+	bind:group={selected}
+	bind:this={radioElement}
+	{name}
+	checked={selected === value}
+	class={cn(['hidden', restProps.class].join(' '))}
+/>
+
+<span
+	{...restProps}
+	class={cn([cbase, restProps.class].join(' '))}
+	role="radio"
+	tabindex="0"
+	aria-checked={selected === value}
+	onclick={() => radioElement?.click()}
+>
+	{#if selected === value}
+		<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
+		></span>
+	{/if}
+</span>

platforms/metagram/src/lib/ui/index.ts

@@ -1,7 +1,8 @@
-export { default as Button } from './Button/Button.svelte';
-export { default as Avatar } from './Avatar/Avatar.svelte';
-export { default as Input } from './Input/Input.svelte';
-export { default as Select } from './Select/Select.svelte';
-export { default as Label } from './Label/Label.svelte';
-export { default as Toggle } from './Toggle/Toggle.svelte';
-export { default as Helper } from './Helper/Helper.svelte';
+export { default as Button } from "./Button/Button.svelte";
+export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as Input } from "./Input/Input.svelte";
+export { default as Select } from "./Select/Select.svelte";
+export { default as Label } from "./Label/Label.svelte";
+export { default as Toggle } from "./Toggle/Toggle.svelte";
+export { default as Helper } from "./Helper/Helper.svelte";
+export { default as InputRadio } from "./InputRadio/InputRadio.svelte";