From c8668b892efa805d0cbd245c2f7022545effb58a Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 08:57:47 +0530
Subject: [PATCH] feat: Label

---
 .../lib/ui/Label/Label.stories.snippet.svelte   |  7 +++++++
 .../metagram/src/lib/ui/Label/Label.stories.ts  | 17 +++++++++++++++++
 .../metagram/src/lib/ui/Label/Label.svelte      | 17 +++++++++++++++++
 platforms/metagram/src/lib/ui/index.ts          |  1 +
 4 files changed, 42 insertions(+)
 create mode 100644 platforms/metagram/src/lib/ui/Label/Label.stories.snippet.svelte
 create mode 100644 platforms/metagram/src/lib/ui/Label/Label.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/Label/Label.svelte

diff --git a/platforms/metagram/src/lib/ui/Label/Label.stories.snippet.svelte b/platforms/metagram/src/lib/ui/Label/Label.stories.snippet.svelte
new file mode 100644
index 000000000..4066b5be2
--- /dev/null
+++ b/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}
diff --git a/platforms/metagram/src/lib/ui/Label/Label.stories.ts b/platforms/metagram/src/lib/ui/Label/Label.stories.ts
new file mode 100644
index 000000000..69d4f7e0f
--- /dev/null
+++ b/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 }
+};
diff --git a/platforms/metagram/src/lib/ui/Label/Label.svelte b/platforms/metagram/src/lib/ui/Label/Label.svelte
new file mode 100644
index 000000000..c46fd6377
--- /dev/null
+++ b/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>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 678e7c167..802534203 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,4 @@
 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';