Implement simple spinner component

src/components/illustrationHuman/index.ts

@@ -0,0 +1,8 @@
+export { IllustrationHuman, type IIllustrationHumanProps } from './illustrationHuman';
+export type {
+    IllustrationHumanAccessory,
+    IllustrationHumanBody,
+    IllustrationHumanExpression,
+    IllustrationHumanHairs,
+    IllustrationHumanSunglasses,
+} from './illustrationHumanType';

src/components/index.ts

@@ -1 +1,5 @@
 export * from './button';
+export * from './icon';
+export * from './illustrationHuman';
+export * from './illustrationObject';
+export * from './spinner';

src/components/spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner, type ISpinnerProps } from './spinner';

src/components/spinner/spinner.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+
+const meta: Meta<typeof Spinner> = {
+    title: 'components/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Spinner>;
+
+/**
+ * Default usage example of the Spinner component.
+ */
+export const Default: Story = {
+    args: {
+        variant: 'neutral',
+        size: 'lg',
+    },
+};
+
+export default meta;

src/components/spinner/spinner.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { Spinner, type ISpinnerProps } from './spinner';
+
+describe('<Spinner /> component', () => {
+    const createTestComponent = (props?: Partial<ISpinnerProps>) => {
+        const completeProps: ISpinnerProps = {
+            variant: 'primary',
+            size: 'md',
+            ...props,
+        };
+
+        return <Spinner {...completeProps} />;
+    };
+
+    it('renders a spinner', () => {
+        render(createTestComponent());
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+});

src/components/spinner/spinner.tsx

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import { type HTMLAttributes } from 'react';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
+
+export interface ISpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spinner.
+     */
+    size: SpinnerSize;
+    /**
+     * Variant of the spinner.
+     */
+    variant: SpinnerVariant;
+}
+
+const sizeToDimension: Record<SpinnerSize, number> = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+
+const variantToClassNames: Record<SpinnerVariant, string> = {
+    neutral: 'border-neutral-100 border-t-primary-400',
+    primary: 'border-neutral-0 border-t-primary-300',
+    success: 'border-success-300 border-t-success-800',
+    warning: 'border-warning-300 border-t-warning-800',
+    critical: 'border-critical-300 border-t-critical-800',
+};
+
+/**
+ * Spinner UI component
+ */
+export const Spinner: React.FC<ISpinnerProps> = (props) => {
+    const { size, variant, style, className, ...otherProps } = props;
+
+    const spinerSize = sizeToDimension[size];
+    const computedStyle = { width: spinerSize, height: spinerSize, ...style };
+
+    return (
+        <div
+            role="progressbar"
+            className={classNames('animate-spin rounded-full border-2', variantToClassNames[variant], className)}
+            style={computedStyle}
+            {...otherProps}
+        />
+    );
+};