feat: Input

platforms/metagram/src/app.css

@@ -41,6 +41,7 @@
 	--color-black-200: #d2d2d2;
 
 	--color-grey: #f5f5f5;
+	--color-red: #ff5255;
 
 	--color-brand-burnt-orange: #da4a11;
 	--color-brand-burnt-orange-100: #f8dbcf;

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

@@ -1,43 +1,40 @@
-import type { ComponentProps } from "svelte";
-import Avatar from "./Avatar.svelte";
+import type { ComponentProps } from 'svelte';
+import Avatar from './Avatar.svelte';
 
 export default {
-    title: "UI/Avatar",
-    component: Avatar,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Avatar;
-        props: ComponentProps<typeof Avatar>;
-    }) => ({
-        Component: Avatar,
-        props: args,
-    }),
+	title: 'UI/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	render: (args: { Component: Avatar; props: ComponentProps<typeof Avatar> }) => ({
+		Component: Avatar,
+		props: args
+	})
 };
 
 export const Large = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "lg",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'lg'
+	}
 };
 
 export const Medium = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "md",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'md'
+	}
 };
 
 export const Small = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "sm",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'sm'
+	}
 };
 
 export const ExtraSmall = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "xs",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'xs'
+	}
 };

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

@@ -1,31 +1,26 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import type { HTMLImgAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLImgAttributes } from 'svelte/elements';
 
-interface IAvatarProps extends HTMLImgAttributes {
-    src: string;
-    alt?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-}
+	interface IAvatarProps extends HTMLImgAttributes {
+		src: string;
+		alt?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+	}
 
-const {
-    src,
-    alt = "User Avatar",
-    size = "md",
-    ...restProps
-}: IAvatarProps = $props();
+	const { src, alt = 'User Avatar', size = 'md', ...restProps }: IAvatarProps = $props();
 
-const sizeVariant = {
-    xs: "w-6 h-6",
-    sm: "w-10 h-10",
-    md: "w-12 h-12",
-    lg: "w-30 h-30",
-};
+	const sizeVariant = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		md: 'w-12 h-12',
+		lg: 'w-30 h-30'
+	};
 
-const classes = $derived({
-    common: cn("rounded-full"),
-    size: sizeVariant[size] || sizeVariant.md,
-});
+	const classes = $derived({
+		common: cn('rounded-full'),
+		size: sizeVariant[size] || sizeVariant.md
+	});
 </script>
 
 <img

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

@@ -0,0 +1,59 @@
+import { Input } from '..';
+
+export default {
+	title: 'UI/Input',
+	component: Input,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string; helperText: string }) => ({
+		Component: Input,
+		props: args
+	})
+};
+
+export const Text = {
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden',
+		isRequired: true
+	}
+};
+
+export const Tel = {
+	args: {
+		type: 'tel',
+		placeholder: '987654321',
+		isRequired: true
+	}
+};
+
+export const isError = {
+	args: {
+		type: 'text',
+		placeholder: 'Enter something',
+		isError: true
+	}
+};
+
+export const Email = {
+	args: {
+		type: 'email',
+		placeholder: '[email protected]'
+	}
+};
+
+export const Password = {
+	args: {
+		type: 'password',
+		placeholder: 'Please enter password',
+		isRequired: true
+	}
+};
+
+export const Disabled = {
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden',
+		isRequired: true,
+		isDisabled: true
+	}
+};

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface IInputProps extends HTMLInputAttributes {
+		type: 'text' | 'number' | 'email' | 'tel' | 'password';
+		value: string | number;
+		placeholder: string;
+		isRequired: boolean;
+		isDisabled: boolean;
+		isError: boolean;
+	}
+
+	let {
+		type = 'text',
+		value = $bindable(),
+		placeholder = '',
+		isRequired = false,
+		isDisabled = false,
+		isError = false,
+		...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 ${isError && 'border border-red text-red focus:text-black-800 focus:border-transparent'} ${isDisabled && 'cursor-not-allowed'}`
+	);
+</script>
+
+<input
+	{...restProps}
+	{type}
+	{placeholder}
+	bind:value
+	required={isRequired}
+	disabled={isDisabled}
+	class={cn([cbase, restProps.class].join(' '))}
+	tabindex="0"
+/>

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

@@ -1,2 +1,3 @@
-export { default as Button } from "./Button/Button.svelte";
-export { default as Avatar } from "./Avatar/Avatar.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';