feat: add Spacer component

src/index.ts

@@ -17,3 +17,4 @@ export { FormControl } from "./form-control";
 export { HelpBlock } from "./help-block";
 export { Row } from "./row";
 export { Modal, type ModalProps, type HeaderProps } from "./modal";
+export { Spacer } from "./spacer";

src/modal/modal.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { StoryObj, StoryFn, Meta } from "@storybook/react";
 
 import { Button } from "../button";
+import { Spacer } from "../spacer";
 import { Modal } from "./modal";
 import {
 	type ModalProps,
@@ -41,8 +42,6 @@ const story = {
 	},
 } satisfies Meta<typeof Modal>;
 
-const Spacer = () => <div style={{ height: "5px", width: "100%" }} />;
-
 const DefaultTemplate: StoryFn<StoryProps> = ({
 	showCloseButton,
 	bodyAlignment,
@@ -84,7 +83,7 @@ const DefaultTemplate: StoryFn<StoryProps> = ({
 					<Button block size="large">
 						Submit
 					</Button>
-					<Spacer />
+					<Spacer size="xxs" />
 					<Button block size="large" onClick={handleClose}>
 						Cancel
 					</Button>
@@ -129,7 +128,7 @@ const DangerTemplate: StoryFn<ModalProps> = (args) => {
 					<Button block size="large" onClick={handleClose}>
 						Cancel
 					</Button>
-					<Spacer />
+					<Spacer size="xxs" />
 					<Button block variant="danger" size="large">
 						Submit
 					</Button>

src/spacer/index.ts

@@ -0,0 +1 @@
+export { Spacer } from "./spacer";

src/spacer/spacer.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Spacer } from "./spacer";
+import { Button } from "../button";
+
+const story = {
+	title: "Components/Spacer",
+	component: Spacer,
+} satisfies Meta<typeof Spacer>;
+
+type Story = StoryObj<typeof Spacer>;
+
+const Template: StoryFn<typeof Spacer> = (args) => (
+	<>
+		<Button>Button one</Button>
+		<Spacer {...args} />
+		<Button>Button two</Button>
+	</>
+);
+
+export const XXS: Story = {
+	render: Template,
+	args: {
+		size: "xxs",
+	},
+};
+
+export const XS: Story = {
+	render: Template,
+	args: {
+		size: "xs",
+	},
+};
+
+export const S: Story = {
+	render: Template,
+	args: {
+		size: "s",
+	},
+};
+
+export const M: Story = {
+	render: Template,
+	args: {
+		size: "m",
+	},
+};
+
+export const L: Story = {
+	render: Template,
+	args: {
+		size: "l",
+	},
+};
+
+export const XL: Story = {
+	render: Template,
+	args: {
+		size: "xl",
+	},
+};
+
+export const XXL: Story = {
+	render: Template,
+	args: {
+		size: "xxl",
+	},
+};
+
+export default story;

src/spacer/spacer.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+const sizes = {
+	xxs: "h-[5px]",
+	xs: "h-[10px]",
+	s: "h-[20px]",
+	m: "h-[30px]",
+	l: "h-[60px]",
+	xl: "h-[90px]",
+	xxl: "h-[180px]",
+} as const;
+
+interface SpacerProps {
+	/**
+	 * Sizes:
+	 * - xxs: 5px
+	 * - xs: 10px
+	 * - s: 20px
+	 * - m: 30px
+	 * - l: 60px
+	 * - xl: 90px
+	 * - xxl: 180px
+	 */
+	size: keyof typeof sizes;
+}
+
+export const Spacer = ({ size }: SpacerProps) => {
+	// NOTE: Do not construct class names dynamically
+	// https://tailwindcss.com/docs/content-configuration#classes-arent-generated
+	return <div className={sizes[size]} />;
+};