From f64f0ff03c39cd1c02ea8c47d1d77e9ad1f4769f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:34:51 +0600
Subject: [PATCH 01/27] wip: Table component

---
 src/components/table/index.ts          |   2 +
 src/components/table/table.stories.tsx |  89 +++++++
 src/components/table/table.tsx         | 311 +++++++++++++++++++++++++
 src/theme/default-config.js            |   2 +
 4 files changed, 404 insertions(+)
 create mode 100644 src/components/table/index.ts
 create mode 100644 src/components/table/table.stories.tsx
 create mode 100644 src/components/table/table.tsx

diff --git a/src/components/table/index.ts b/src/components/table/index.ts
new file mode 100644
index 00000000..9fa9eee7
--- /dev/null
+++ b/src/components/table/index.ts
@@ -0,0 +1,2 @@
+export { default as Table } from './table';
+export type { TableProps, Column } from './table';
\ No newline at end of file
diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
new file mode 100644
index 00000000..48c5ccba
--- /dev/null
+++ b/src/components/table/table.stories.tsx
@@ -0,0 +1,89 @@
+import type { ComponentType } from 'react';
+import Table from './table';
+import { StoryFn, Meta } from '@storybook/react';
+import { Pagination } from '@/components';
+
+const meta = {
+	title: 'Atoms/Table',
+	component: Table,
+	subcomponents: {
+		'Table.Head': Table.Head,
+		'Table.HeadCell': Table.HeadCell,
+		'Table.Body': Table.Body,
+		'Table.Row': Table.Row,
+		'Table.Cell': Table.Cell,
+		'Table.Footer': Table.Footer,
+	} as Record<string, ComponentType<unknown>>,
+	tags: [ 'autodocs' ],
+} satisfies Meta<typeof Table>;
+export default meta;
+
+type Story = StoryFn<typeof Table>;
+
+const data = [
+	{
+		name: 'John Doe',
+		age: 30,
+		email: 'KXk7g@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Jane Doe',
+		age: 25,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Bob Smith',
+		age: 40,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Alice Johnson',
+		age: 35,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+];
+
+export const Default: Story = () => {
+	return (
+		<Table>
+			<Table.Head>
+				<Table.HeadCell>Name</Table.HeadCell>
+				<Table.HeadCell>Age</Table.HeadCell>
+				<Table.HeadCell>Email</Table.HeadCell>
+				<Table.HeadCell>Phone</Table.HeadCell>
+			</Table.Head>
+			<Table.Body>
+				{ data.map( ( item, index ) => (
+					<Table.Row key={ index }>
+						<Table.Cell>{ item.name }</Table.Cell>
+						<Table.Cell>{ item.age }</Table.Cell>
+						<Table.Cell>{ item.email }</Table.Cell>
+						<Table.Cell>{ item.phone }</Table.Cell>
+					</Table.Row>
+				) ) }
+			</Table.Body>
+			<Table.Footer>
+				<div className="flex items-center justify-between w-full">
+					<span className="text-sm font-normal leading-5 text-text-secondary">Page 1 out of 10</span>
+					<Pagination className="w-fit">
+						<Pagination.Content>
+							<Pagination.Previous />
+							<Pagination.Item isActive>1</Pagination.Item>
+							<Pagination.Item>2</Pagination.Item>
+							<Pagination.Item>3</Pagination.Item>
+							<Pagination.Ellipsis />
+							<Pagination.Item>7</Pagination.Item>
+							<Pagination.Item>8</Pagination.Item>
+							<Pagination.Item>9</Pagination.Item>
+							<Pagination.Next />
+						</Pagination.Content>
+					</Pagination>
+				</div>
+			</Table.Footer>
+		</Table>
+	);
+};
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
new file mode 100644
index 00000000..c9db6cc3
--- /dev/null
+++ b/src/components/table/table.tsx
@@ -0,0 +1,311 @@
+import { cn } from '@/utilities/functions';
+import React, { Children, createContext, useContext, type ReactNode } from 'react';
+
+/**
+ * Common props for all table components.
+ */
+export interface TableCommonProps {
+	/**
+	 * Children to render within the component.
+	 */
+	children?: ReactNode;
+	/**
+	 * Class name to apply to the component.
+	 */
+	className?: string;
+}
+
+/**
+ * Interface for column configurations.
+ */
+export interface Column<T> {
+	/**
+	 * Header text to display in the column.
+	 */
+	header: string;
+	/**
+	 * Property key from data object to display in this column.
+	 */
+	accessor: keyof T;
+	/**
+	 * Whether this column can be sorted.
+	 */
+	sortable?: boolean;
+	/**
+	 * Custom sort function for this column.
+	 */
+	sortFn?: ( a: T, b: T ) => number;
+	/**
+	 * Custom cell renderer for this column.
+	 */
+	Cell?: ( props: { value: unknown; row: T; index: number } ) => ReactNode;
+}
+
+/**
+ * Interface for table props.
+ */
+export interface TableProps<T> extends TableCommonProps {
+	/**
+	 * Whether to show checkboxes for row selection.
+	 */
+	showCheckbox?: boolean;
+	/**
+	 * Callback fired when row selection changes.
+	 */
+	onSelectionChange?: ( selectedItems: T[] ) => void;
+	/**
+	 * Child components to render within the table.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Interface for table context.
+ */
+export interface TableContextType {
+	/**
+	 * Set of indices for selected rows.
+	 */
+	selectedRows?: Set<number>;
+	/**
+	 * Whether to show checkboxes for row selection.
+	 */
+	checkboxSelection?: boolean;
+}
+
+/**
+ * Interface for base table props.
+ */
+export interface BaseTableProps extends TableCommonProps {
+	/**
+	 * Child components to render within the table.
+	 *
+	 * @default undefined
+	 */
+	children?: ReactNode;
+	/**
+	 * Whether to show checkboxes for row selection.
+	 */
+	checkboxSelection?: boolean;
+}
+
+/**
+ * Interface for table head props.
+ */
+export interface TableHeadProps extends TableCommonProps {
+	/**
+	 * Child components to render within the table head.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Interface for table head cell props.
+ */
+export interface TableHeadCellProps extends TableCommonProps {
+	/**
+	 * Content to display in the header cell.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Interface for table body props.
+ */
+export interface TableBodyProps extends TableCommonProps {
+	/**
+	 * Child components to render within the table body.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Interface for table row props.
+ */
+export interface TableRowProps extends TableCommonProps {
+	/**
+	 * Child components to render within the table row.
+	 */
+	children?: ReactNode;
+	/**
+	 * value of the row.
+	 */
+	value?: string;
+	/**
+	 * Whether the row is selected.
+	 */
+	selected?: boolean;
+}
+
+/**
+ * Interface for table cell props.
+ */
+export interface TableCellProps extends TableCommonProps {
+	/**
+	 * Content to display in the table cell.
+	 */
+	children?: ReactNode;
+}
+
+/**
+ * Interface for table footer props.
+ */
+export interface TableFooterProps extends TableCommonProps {
+	/**
+	 * Child components to render within the table footer.
+	 */
+	children?: ReactNode;
+}
+
+const TableContext = createContext<TableContextType | undefined>( undefined );
+
+const useTableContext = () => {
+	const context = useContext( TableContext );
+	if ( ! context ) {
+		throw new Error( 'Table components must be used within Table component' );
+	}
+	return context;
+};
+
+export const Table = ( {
+	children,
+	className,
+	checkboxSelection = false,
+}: BaseTableProps ) => {
+	const contextValue: TableContextType = {
+		checkboxSelection,
+	};
+
+	// Extract footer from children
+	const footer = Children.toArray( children ).find(
+		( child ) => React.isValidElement( child ) && child.type === TableFooter
+	);
+	const restChildren = Children.toArray( children ).filter(
+		( child ) => React.isValidElement( child ) && child.type !== TableFooter
+	);
+
+	return (
+		<TableContext.Provider value={ contextValue }>
+			<div className="overflow-x-auto">
+				<table
+					className={ cn(
+						'min-w-full border-collapse border-spacing-0 mb-1',
+						className
+					) }
+				>
+					{ restChildren }
+				</table>
+				{ footer }
+			</div>
+		</TableContext.Provider>
+	);
+};
+
+// Head Components
+export const TableHead: React.FC<TableHeadProps> = ( { children } ) => {
+	return (
+		<thead className="bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]">
+			<tr>{ children }</tr>
+		</thead>
+	);
+};
+
+export const TableHeadCell: React.FC<TableHeadCellProps> = ( {
+	children,
+	className,
+} ) => {
+	return (
+		<th
+			scope="col"
+			className={ cn(
+				'p-3 text-left text-sm font-medium leading-5 text-text-primary',
+				className
+			) }
+		>
+			{ children }
+		</th>
+	);
+};
+
+// Body Components
+export const TableBody: React.FC<TableBodyProps> = ( {
+	children,
+	className,
+} ) => {
+	return (
+		<tbody
+			className={ cn(
+				'bg-background-primary divide-y divide-x-0 divide-solid divide-border-subtle',
+				className
+			) }
+		>
+			{ children }
+		</tbody>
+	);
+};
+
+export const TableRow: React.FC<TableRowProps> = ( {
+	children,
+	selected,
+	className,
+} ) => {
+	return (
+		<tr className={ cn( selected && 'bg-background-secondary', className ) }>
+			{ children }
+		</tr>
+	);
+};
+
+export const TableCell: React.FC<TableCellProps> = ( {
+	children,
+	className,
+} ) => {
+	return (
+		<td
+			className={ cn(
+				'px-3 py-4.5 text-sm font-normal leading-5 text-text-secondary',
+				className
+			) }
+		>
+			{ children }
+		</td>
+	);
+};
+
+// Table Footer
+export const TableFooter: React.FC<TableFooterProps> = ( {
+	children,
+	className,
+} ) => {
+	const { checkboxSelection } = useTableContext();
+	return (
+		<div
+			className={ cn(
+				'px-3 py-4.5 border-t border-x-0 border-b-0 border-solid border-border-subtle',
+				checkboxSelection && 'px-4 py-4.5',
+				className,
+			) }
+		>
+			{ children }
+		</div>
+	);
+};
+
+// Update display name
+Table.displayName = 'Table';
+TableHead.displayName = 'Table.Head';
+TableHeadCell.displayName = 'Table.HeadCell';
+TableBody.displayName = 'Table.Body';
+TableRow.displayName = 'Table.Row';
+TableCell.displayName = 'Table.Cell';
+TableFooter.displayName = 'Table.Footer';
+
+// Assign compound components
+Table.Head = TableHead;
+Table.HeadCell = TableHeadCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+
+export default Table;
diff --git a/src/theme/default-config.js b/src/theme/default-config.js
index aa5153cd..c0b6e7de 100644
--- a/src/theme/default-config.js
+++ b/src/theme/default-config.js
@@ -197,6 +197,8 @@ const defaultTheme = {
 				tiny: '0.625rem',
 			},
 			spacing: {
+				//18px
+				4.5: '1.125rem',
 				120: '30rem', // 480px
 				95: '23.75rem', // 380px
 				141.5: '35.375rem', // 566px

From 555adddd17db6caaf35277d04ec4bb764998a98f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:39:09 +0600
Subject: [PATCH 02/27] fix: TailwindCSS not bundled in storybook

after making any change
---
 .storybook/preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index cad2f823..e09f6e48 100644
--- a/.storybook/preview.tsx
+++ b/.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: {

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 03/27] 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 04/27] 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.
 

From b082558ced74af1f8f6583a199e141adb383b2fe Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:34:36 +0600
Subject: [PATCH 05/27] fix: Preview font family and box sizing

---
 .storybook/preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index e09f6e48..d7377c93 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -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>
 		),

From a4aa43664fd3dd29c653726bf6a505d72c279c42 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:35:42 +0600
Subject: [PATCH 06/27] chore: Added comment

---
 src/theme/default-config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/theme/default-config.js b/src/theme/default-config.js
index c0b6e7de..5d2732f1 100644
--- a/src/theme/default-config.js
+++ b/src/theme/default-config.js
@@ -197,8 +197,7 @@ const defaultTheme = {
 				tiny: '0.625rem',
 			},
 			spacing: {
-				//18px
-				4.5: '1.125rem',
+				4.5: '1.125rem', // 18px
 				120: '30rem', // 480px
 				95: '23.75rem', // 380px
 				141.5: '35.375rem', // 566px

From e48f3402ab75000db4f7f95cf94ccb1dbfe8b2ad Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:36:05 +0600
Subject: [PATCH 07/27] fix: Checkbox alignment and added a story

---
 src/components/checkbox/checkbox.stories.tsx | 3 +++
 src/components/checkbox/checkbox.tsx         | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/checkbox/checkbox.stories.tsx b/src/components/checkbox/checkbox.stories.tsx
index 8d6ca63a..f4a753dc 100644
--- a/src/components/checkbox/checkbox.stories.tsx
+++ b/src/components/checkbox/checkbox.stories.tsx
@@ -35,3 +35,6 @@ Disabled.args = {
 	label: { heading: 'Checkbox Label', description: 'Checkbox Description' },
 	disabled: true,
 };
+
+export const WithOutLabel = Template.bind( {} );
+WithOutLabel.args = {};
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index b3054fc9..1c6e547e 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/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 }

From 0711a664bb05c12d776bf2aa17d973bc6c017d6c Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 12:43:45 +0600
Subject: [PATCH 08/27] wip: Table component

Added checkbox
---
 src/components/table/table.tsx | 49 +++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index c9db6cc3..4d355d34 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/utilities/functions';
 import React, { Children, createContext, useContext, type ReactNode } from 'react';
+import { Checkbox } from '@/components';
 
 /**
  * Common props for all table components.
@@ -62,7 +63,7 @@ export interface TableProps<T> extends TableCommonProps {
 /**
  * Interface for table context.
  */
-export interface TableContextType {
+export interface TableContextType<T> {
 	/**
 	 * Set of indices for selected rows.
 	 */
@@ -71,12 +72,16 @@ export interface TableContextType {
 	 * Whether to show checkboxes for row selection.
 	 */
 	checkboxSelection?: boolean;
+	/**
+	 * On checkbox selection change.
+	 */
+	onCheckboxSelectionChange?: ( selectedItems: T[] ) => void;
 }
 
 /**
  * Interface for base table props.
  */
-export interface BaseTableProps extends TableCommonProps {
+export interface BaseTableProps<T> extends TableCommonProps {
 	/**
 	 * Child components to render within the table.
 	 *
@@ -87,6 +92,11 @@ export interface BaseTableProps extends TableCommonProps {
 	 * Whether to show checkboxes for row selection.
 	 */
 	checkboxSelection?: boolean;
+
+	/**
+	 * On checkbox selection change.
+	 */
+	onCheckboxSelectionChange?: ( selectedItems: T[] ) => void;
 }
 
 /**
@@ -157,7 +167,7 @@ export interface TableFooterProps extends TableCommonProps {
 	children?: ReactNode;
 }
 
-const TableContext = createContext<TableContextType | undefined>( undefined );
+const TableContext = createContext<TableContextType<unknown[]> | undefined>( undefined );
 
 const useTableContext = () => {
 	const context = useContext( TableContext );
@@ -167,13 +177,15 @@ const useTableContext = () => {
 	return context;
 };
 
-export const Table = ( {
+export const Table = <T, >( {
 	children,
 	className,
 	checkboxSelection = false,
-}: BaseTableProps ) => {
-	const contextValue: TableContextType = {
+	onCheckboxSelectionChange,
+}: BaseTableProps<T> ) => {
+	const contextValue: TableContextType<T> = {
 		checkboxSelection,
+		onCheckboxSelectionChange,
 	};
 
 	// Extract footer from children
@@ -183,13 +195,12 @@ export const Table = ( {
 	const restChildren = Children.toArray( children ).filter(
 		( child ) => React.isValidElement( child ) && child.type !== TableFooter
 	);
-
 	return (
-		<TableContext.Provider value={ contextValue }>
+		<TableContext.Provider value={ contextValue as TableContextType<unknown[]> }>
 			<div className="overflow-x-auto">
 				<table
 					className={ cn(
-						'min-w-full border-collapse border-spacing-0 mb-1',
+						'table-fixed min-w-full border-collapse border-spacing-0 mb-1',
 						className
 					) }
 				>
@@ -202,10 +213,18 @@ export const Table = ( {
 };
 
 // Head Components
-export const TableHead: React.FC<TableHeadProps> = ( { children } ) => {
+export const TableHead: React.FC<TableHeadProps> = ( { children, className } ) => {
+	const { checkboxSelection } = useTableContext();
 	return (
-		<thead className="bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]">
-			<tr>{ children }</tr>
+		<thead className={ cn( 'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]', className ) }>
+			<tr>
+				{ checkboxSelection && (
+					<th scope="col" className="relative p-3.5 w-11 align-middle">
+						<Checkbox size="sm" />
+					</th>
+				) }
+				{ children }
+			</tr>
 		</thead>
 	);
 };
@@ -249,8 +268,14 @@ export const TableRow: React.FC<TableRowProps> = ( {
 	selected,
 	className,
 } ) => {
+	const { checkboxSelection } = useTableContext();
 	return (
 		<tr className={ cn( selected && 'bg-background-secondary', className ) }>
+			{ checkboxSelection && (
+				<td className="px-3.5 py-4.5">
+					<Checkbox size="sm" />
+				</td>
+			) }
 			{ children }
 		</tr>
 	);

From 2b52c0f9b42357b1682b928e40f94e9cc85011f9 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 13:22:32 +0600
Subject: [PATCH 09/27] wip: Selection handler and logic implementation

---
 src/components/table/table.tsx | 65 +++++++++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 4d355d34..7d7cd0e3 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -75,7 +75,7 @@ export interface TableContextType<T> {
 	/**
 	 * On checkbox selection change.
 	 */
-	onCheckboxSelectionChange?: ( selectedItems: T[] ) => void;
+	onCheckboxSelectionChange?: ( checked: boolean, value: T | undefined ) => void;
 }
 
 /**
@@ -96,7 +96,7 @@ export interface BaseTableProps<T> extends TableCommonProps {
 	/**
 	 * On checkbox selection change.
 	 */
-	onCheckboxSelectionChange?: ( selectedItems: T[] ) => void;
+	onCheckboxSelectionChange?: ( checked: boolean, value: T | undefined ) => void;
 }
 
 /**
@@ -107,6 +107,25 @@ export interface TableHeadProps extends TableCommonProps {
 	 * Child components to render within the table head.
 	 */
 	children?: ReactNode;
+	/**
+	 * Whether any of the rows are selected.
+	 */
+	selected?: boolean;
+
+	/**
+	 * Whether the checkbox is indeterminate.
+	 */
+	indeterminate?: boolean;
+
+	/**
+	 * Whether the checkbox is disabled.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * On checkbox change.
+	 */
+	onChangeSelection?: ( checked: boolean ) => void;
 }
 
 /**
@@ -132,7 +151,7 @@ export interface TableBodyProps extends TableCommonProps {
 /**
  * Interface for table row props.
  */
-export interface TableRowProps extends TableCommonProps {
+export interface TableRowProps<T> extends TableCommonProps {
 	/**
 	 * Child components to render within the table row.
 	 */
@@ -140,11 +159,16 @@ export interface TableRowProps extends TableCommonProps {
 	/**
 	 * value of the row.
 	 */
-	value?: string;
+	value?: T | undefined;
 	/**
 	 * Whether the row is selected.
 	 */
 	selected?: boolean;
+
+	/**
+	 * Whether the row is disabled.
+	 */
+	disabled?: boolean;
 }
 
 /**
@@ -167,7 +191,7 @@ export interface TableFooterProps extends TableCommonProps {
 	children?: ReactNode;
 }
 
-const TableContext = createContext<TableContextType<unknown[]> | undefined>( undefined );
+const TableContext = createContext<TableContextType<unknown> | undefined>( undefined );
 
 const useTableContext = () => {
 	const context = useContext( TableContext );
@@ -196,7 +220,7 @@ export const Table = <T, >( {
 		( child ) => React.isValidElement( child ) && child.type !== TableFooter
 	);
 	return (
-		<TableContext.Provider value={ contextValue as TableContextType<unknown[]> }>
+		<TableContext.Provider value={ contextValue as TableContextType<unknown> }>
 			<div className="overflow-x-auto">
 				<table
 					className={ cn(
@@ -213,14 +237,22 @@ export const Table = <T, >( {
 };
 
 // Head Components
-export const TableHead: React.FC<TableHeadProps> = ( { children, className } ) => {
+export const TableHead: React.FC<TableHeadProps> = ( { children, className, selected, onChangeSelection, indeterminate, disabled } ) => {
 	const { checkboxSelection } = useTableContext();
+
+	const handleCheckboxChange = ( checked: boolean ) => {
+		if ( typeof onChangeSelection !== 'function' ) {
+			return;
+		}
+		onChangeSelection( checked );
+	};
+
 	return (
 		<thead className={ cn( 'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]', className ) }>
 			<tr>
 				{ checkboxSelection && (
 					<th scope="col" className="relative p-3.5 w-11 align-middle">
-						<Checkbox size="sm" />
+						<Checkbox size="sm" checked={ selected } indeterminate={ indeterminate } disabled={ disabled } onChange={ handleCheckboxChange } />
 					</th>
 				) }
 				{ children }
@@ -263,17 +295,26 @@ export const TableBody: React.FC<TableBodyProps> = ( {
 	);
 };
 
-export const TableRow: React.FC<TableRowProps> = ( {
+export const TableRow = <T, >( {
 	children,
 	selected,
+	value,
 	className,
-} ) => {
-	const { checkboxSelection } = useTableContext();
+}: TableRowProps<T> ) => {
+	const { checkboxSelection, onCheckboxSelectionChange } = useTableContext();
+
+	const handleCheckboxChange = ( checked: boolean ) => {
+		if ( typeof onCheckboxSelectionChange !== 'function' ) {
+			return;
+		}
+		onCheckboxSelectionChange( checked, value );
+	};
+
 	return (
 		<tr className={ cn( selected && 'bg-background-secondary', className ) }>
 			{ checkboxSelection && (
 				<td className="px-3.5 py-4.5">
-					<Checkbox size="sm" />
+					<Checkbox size="sm" onChange={ handleCheckboxChange } aria-label="Select row" />
 				</td>
 			) }
 			{ children }

From f16951e79a35289b1f2f4356aac5b86f0b671d15 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:00:28 +0600
Subject: [PATCH 10/27] Updated selection logic

---
 src/components/table/table.tsx | 56 ++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 7d7cd0e3..904ef336 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -75,13 +75,13 @@ export interface TableContextType<T> {
 	/**
 	 * On checkbox selection change.
 	 */
-	onCheckboxSelectionChange?: ( checked: boolean, value: T | undefined ) => void;
+	onChangeSelection?: ( checked: boolean, value: T ) => void;
 }
 
 /**
  * Interface for base table props.
  */
-export interface BaseTableProps<T> extends TableCommonProps {
+export interface BaseTableProps extends TableCommonProps {
 	/**
 	 * Child components to render within the table.
 	 *
@@ -92,11 +92,6 @@ export interface BaseTableProps<T> extends TableCommonProps {
 	 * Whether to show checkboxes for row selection.
 	 */
 	checkboxSelection?: boolean;
-
-	/**
-	 * On checkbox selection change.
-	 */
-	onCheckboxSelectionChange?: ( checked: boolean, value: T | undefined ) => void;
 }
 
 /**
@@ -123,7 +118,9 @@ export interface TableHeadProps extends TableCommonProps {
 	disabled?: boolean;
 
 	/**
-	 * On checkbox change.
+	 * On checkbox change for bulk selection/deselection.
+	 *
+	 * @default undefined
 	 */
 	onChangeSelection?: ( checked: boolean ) => void;
 }
@@ -165,6 +162,11 @@ export interface TableRowProps<T> extends TableCommonProps {
 	 */
 	selected?: boolean;
 
+	/**
+	 * On checkbox selection change.
+	 */
+	onChangeSelection?: ( checked: boolean, value: T ) => void;
+
 	/**
 	 * Whether the row is disabled.
 	 */
@@ -201,15 +203,13 @@ const useTableContext = () => {
 	return context;
 };
 
-export const Table = <T, >( {
+export const Table = ( {
 	children,
 	className,
 	checkboxSelection = false,
-	onCheckboxSelectionChange,
-}: BaseTableProps<T> ) => {
-	const contextValue: TableContextType<T> = {
+}: BaseTableProps ) => {
+	const contextValue: TableContextType<unknown> = {
 		checkboxSelection,
-		onCheckboxSelectionChange,
 	};
 
 	// Extract footer from children
@@ -248,11 +248,26 @@ export const TableHead: React.FC<TableHeadProps> = ( { children, className, sele
 	};
 
 	return (
-		<thead className={ cn( 'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]', className ) }>
+		<thead
+			className={ cn(
+				'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]',
+				className
+			) }
+		>
 			<tr>
 				{ checkboxSelection && (
-					<th scope="col" className="relative p-3.5 w-11 align-middle">
-						<Checkbox size="sm" checked={ selected } indeterminate={ indeterminate } disabled={ disabled } onChange={ handleCheckboxChange } />
+					<th
+						scope="col"
+						className="relative p-3.5 w-11 align-middle"
+					>
+						<Checkbox
+							size="sm"
+							checked={ selected }
+							indeterminate={ indeterminate }
+							disabled={ disabled }
+							onChange={ handleCheckboxChange }
+							aria-label={ selected ? 'Deselect all' : 'Select all' }
+						/>
 					</th>
 				) }
 				{ children }
@@ -300,21 +315,22 @@ export const TableRow = <T, >( {
 	selected,
 	value,
 	className,
+	onChangeSelection,
 }: TableRowProps<T> ) => {
-	const { checkboxSelection, onCheckboxSelectionChange } = useTableContext();
+	const { checkboxSelection } = useTableContext();
 
 	const handleCheckboxChange = ( checked: boolean ) => {
-		if ( typeof onCheckboxSelectionChange !== 'function' ) {
+		if ( typeof onChangeSelection !== 'function' ) {
 			return;
 		}
-		onCheckboxSelectionChange( checked, value );
+		onChangeSelection( checked, value as T );
 	};
 
 	return (
 		<tr className={ cn( selected && 'bg-background-secondary', className ) }>
 			{ checkboxSelection && (
 				<td className="px-3.5 py-4.5">
-					<Checkbox size="sm" onChange={ handleCheckboxChange } aria-label="Select row" />
+					<Checkbox size="sm" checked={ selected } onChange={ handleCheckboxChange } aria-label="Select row" />
 				</td>
 			) }
 			{ children }

From 6497ffee1539ee2e4e6b2b44ca1c803ff2670d6f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:28:22 +0600
Subject: [PATCH 11/27] Update default-config.js

---
 src/theme/default-config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/theme/default-config.js b/src/theme/default-config.js
index 5d2732f1..c797dba2 100644
--- a/src/theme/default-config.js
+++ b/src/theme/default-config.js
@@ -198,6 +198,7 @@ const defaultTheme = {
 			},
 			spacing: {
 				4.5: '1.125rem', // 18px
+				5.5: '1.375rem', // 22px
 				120: '30rem', // 480px
 				95: '23.75rem', // 380px
 				141.5: '35.375rem', // 566px

From dad0e7e2d7cafefcfbc9e6df35992050f012cd88 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:28:49 +0600
Subject: [PATCH 12/27] fix: Spacing and divider issues

---
 src/components/table/table.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 904ef336..f53de3f8 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -221,10 +221,10 @@ export const Table = ( {
 	);
 	return (
 		<TableContext.Provider value={ contextValue as TableContextType<unknown> }>
-			<div className="overflow-x-auto">
+			<div className="overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
 				<table
 					className={ cn(
-						'table-fixed min-w-full border-collapse border-spacing-0 mb-1',
+						'table-fixed min-w-full border-collapse border-spacing-0',
 						className
 					) }
 				>
@@ -327,9 +327,9 @@ export const TableRow = <T, >( {
 	};
 
 	return (
-		<tr className={ cn( selected && 'bg-background-secondary', className ) }>
+		<tr className={ cn( 'hover:bg-background-secondary', selected && 'bg-background-secondary', className ) }>
 			{ checkboxSelection && (
-				<td className="px-3.5 py-4.5">
+				<td className="px-3.5 py-4.5 align-middle text-center">
 					<Checkbox size="sm" checked={ selected } onChange={ handleCheckboxChange } aria-label="Select row" />
 				</td>
 			) }
@@ -363,8 +363,8 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 	return (
 		<div
 			className={ cn(
-				'px-3 py-4.5 border-t border-x-0 border-b-0 border-solid border-border-subtle',
-				checkboxSelection && 'px-4 py-4.5',
+				'px-3 pb-4.5 pt-5.5',
+				checkboxSelection && 'px-4',
 				className,
 			) }
 		>

From 2450b0d8301a674586c513b519e5cca6209ba3e4 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:29:05 +0600
Subject: [PATCH 13/27] Created story for the table component

---
 src/components/table/table.stories.tsx | 185 +++++++++++++++++++++++--
 1 file changed, 177 insertions(+), 8 deletions(-)

diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index 48c5ccba..d5f7e5ac 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -1,7 +1,8 @@
-import type { ComponentType } from 'react';
-import Table from './table';
+import { useState, type ComponentType } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-import { Pagination } from '@/components';
+import Table from './table';
+import { Button, Pagination, Tooltip } from '@/components';
+import { Edit, Trash } from 'lucide-react';
 
 const meta = {
 	title: 'Atoms/Table',
@@ -47,28 +48,192 @@ const data = [
 	},
 ];
 
-export const Default: Story = () => {
+const Template: Story = ( { checkboxSelection } ) => {
+	const [ selected, setSelected ] = useState<string[]>( [] );
+
+	const handleCheckboxChange = ( checked: boolean, value: typeof data[ number ] ) => {
+		if ( checked ) {
+			setSelected( [ ...selected, value.name ] );
+		} else {
+			setSelected( selected.filter( ( item: string ) => item !== value.name ) );
+		}
+	};
+
+	const toggleSelectAll = ( checked: boolean ) => {
+		if ( checked ) {
+			setSelected( data.map( ( item ) => item.name ) );
+		} else {
+			setSelected( [] );
+		}
+	};
+
+	return (
+		<Table
+			checkboxSelection={ checkboxSelection }
+		>
+			<Table.Head
+				selected={ selected.length > 0 }
+				onChangeSelection={ toggleSelectAll }
+				indeterminate={ selected.length > 0 && selected.length < data.length }
+			>
+				<Table.HeadCell>Name</Table.HeadCell>
+				<Table.HeadCell>Age</Table.HeadCell>
+				<Table.HeadCell>Email</Table.HeadCell>
+				<Table.HeadCell>Phone</Table.HeadCell>
+				<Table.HeadCell></Table.HeadCell>
+			</Table.Head>
+			<Table.Body>
+				{ data.map( ( item, index ) => (
+					<Table.Row
+						key={ index }
+						value={ item }
+						selected={ selected.includes( item.name ) }
+						onChangeSelection={ handleCheckboxChange }
+					>
+						<Table.Cell>{ item.name }</Table.Cell>
+						<Table.Cell>{ item.age }</Table.Cell>
+						<Table.Cell>{ item.email }</Table.Cell>
+						<Table.Cell>{ item.phone }</Table.Cell>
+						<Table.Cell>
+							<div className="flex items-center gap-2">
+								<Tooltip content="Delete" arrow placement="top">
+									<Button variant="ghost" icon={ <Trash /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+								</Tooltip>
+								<Tooltip content="Edit" arrow placement="top">
+									<Button variant="ghost" icon={ <Edit /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+								</Tooltip>
+							</div>
+						</Table.Cell>
+					</Table.Row>
+				) ) }
+			</Table.Body>
+			<Table.Footer>
+				<div className="flex items-center justify-between w-full">
+					<span className="text-sm font-normal leading-5 text-text-secondary">
+						Page 1 out of 9
+					</span>
+					<Pagination className="w-fit">
+						<Pagination.Content>
+							<Pagination.Previous />
+							<Pagination.Item isActive>1</Pagination.Item>
+							<Pagination.Item>2</Pagination.Item>
+							<Pagination.Item>3</Pagination.Item>
+							<Pagination.Ellipsis />
+							<Pagination.Item>7</Pagination.Item>
+							<Pagination.Item>8</Pagination.Item>
+							<Pagination.Item>9</Pagination.Item>
+							<Pagination.Next />
+						</Pagination.Content>
+					</Pagination>
+				</div>
+			</Table.Footer>
+		</Table>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	checkboxSelection: false,
+};
+Default.parameters = {
+	docs: {
+		source: {
+			code: `
+import { useState } from 'react';
+import { Table, Button, Pagination, Tooltip } from '@bsf/force-ui';
+import { Edit, Trash } from 'lucide-react';
+
+const data = [
+	{
+		name: 'John Doe',
+		age: 30,
+		email: 'KXk7g@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Jane Doe',
+		age: 25,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Bob Smith',
+		age: 40,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+	{
+		name: 'Alice Johnson',
+		age: 35,
+		email: 'oXHsO@example.com',
+		phone: '1234567890',
+	},
+];
+
+const App = () => {
+	const [ selected, setSelected ] = useState<string[]>( [] );
+
+	const handleCheckboxChange = ( checked: boolean, value: typeof data[ number ] ) => {
+		if ( checked ) {
+			setSelected( [ ...selected, value.name ] );
+		} else {
+			setSelected( selected.filter( ( item: string ) => item !== value.name ) );
+		}
+	};
+
+	const toggleSelectAll = ( checked: boolean ) => {
+		if ( checked ) {
+			setSelected( data.map( ( item ) => item.name ) );
+		} else {
+			setSelected( [] );
+		}
+	};
+
 	return (
-		<Table>
-			<Table.Head>
+		<Table
+			checkboxSelection={ true }
+		>
+			<Table.Head
+				selected={ selected.length > 0 }
+				onChangeSelection={ toggleSelectAll }
+				indeterminate={ selected.length > 0 && selected.length < data.length }
+			>
 				<Table.HeadCell>Name</Table.HeadCell>
 				<Table.HeadCell>Age</Table.HeadCell>
 				<Table.HeadCell>Email</Table.HeadCell>
 				<Table.HeadCell>Phone</Table.HeadCell>
+				<Table.HeadCell></Table.HeadCell>
 			</Table.Head>
 			<Table.Body>
 				{ data.map( ( item, index ) => (
-					<Table.Row key={ index }>
+					<Table.Row
+						key={ index }
+						value={ item }
+						selected={ selected.includes( item.name ) }
+						onChangeSelection={ handleCheckboxChange }
+					>
 						<Table.Cell>{ item.name }</Table.Cell>
 						<Table.Cell>{ item.age }</Table.Cell>
 						<Table.Cell>{ item.email }</Table.Cell>
 						<Table.Cell>{ item.phone }</Table.Cell>
+						<Table.Cell>
+							<div className="flex items-center gap-2">
+								<Tooltip content="Delete" arrow placement="top">
+									<Button variant="ghost" icon={ <Trash /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+								</Tooltip>
+								<Tooltip content="Edit" arrow placement="top">
+									<Button variant="ghost" icon={ <Edit /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+								</Tooltip>
+							</div>
+						</Table.Cell>
 					</Table.Row>
 				) ) }
 			</Table.Body>
 			<Table.Footer>
 				<div className="flex items-center justify-between w-full">
-					<span className="text-sm font-normal leading-5 text-text-secondary">Page 1 out of 10</span>
+					<span className="text-sm font-normal leading-5 text-text-secondary">
+						Page 1 out of 9
+					</span>
 					<Pagination className="w-fit">
 						<Pagination.Content>
 							<Pagination.Previous />
@@ -86,4 +251,8 @@ export const Default: Story = () => {
 			</Table.Footer>
 		</Table>
 	);
+}
+			`,
+		},
+	},
 };

From e41502c3f7f893226f44b3e241436742a490d1af Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:35:18 +0600
Subject: [PATCH 14/27] Updated table story source code

---
 src/components/table/table.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index d5f7e5ac..8e177e46 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -171,17 +171,17 @@ const data = [
 ];
 
 const App = () => {
-	const [ selected, setSelected ] = useState<string[]>( [] );
+	const [ selected, setSelected ] = useState( [] );
 
-	const handleCheckboxChange = ( checked: boolean, value: typeof data[ number ] ) => {
+	const handleCheckboxChange = ( checked, value ) => {
 		if ( checked ) {
 			setSelected( [ ...selected, value.name ] );
 		} else {
-			setSelected( selected.filter( ( item: string ) => item !== value.name ) );
+			setSelected( selected.filter( ( item ) => item !== value.name ) );
 		}
 	};
 
-	const toggleSelectAll = ( checked: boolean ) => {
+	const toggleSelectAll = ( checked ) => {
 		if ( checked ) {
 			setSelected( data.map( ( item ) => item.name ) );
 		} else {

From 8e0054aa0cbe25692f3373d79eef26d11d4cb2bf Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:36:00 +0600
Subject: [PATCH 15/27] chore: Lint

---
 src/components/table/index.ts          |  2 +-
 src/components/table/table.stories.tsx | 27 ++++++++++++----
 src/components/table/table.tsx         | 45 +++++++++++++++++++++-----
 3 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/components/table/index.ts b/src/components/table/index.ts
index 9fa9eee7..8101f744 100644
--- a/src/components/table/index.ts
+++ b/src/components/table/index.ts
@@ -1,2 +1,2 @@
 export { default as Table } from './table';
-export type { TableProps, Column } from './table';
\ No newline at end of file
+export type { TableProps, Column } from './table';
diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index 8e177e46..2f0ed564 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -51,7 +51,10 @@ const data = [
 const Template: Story = ( { checkboxSelection } ) => {
 	const [ selected, setSelected ] = useState<string[]>( [] );
 
-	const handleCheckboxChange = ( checked: boolean, value: typeof data[ number ] ) => {
+	const handleCheckboxChange = (
+		checked: boolean,
+		value: ( typeof data )[number]
+	) => {
 		if ( checked ) {
 			setSelected( [ ...selected, value.name ] );
 		} else {
@@ -68,13 +71,13 @@ const Template: Story = ( { checkboxSelection } ) => {
 	};
 
 	return (
-		<Table
-			checkboxSelection={ checkboxSelection }
-		>
+		<Table checkboxSelection={ checkboxSelection }>
 			<Table.Head
 				selected={ selected.length > 0 }
 				onChangeSelection={ toggleSelectAll }
-				indeterminate={ selected.length > 0 && selected.length < data.length }
+				indeterminate={
+					selected.length > 0 && selected.length < data.length
+				}
 			>
 				<Table.HeadCell>Name</Table.HeadCell>
 				<Table.HeadCell>Age</Table.HeadCell>
@@ -97,10 +100,20 @@ const Template: Story = ( { checkboxSelection } ) => {
 						<Table.Cell>
 							<div className="flex items-center gap-2">
 								<Tooltip content="Delete" arrow placement="top">
-									<Button variant="ghost" icon={ <Trash /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+									<Button
+										variant="ghost"
+										icon={ <Trash /> }
+										size="xs"
+										className="text-icon-secondary hover:text-icon-primary"
+									/>
 								</Tooltip>
 								<Tooltip content="Edit" arrow placement="top">
-									<Button variant="ghost" icon={ <Edit /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+									<Button
+										variant="ghost"
+										icon={ <Edit /> }
+										size="xs"
+										className="text-icon-secondary hover:text-icon-primary"
+									/>
 								</Tooltip>
 							</div>
 						</Table.Cell>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index f53de3f8..52bb8c38 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,5 +1,10 @@
 import { cn } from '@/utilities/functions';
-import React, { Children, createContext, useContext, type ReactNode } from 'react';
+import React, {
+	Children,
+	createContext,
+	useContext,
+	type ReactNode,
+} from 'react';
 import { Checkbox } from '@/components';
 
 /**
@@ -193,7 +198,9 @@ export interface TableFooterProps extends TableCommonProps {
 	children?: ReactNode;
 }
 
-const TableContext = createContext<TableContextType<unknown> | undefined>( undefined );
+const TableContext = createContext<TableContextType<unknown> | undefined>(
+	undefined
+);
 
 const useTableContext = () => {
 	const context = useContext( TableContext );
@@ -220,7 +227,9 @@ export const Table = ( {
 		( child ) => React.isValidElement( child ) && child.type !== TableFooter
 	);
 	return (
-		<TableContext.Provider value={ contextValue as TableContextType<unknown> }>
+		<TableContext.Provider
+			value={ contextValue as TableContextType<unknown> }
+		>
 			<div className="overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
 				<table
 					className={ cn(
@@ -237,7 +246,14 @@ export const Table = ( {
 };
 
 // Head Components
-export const TableHead: React.FC<TableHeadProps> = ( { children, className, selected, onChangeSelection, indeterminate, disabled } ) => {
+export const TableHead: React.FC<TableHeadProps> = ( {
+	children,
+	className,
+	selected,
+	onChangeSelection,
+	indeterminate,
+	disabled,
+} ) => {
 	const { checkboxSelection } = useTableContext();
 
 	const handleCheckboxChange = ( checked: boolean ) => {
@@ -266,7 +282,9 @@ export const TableHead: React.FC<TableHeadProps> = ( { children, className, sele
 							indeterminate={ indeterminate }
 							disabled={ disabled }
 							onChange={ handleCheckboxChange }
-							aria-label={ selected ? 'Deselect all' : 'Select all' }
+							aria-label={
+								selected ? 'Deselect all' : 'Select all'
+							}
 						/>
 					</th>
 				) }
@@ -327,10 +345,21 @@ export const TableRow = <T, >( {
 	};
 
 	return (
-		<tr className={ cn( 'hover:bg-background-secondary', selected && 'bg-background-secondary', className ) }>
+		<tr
+			className={ cn(
+				'hover:bg-background-secondary',
+				selected && 'bg-background-secondary',
+				className
+			) }
+		>
 			{ checkboxSelection && (
 				<td className="px-3.5 py-4.5 align-middle text-center">
-					<Checkbox size="sm" checked={ selected } onChange={ handleCheckboxChange } aria-label="Select row" />
+					<Checkbox
+						size="sm"
+						checked={ selected }
+						onChange={ handleCheckboxChange }
+						aria-label="Select row"
+					/>
 				</td>
 			) }
 			{ children }
@@ -365,7 +394,7 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 			className={ cn(
 				'px-3 pb-4.5 pt-5.5',
 				checkboxSelection && 'px-4',
-				className,
+				className
 			) }
 		>
 			{ children }

From 35147cde733ec1ddeb52e9f86f868f291b6e1a1f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:00:08 +0600
Subject: [PATCH 16/27] fix: Accessibility issues

---
 src/components/table/table.stories.tsx | 14 ++--
 src/components/table/table.tsx         | 89 ++++++++++++++++----------
 2 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index 2f0ed564..33afacef 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -83,7 +83,9 @@ const Template: Story = ( { checkboxSelection } ) => {
 				<Table.HeadCell>Age</Table.HeadCell>
 				<Table.HeadCell>Email</Table.HeadCell>
 				<Table.HeadCell>Phone</Table.HeadCell>
-				<Table.HeadCell></Table.HeadCell>
+				<Table.HeadCell>
+					<span className="sr-only">Actions</span>
+				</Table.HeadCell>
 			</Table.Head>
 			<Table.Body>
 				{ data.map( ( item, index ) => (
@@ -105,6 +107,7 @@ const Template: Story = ( { checkboxSelection } ) => {
 										icon={ <Trash /> }
 										size="xs"
 										className="text-icon-secondary hover:text-icon-primary"
+										aria-label="Delete"
 									/>
 								</Tooltip>
 								<Tooltip content="Edit" arrow placement="top">
@@ -113,6 +116,7 @@ const Template: Story = ( { checkboxSelection } ) => {
 										icon={ <Edit /> }
 										size="xs"
 										className="text-icon-secondary hover:text-icon-primary"
+										aria-label="Edit"
 									/>
 								</Tooltip>
 							</div>
@@ -215,7 +219,9 @@ const App = () => {
 				<Table.HeadCell>Age</Table.HeadCell>
 				<Table.HeadCell>Email</Table.HeadCell>
 				<Table.HeadCell>Phone</Table.HeadCell>
-				<Table.HeadCell></Table.HeadCell>
+				<Table.HeadCell>
+					<span className="sr-only">Actions</span>
+				</Table.HeadCell>
 			</Table.Head>
 			<Table.Body>
 				{ data.map( ( item, index ) => (
@@ -232,10 +238,10 @@ const App = () => {
 						<Table.Cell>
 							<div className="flex items-center gap-2">
 								<Tooltip content="Delete" arrow placement="top">
-									<Button variant="ghost" icon={ <Trash /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+									<Button variant="ghost" icon={ <Trash /> } size="xs" className="text-icon-secondary hover:text-icon-primary" aria-label="Delete" />
 								</Tooltip>
 								<Tooltip content="Edit" arrow placement="top">
-									<Button variant="ghost" icon={ <Edit /> } size="xs" className="text-icon-secondary hover:text-icon-primary" />
+									<Button variant="ghost" icon={ <Edit /> } size="xs" className="text-icon-secondary hover:text-icon-primary" aria-label="Edit" />
 								</Tooltip>
 							</div>
 						</Table.Cell>
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index 52bb8c38..ca430a0f 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -21,36 +21,12 @@ export interface TableCommonProps {
 	className?: string;
 }
 
-/**
- * Interface for column configurations.
- */
-export interface Column<T> {
-	/**
-	 * Header text to display in the column.
-	 */
-	header: string;
-	/**
-	 * Property key from data object to display in this column.
-	 */
-	accessor: keyof T;
-	/**
-	 * Whether this column can be sorted.
-	 */
-	sortable?: boolean;
-	/**
-	 * Custom sort function for this column.
-	 */
-	sortFn?: ( a: T, b: T ) => number;
-	/**
-	 * Custom cell renderer for this column.
-	 */
-	Cell?: ( props: { value: unknown; row: T; index: number } ) => ReactNode;
-}
-
 /**
  * Interface for table props.
  */
-export interface TableProps<T> extends TableCommonProps {
+export interface TableProps<T>
+	extends TableCommonProps,
+		Omit<React.HTMLAttributes<HTMLTableElement>, 'className' | 'children'> {
 	/**
 	 * Whether to show checkboxes for row selection.
 	 */
@@ -86,7 +62,9 @@ export interface TableContextType<T> {
 /**
  * Interface for base table props.
  */
-export interface BaseTableProps extends TableCommonProps {
+export interface BaseTableProps
+	extends TableCommonProps,
+		Omit<React.HTMLAttributes<HTMLTableElement>, 'className' | 'children'> {
 	/**
 	 * Child components to render within the table.
 	 *
@@ -102,7 +80,12 @@ export interface BaseTableProps extends TableCommonProps {
 /**
  * Interface for table head props.
  */
-export interface TableHeadProps extends TableCommonProps {
+export interface TableHeadProps
+	extends TableCommonProps,
+		Omit<
+			React.HTMLAttributes<HTMLTableSectionElement>,
+			'className' | 'children'
+		> {
 	/**
 	 * Child components to render within the table head.
 	 */
@@ -133,7 +116,12 @@ export interface TableHeadProps extends TableCommonProps {
 /**
  * Interface for table head cell props.
  */
-export interface TableHeadCellProps extends TableCommonProps {
+export interface TableHeadCellProps
+	extends TableCommonProps,
+		Omit<
+			React.HTMLAttributes<HTMLTableCellElement>,
+			'className' | 'children'
+		> {
 	/**
 	 * Content to display in the header cell.
 	 */
@@ -143,7 +131,12 @@ export interface TableHeadCellProps extends TableCommonProps {
 /**
  * Interface for table body props.
  */
-export interface TableBodyProps extends TableCommonProps {
+export interface TableBodyProps
+	extends TableCommonProps,
+		Omit<
+			React.HTMLAttributes<HTMLTableSectionElement>,
+			'className' | 'children'
+		> {
 	/**
 	 * Child components to render within the table body.
 	 */
@@ -153,7 +146,12 @@ export interface TableBodyProps extends TableCommonProps {
 /**
  * Interface for table row props.
  */
-export interface TableRowProps<T> extends TableCommonProps {
+export interface TableRowProps<T>
+	extends TableCommonProps,
+		Omit<
+			React.HTMLAttributes<HTMLTableRowElement>,
+			'className' | 'children'
+		> {
 	/**
 	 * Child components to render within the table row.
 	 */
@@ -181,7 +179,12 @@ export interface TableRowProps<T> extends TableCommonProps {
 /**
  * Interface for table cell props.
  */
-export interface TableCellProps extends TableCommonProps {
+export interface TableCellProps
+	extends TableCommonProps,
+		Omit<
+			React.HTMLAttributes<HTMLTableCellElement>,
+			'className' | 'children'
+		> {
 	/**
 	 * Content to display in the table cell.
 	 */
@@ -191,7 +194,9 @@ export interface TableCellProps extends TableCommonProps {
 /**
  * Interface for table footer props.
  */
-export interface TableFooterProps extends TableCommonProps {
+export interface TableFooterProps
+	extends TableCommonProps,
+		Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
 	/**
 	 * Child components to render within the table footer.
 	 */
@@ -214,6 +219,7 @@ export const Table = ( {
 	children,
 	className,
 	checkboxSelection = false,
+	...props
 }: BaseTableProps ) => {
 	const contextValue: TableContextType<unknown> = {
 		checkboxSelection,
@@ -230,12 +236,13 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
+			<div className="overflow-x-auto">
 				<table
 					className={ cn(
 						'table-fixed min-w-full border-collapse border-spacing-0',
 						className
 					) }
+					{ ...props }
 				>
 					{ restChildren }
 				</table>
@@ -253,6 +260,7 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 	onChangeSelection,
 	indeterminate,
 	disabled,
+	...props
 } ) => {
 	const { checkboxSelection } = useTableContext();
 
@@ -269,6 +277,7 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 				'bg-background-secondary [clip-path:inset(0_0_0_0_round_0.375rem)]',
 				className
 			) }
+			{ ...props }
 		>
 			<tr>
 				{ checkboxSelection && (
@@ -297,6 +306,7 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 export const TableHeadCell: React.FC<TableHeadCellProps> = ( {
 	children,
 	className,
+	...props
 } ) => {
 	return (
 		<th
@@ -305,6 +315,7 @@ export const TableHeadCell: React.FC<TableHeadCellProps> = ( {
 				'p-3 text-left text-sm font-medium leading-5 text-text-primary',
 				className
 			) }
+			{ ...props }
 		>
 			{ children }
 		</th>
@@ -315,6 +326,7 @@ export const TableHeadCell: React.FC<TableHeadCellProps> = ( {
 export const TableBody: React.FC<TableBodyProps> = ( {
 	children,
 	className,
+	...props
 } ) => {
 	return (
 		<tbody
@@ -322,6 +334,7 @@ export const TableBody: React.FC<TableBodyProps> = ( {
 				'bg-background-primary divide-y divide-x-0 divide-solid divide-border-subtle',
 				className
 			) }
+			{ ...props }
 		>
 			{ children }
 		</tbody>
@@ -334,6 +347,7 @@ export const TableRow = <T, >( {
 	value,
 	className,
 	onChangeSelection,
+	...props
 }: TableRowProps<T> ) => {
 	const { checkboxSelection } = useTableContext();
 
@@ -351,6 +365,7 @@ export const TableRow = <T, >( {
 				selected && 'bg-background-secondary',
 				className
 			) }
+			{ ...props }
 		>
 			{ checkboxSelection && (
 				<td className="px-3.5 py-4.5 align-middle text-center">
@@ -370,6 +385,7 @@ export const TableRow = <T, >( {
 export const TableCell: React.FC<TableCellProps> = ( {
 	children,
 	className,
+	...props
 } ) => {
 	return (
 		<td
@@ -377,6 +393,7 @@ export const TableCell: React.FC<TableCellProps> = ( {
 				'px-3 py-4.5 text-sm font-normal leading-5 text-text-secondary',
 				className
 			) }
+			{ ...props }
 		>
 			{ children }
 		</td>
@@ -387,6 +404,7 @@ export const TableCell: React.FC<TableCellProps> = ( {
 export const TableFooter: React.FC<TableFooterProps> = ( {
 	children,
 	className,
+	...props
 } ) => {
 	const { checkboxSelection } = useTableContext();
 	return (
@@ -396,6 +414,7 @@ export const TableFooter: React.FC<TableFooterProps> = ( {
 				checkboxSelection && 'px-4',
 				className
 			) }
+			{ ...props }
 		>
 			{ children }
 		</div>

From 9190129e94410d54c85115338039c5d0a81acd21 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:04:38 +0600
Subject: [PATCH 17/27] Removed unused types

---
 src/components/table/table.tsx | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index ca430a0f..c37cc33d 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -21,26 +21,6 @@ export interface TableCommonProps {
 	className?: string;
 }
 
-/**
- * Interface for table props.
- */
-export interface TableProps<T>
-	extends TableCommonProps,
-		Omit<React.HTMLAttributes<HTMLTableElement>, 'className' | 'children'> {
-	/**
-	 * Whether to show checkboxes for row selection.
-	 */
-	showCheckbox?: boolean;
-	/**
-	 * Callback fired when row selection changes.
-	 */
-	onSelectionChange?: ( selectedItems: T[] ) => void;
-	/**
-	 * Child components to render within the table.
-	 */
-	children?: ReactNode;
-}
-
 /**
  * Interface for table context.
  */

From 54f86a1dea582dc99f4fef9f7b10ab04b512b986 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:11:07 +0600
Subject: [PATCH 18/27] Removed invalid exports

---
 src/components/table/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/table/index.ts b/src/components/table/index.ts
index 8101f744..1a876cfc 100644
--- a/src/components/table/index.ts
+++ b/src/components/table/index.ts
@@ -1,2 +1 @@
 export { default as Table } from './table';
-export type { TableProps, Column } from './table';

From 27bd55e108010e255f079d058057d78e5def142b Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:20:43 +0600
Subject: [PATCH 19/27] Removed story

---
 src/components/checkbox/checkbox.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/checkbox/checkbox.stories.tsx b/src/components/checkbox/checkbox.stories.tsx
index f4a753dc..8d6ca63a 100644
--- a/src/components/checkbox/checkbox.stories.tsx
+++ b/src/components/checkbox/checkbox.stories.tsx
@@ -35,6 +35,3 @@ Disabled.args = {
 	label: { heading: 'Checkbox Label', description: 'Checkbox Description' },
 	disabled: true,
 };
-
-export const WithOutLabel = Template.bind( {} );
-WithOutLabel.args = {};

From 831cbe49543955e394a4cb37b8b041dd4af9c7e1 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:56:32 +0600
Subject: [PATCH 20/27] Updated Table component story

---
 src/components/table/table.stories.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index 33afacef..4de952aa 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -1,7 +1,7 @@
 import { useState, type ComponentType } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
 import Table from './table';
-import { Button, Pagination, Tooltip } from '@/components';
+import { Button, Container, Pagination, Tooltip } from '@/components';
 import { Edit, Trash } from 'lucide-react';
 
 const meta = {
@@ -83,7 +83,7 @@ const Template: Story = ( { checkboxSelection } ) => {
 				<Table.HeadCell>Age</Table.HeadCell>
 				<Table.HeadCell>Email</Table.HeadCell>
 				<Table.HeadCell>Phone</Table.HeadCell>
-				<Table.HeadCell>
+				<Table.HeadCell className="w-14">
 					<span className="sr-only">Actions</span>
 				</Table.HeadCell>
 			</Table.Head>
@@ -100,7 +100,7 @@ const Template: Story = ( { checkboxSelection } ) => {
 						<Table.Cell>{ item.email }</Table.Cell>
 						<Table.Cell>{ item.phone }</Table.Cell>
 						<Table.Cell>
-							<div className="flex items-center gap-2">
+							<Container align="center" justify="end" className="gap-2">
 								<Tooltip content="Delete" arrow placement="top">
 									<Button
 										variant="ghost"
@@ -119,7 +119,7 @@ const Template: Story = ( { checkboxSelection } ) => {
 										aria-label="Edit"
 									/>
 								</Tooltip>
-							</div>
+							</Container>
 						</Table.Cell>
 					</Table.Row>
 				) ) }
@@ -152,7 +152,12 @@ export const Default = Template.bind( {} );
 Default.args = {
 	checkboxSelection: false,
 };
-Default.parameters = {
+
+export const WithCheckboxSelection = Template.bind( {} );
+WithCheckboxSelection.args = {
+	checkboxSelection: true,
+};
+WithCheckboxSelection.parameters = {
 	docs: {
 		source: {
 			code: `

From fd9054f227948c14591fdeb048f2b38d62d65b07 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:00:15 +0600
Subject: [PATCH 21/27] chore: Lint

---
 src/components/table/table.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/table/table.stories.tsx b/src/components/table/table.stories.tsx
index 4de952aa..9723f129 100644
--- a/src/components/table/table.stories.tsx
+++ b/src/components/table/table.stories.tsx
@@ -100,7 +100,11 @@ const Template: Story = ( { checkboxSelection } ) => {
 						<Table.Cell>{ item.email }</Table.Cell>
 						<Table.Cell>{ item.phone }</Table.Cell>
 						<Table.Cell>
-							<Container align="center" justify="end" className="gap-2">
+							<Container
+								align="center"
+								justify="end"
+								className="gap-2"
+							>
 								<Tooltip content="Delete" arrow placement="top">
 									<Button
 										variant="ghost"

From c4ba9fadccbd385141c119106b2b1c095411337f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:08:34 +0600
Subject: [PATCH 22/27] fix: Divider between table body and footer not visible

---
 src/components/table/table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index c37cc33d..bcd09cc7 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -216,7 +216,7 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="overflow-x-auto">
+			<div className="w-full overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
 				<table
 					className={ cn(
 						'table-fixed min-w-full border-collapse border-spacing-0',

From d0042f15bebfc459d49687165fb584792b3b1124 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:07:14 +0600
Subject: [PATCH 23/27] fix: Table not exported from Force-UI

---
 src/components/index.ts       | 1 +
 src/components/table/index.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/index.ts b/src/components/index.ts
index 1ec4b16a..5053d4ff 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -38,3 +38,4 @@ export { default as LineChart } from './line-chart';
 export { default as PieChart } from './pie-chart';
 export { default as AreaChart } from './area-chart';
 export { default as Dropzone } from './dropzone';
+export { default as Table } from './table';
diff --git a/src/components/table/index.ts b/src/components/table/index.ts
index 1a876cfc..a62247d8 100644
--- a/src/components/table/index.ts
+++ b/src/components/table/index.ts
@@ -1 +1 @@
-export { default as Table } from './table';
+export { default } from './table';

From c15f6e3915778daf36b9773539988633f0cdf3e5 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sun, 15 Dec 2024 00:09:22 +0600
Subject: [PATCH 24/27] fix: Table Checkbox column width

---
 src/components/table/table.tsx | 40 +++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index bcd09cc7..fc0c1b7a 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -263,18 +263,20 @@ export const TableHead: React.FC<TableHeadProps> = ( {
 				{ checkboxSelection && (
 					<th
 						scope="col"
-						className="relative p-3.5 w-11 align-middle"
+						className="relative px-5.5 w-11 overflow-hidden"
 					>
-						<Checkbox
-							size="sm"
-							checked={ selected }
-							indeterminate={ indeterminate }
-							disabled={ disabled }
-							onChange={ handleCheckboxChange }
-							aria-label={
-								selected ? 'Deselect all' : 'Select all'
-							}
-						/>
+						<div className="absolute inset-0 grid grid-cols-1 place-content-center">
+							<Checkbox
+								size="sm"
+								checked={ selected }
+								indeterminate={ indeterminate }
+								disabled={ disabled }
+								onChange={ handleCheckboxChange }
+								aria-label={
+									selected ? 'Deselect all' : 'Select all'
+								}
+							/>
+						</div>
 					</th>
 				) }
 				{ children }
@@ -348,13 +350,15 @@ export const TableRow = <T, >( {
 			{ ...props }
 		>
 			{ checkboxSelection && (
-				<td className="px-3.5 py-4.5 align-middle text-center">
-					<Checkbox
-						size="sm"
-						checked={ selected }
-						onChange={ handleCheckboxChange }
-						aria-label="Select row"
-					/>
+				<td className="relative px-5.5 w-11 overflow-hidden">
+					<div className="absolute inset-0 grid grid-cols-1 place-content-center">
+						<Checkbox
+							size="sm"
+							checked={ selected }
+							onChange={ handleCheckboxChange }
+							aria-label="Select row"
+						/>
+					</div>
 				</td>
 			) }
 			{ children }

From 394019e36768274ceb25d8b3e362f7c7669ed796 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sun, 15 Dec 2024 00:34:49 +0600
Subject: [PATCH 25/27] Updated display value

---
 src/components/table/table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index fc0c1b7a..24a85ddd 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -216,7 +216,7 @@ export const Table = ( {
 		<TableContext.Provider
 			value={ contextValue as TableContextType<unknown> }
 		>
-			<div className="w-full overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
+			<div className="flow-root overflow-x-auto divide-y divide-x-0 divide-solid divide-border-subtle">
 				<table
 					className={ cn(
 						'table-fixed min-w-full border-collapse border-spacing-0',

From f59436bd219516765adf96be2447779c368619c3 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Sun, 15 Dec 2024 01:41:06 +0600
Subject: [PATCH 26/27] fix: Pagination component type

---
 src/components/pagination/pagination.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index ef8c61b2..824f15d3 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -1,10 +1,4 @@
-import {
-	createContext,
-	useContext,
-	forwardRef,
-	type ReactNode,
-	type ElementType,
-} from 'react';
+import { createContext, useContext, forwardRef, type ReactNode } from 'react';
 import { cn, callAll } from '@/utilities/functions';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { disabledClassNames, sizeClassNames } from './component-style';
@@ -33,14 +27,14 @@ export interface PaginationProps extends PaginationCommonProps {
 	disabled?: boolean;
 }
 
-export interface PaginationItemProps extends PaginationCommonProps {
+export interface PaginationItemProps
+	extends PaginationCommonProps,
+		PaginationButtonProps {
 	/** Marks the pagination item as active. */
 	isActive?: boolean;
 }
 
 export interface PaginationButtonProps extends PaginationCommonProps {
-	/** The element type of the pagination button. */
-	as?: ElementType;
 	/** Marks the button as active. */
 	isActive?: boolean;
 	/** Disables the button. */

From 6b8f70bfdd10ae1a66828040b7ed59a3931a3d25 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Mon, 16 Dec 2024 10:46:39 +0600
Subject: [PATCH 27/27] Bump version and updated change log and readme

---
 README.md     | 8 +++++++-
 changelog.txt | 3 ++-
 package.json  | 2 +-
 version.json  | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 81ffbcb6..00889988 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.2.2"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.3.0"
 }
 ```
 
@@ -25,6 +25,12 @@ And run the following command to install the package -
 npm install
 ```
 
+Or you can directly run the following command to install the package -
+
+```bash
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.3.0
+```
+
 <br />
 
 2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withTW()` function coming from @bsf/force-ui/withTW.
diff --git a/changelog.txt b/changelog.txt
index 4a314439..b6356c0b 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,5 @@
-Version x.x.x - x x, x
+Version 1.3.0 - 16th December, 2024
+- New - Table component.
 - Fixed - Asterisk missing on required input label.
 
 Version 1.2.2 - 4th December, 2024
diff --git a/package.json b/package.json
index 28c9c5b9..a0f65682 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.js",
     "module": "./dist/force-ui.js",
diff --git a/version.json b/version.json
index 7fd3c879..675a1b15 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.2.2"
+	"force-ui": "1.3.0"
 }