Dev

.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
-
+import '../src/tailwind.css';
 /** @type { import('@storybook/react').Preview } */
-import '../dist/style.css';
+
 const preview: Preview = {
 	parameters: {
 		controls: {
@@ -20,7 +20,7 @@ const preview: Preview = {
 	},
 	decorators: [
 		(Story) => (
-			<div style={{ fontFamily: 'Figtree, sans-serif' }}>
+			<div className="[&_*]:[font-family:Figtree,sans-serif] [&_*]:box-border">
 				<Story />
 			</div>
 		),

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.
 

src/components/checkbox/checkbox.tsx

@@ -145,14 +145,14 @@ export const CheckboxComponent = (
 	return (
 		<div
 			className={ cn(
-				'inline-flex items-center gap-2',
+				'inline-flex items-center justify-center gap-2',
 				!! label && 'items-start',
 				disabled && 'cursor-not-allowed'
 			) }
 		>
 			<label
 				className={ cn(
-					'relative flex items-center rounded-full p-0.5',
+					'relative flex items-center justify-center rounded-full p-0.5',
 					! disabled && 'cursor-pointer'
 				) }
 				htmlFor={ checkboxId }

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',
+};

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 ] );
 

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;

src/components/table/index.ts

@@ -0,0 +1 @@
+export { default as Table } from './table';