feat: added a radio button custom

Author: Sahil2004

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

@@ -1,54 +1,66 @@
-import { Input } from '..';
+import { Input } from "..";
 
 export default {
-	title: 'UI/Input',
-	component: Input,
-	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string; helperText: string }) => ({
-		Component: Input,
-		props: args
-	})
+    title: "UI/Input",
+    component: Input,
+    tags: ["autodocs"],
+    render: (args: {
+        type: string;
+        placeholder: string;
+        group: string;
+        helperText: string;
+    }) => ({
+        Component: Input,
+        props: args,
+    }),
 };
 
 export const Text = {
-	args: {
-		type: 'text',
-		placeholder: 'Joe Biden'
-	}
+    args: {
+        type: "text",
+        placeholder: "Joe Biden",
+    },
 };
 
 export const Tel = {
-	args: {
-		type: 'tel',
-		placeholder: '987654321'
-	}
+    args: {
+        type: "tel",
+        placeholder: "987654321",
+    },
 };
 
 export const NumberInput = {
-	args: {
-		type: 'number',
-		placeholder: 'Enter something'
-	}
+    args: {
+        type: "number",
+        placeholder: "Enter something",
+    },
 };
 
 export const Email = {
-	args: {
-		type: 'email',
-		placeholder: 'example@email.com'
-	}
+    args: {
+        type: "email",
+        placeholder: "example@email.com",
+    },
 };
 
 export const Invalid = {
-	args: {
-		type: 'email',
-		placeholder: 'Invalid email',
-		value: 'not-an-email'
-	}
+    args: {
+        type: "email",
+        placeholder: "Invalid email",
+        value: "not-an-email",
+    },
 };
 
 export const Password = {
-	args: {
-		type: 'password',
-		placeholder: 'Please enter password'
-	}
+    args: {
+        type: "password",
+        placeholder: "Please enter password",
+    },
+};
+
+export const Radio = {
+    args: {
+        type: "radio",
+        value: "option1",
+    },
 };

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

@@ -4,25 +4,69 @@
 
 	interface IInputProps extends HTMLInputAttributes {
 		type: HTMLInputTypeAttribute;
+		selected?: string;
+		name?: string;
 	}
 
 	let {
 		type = 'text',
 		value = $bindable(),
+		selected = $bindable(),
+		name = '',
 		placeholder = '',
 		...restProps
 	}: IInputProps = $props();
 
-	const cbase = $derived(
-		'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'
-	);
+	let radioElement: HTMLInputElement | null = $state(null);
+
+	const typeClasses: Record<string, string> = {
+		radio: 'opacity-100'
+	};
+
+	const cbase = $derived({
+		common: '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',
+		type: typeClasses[type]
+	});
+
+	const radioCustomStyles = $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>
 
-<input
-	{...restProps}
-	{type}
-	{placeholder}
-	bind:value
-	class={cn([cbase, restProps.class].join(' '))}
-	tabindex="0"
-/>
+{#if type === 'radio'}
+	<div
+		class={cn(
+			[radioCustomStyles.common, selected === value ? radioCustomStyles.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.common, cbase.type, restProps.class].join(' '))}
+			tabindex="0"
+		/>
+	</div>
+{:else}
+	<input
+		{...restProps}
+		{type}
+		{placeholder}
+		bind:value
+		class={cn([cbase.common, cbase.type, restProps.class].join(' '))}
+		tabindex="0"
+	/>
+{/if}