Feat/radio input (#176)

* feat: added a radio button custom

* docs: added name option in docs.

* chore: cleaned the unnecessary classes and variables for input type radio.

* fix: moved input radio to its own component.

* fix: keydown events added.

Author: Sahil2004

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

@@ -1,54 +1,62 @@
-import { Input } from '..';
+import { Input } from "..";
 
 export default {
-	title: 'UI/Input',
-	component: Input,
-	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string }) => ({
-		Component: Input,
-		props: args
-	})
+    title: "UI/Input",
+    component: Input,
+    tags: ["autodocs"],
+    render: (args: { type: string; placeholder: 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: '[email protected]'
-	}
+    args: {
+        type: "email",
+        placeholder: "[email protected]",
+    },
 };
 
 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",
+        name: "option-1",
+    },
 };

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

@@ -17,17 +17,16 @@
 		...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'
-	);
+	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';
 </script>
 
 <input
 	{...restProps}
 	{type}
 	{placeholder}
-	bind:value
 	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,53 @@
+<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()}
+	onkeydown={(e) => {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			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";