feat: Label (#146)

Author: grv-saini-20

platforms/metagram/src/lib/ui/Label/Label.stories.snippet.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+	export { LabelText };
+</script>
+
+{#snippet LabelText()}
+	this is label
+{/snippet}

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import { Label } from '..';
+import { LabelText } from './Label.stories.snippet.svelte';
+
+export default {
+	title: 'UI/Label',
+	component: Label,
+	tags: ['autodocs'],
+	render: (args: { Component: Label; props: ComponentProps<typeof Label> }) => ({
+		Component: Label,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: { children: LabelText }
+};

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+
+	interface ILabelProps extends HTMLLabelAttributes {
+		children: Snippet;
+	}
+
+	let { children, ...restProps }: ILabelProps = $props();
+
+	const cBase = 'inline-block text-lg font-geist font-medium text-black-800';
+</script>
+
+<label {...restProps} class={cn([cBase, restProps.class].join(' '))}>
+	{@render children?.()}
+</label>

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

@@ -1,4 +1,5 @@
 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 Label } from './Label/Label.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';