From 6e7eb2f19dea327802935653de027f9f67c5dded Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:18:45 +0600
Subject: [PATCH 1/2] fix: Asterisk missing on required input label

---
 src/components/input/input.stories.tsx | 10 ++++++++++
 src/components/input/input.tsx         | 12 +++++++++---
 src/components/label/label.tsx         |  9 ++++++---
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/input/input.stories.tsx b/src/components/input/input.stories.tsx
index c97c38b9..4fee7533 100644
--- a/src/components/input/input.stories.tsx
+++ b/src/components/input/input.stories.tsx
@@ -79,3 +79,13 @@ WithPrefixSuffix.args = {
 	suffix: '#',
 	defaultValue: '',
 };
+
+// Required Input with Label
+export const Required = Template.bind( {} );
+Required.args = {
+	type: 'text',
+	size: 'sm',
+	required: true,
+	label: 'Required Input',
+	defaultValue: 'Required Input',
+};
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 839ffe40..50974e47 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -5,10 +5,12 @@ import React, {
 	forwardRef,
 	useRef,
 	type ReactNode,
+	LabelHTMLAttributes,
 } from 'react';
 import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Upload, X } from 'lucide-react';
+import Label from '../label';
 
 export declare interface InputProps {
 	/** Unique identifier for the input element. */
@@ -52,6 +54,9 @@ export declare interface InputProps {
 
 	/** Placeholder text for the input field. */
 	placeholder?: string;
+
+	/** Indicates whether the input is required. */
+	required?: boolean;
 }
 
 export const InputComponent = (
@@ -245,12 +250,13 @@ export const InputComponent = (
 			return null;
 		}
 		return (
-			<label
-				className={ cn( labelClasses[ size ], 'text-field-label' ) }
+			<Label<LabelHTMLAttributes<HTMLLabelElement>>
+				className={ cn( labelClasses[ size ] ) }
 				htmlFor={ inputId }
+				{ ...( props?.required && { required: true } ) }
 			>
 				{ label }
-			</label>
+			</Label>
 		);
 	}, [ label, size, inputId ] );
 
diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx
index b9fd168e..7a261cad 100644
--- a/src/components/label/label.tsx
+++ b/src/components/label/label.tsx
@@ -17,7 +17,7 @@ export interface LabelProps {
 }
 
 const Label = forwardRef(
-	(
+	<T extends object>(
 		{
 			children = null,
 			tag: Tag = 'label',
@@ -26,7 +26,7 @@ const Label = forwardRef(
 			variant = 'neutral', // neutral, help, error, disabled
 			required = false,
 			...props
-		}: LabelProps,
+		}: LabelProps & T,
 		ref: React.Ref<HTMLElement>
 	) => {
 		// Base classes. - Mandatory classes.
@@ -78,4 +78,7 @@ const Label = forwardRef(
 	}
 );
 
-export default Label;
+export default Label as <T extends object>(
+	props: LabelProps & T,
+	ref: React.Ref<HTMLElement>
+) => React.ReactNode;

From 752778cb01d375e79bea9f46285a46d403613cc7 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 11:20:01 +0600
Subject: [PATCH 2/2] Update changelog.txt

---
 changelog.txt | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/changelog.txt b/changelog.txt
index 62b39fe6..4a314439 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,3 +1,6 @@
+Version x.x.x - x x, x
+- Fixed - Asterisk missing on required input label.
+
 Version 1.2.2 - 4th December, 2024
 - Improvement - Removed margin and added new props to the Line Chart component for customizability.