13 files changed, 292 insertions, 0 deletions
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 9791e66..54d8d29 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -9,5 +9,6 @@ export * from './links';
 export * from './lists';
 export * from './loaders';
 export * from './notice';
+export * from './overlay';
 export * from './sidebar';
 export * from './visually-hidden';
diff --git a/src/components/atoms/overlay/index.ts b/src/components/atoms/overlay/index.ts
new file mode 100644
index 0000000..40adbf0
--- /dev/null
+++ b/src/components/atoms/overlay/index.ts
@@ -0,0 +1 @@
+export * from './overlay';
diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss
new file mode 100644
index 0000000..edbc4ae
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.module.scss
@@ -0,0 +1,18 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: hsla(0, 0%, 0%, 0.6);
+  transition: all 0.3s linear 0s;
+
+  &--hidden {
+    opacity: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}
diff --git a/src/components/atoms/overlay/overlay.stories.tsx b/src/components/atoms/overlay/overlay.stories.tsx
new file mode 100644
index 0000000..f9c478c
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.stories.tsx
@@ -0,0 +1,63 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useToggle } from '../../../utils/hooks';
+import { Button } from '../buttons';
+import { Overlay } from './overlay';
+
+/**
+ * Overlay - Storybook Meta
+ */
+export default {
+  title: 'Atoms/Overlay',
+  component: Overlay,
+  argTypes: {},
+} as ComponentMeta<typeof Overlay>;
+
+const Template: ComponentStory<typeof Overlay> = ({ isVisible, ...props }) => {
+  const [isActive, toggle] = useToggle(isVisible);
+
+  return (
+    <div>
+      <p>
+        Itaque reprehenderit sint rerum placeat et sapiente similique ut
+        distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis
+        asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi
+        aut eaque et. Commodi et necessitatibus provident blanditiis rem qui
+        atque.
+      </p>
+      <p>
+        Aut architecto vitae dolor hic explicabo iure quia quae beatae.
+        Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi
+        est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos
+        autem. Libero omnis quis aut quas omnis magni harum et.
+      </p>
+      <Button onClick={toggle}>Open overlay</Button>
+      <Overlay {...props} isVisible={isActive} onClick={toggle} />
+    </div>
+  );
+};
+
+/**
+ * Overlay Stories - Hidden
+ */
+export const Hidden = Template.bind({});
+Hidden.args = {
+  children: (
+    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
+      Some modal contents.
+    </div>
+  ),
+  isVisible: false,
+};
+
+/**
+ * Overlay Stories - Visible
+ */
+export const Visible = Template.bind({});
+Visible.args = {
+  children: (
+    <div style={{ background: '#FFF', margin: '1rem', padding: '1rem' }}>
+      Some modal contents.
+    </div>
+  ),
+  isVisible: true,
+};
diff --git a/src/components/atoms/overlay/overlay.test.tsx b/src/components/atoms/overlay/overlay.test.tsx
new file mode 100644
index 0000000..fcc694f
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as screenTL } from '@testing-library/react';
+import { Overlay } from './overlay';
+
+describe('overlay', () => {
+  it('renders its children in front of an overlay', () => {
+    const body = 'perferendis voluptatibus ut';
+
+    render(<Overlay>{body}</Overlay>);
+
+    expect(screenTL.getByText(body)).toHaveClass('overlay--visible');
+  });
+
+  it('can be hidden', () => {
+    const body = 'vel aspernatur mollitia';
+
+    render(<Overlay isVisible={false}>{body}</Overlay>);
+
+    expect(screenTL.getByText(body)).toHaveClass('overlay--hidden');
+  });
+});
diff --git a/src/components/atoms/overlay/overlay.tsx b/src/components/atoms/overlay/overlay.tsx
new file mode 100644
index 0000000..7dd7446
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.tsx
@@ -0,0 +1,47 @@
+import {
+  forwardRef,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { useScrollLock } from '../../../utils/hooks';
+import styles from './overlay.module.scss';
+
+export type OverlayProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The elements to display in front of the overlay.
+   */
+  children: ReactNode;
+  /**
+   * Should the overlay be visible?
+   *
+   * Use it if you want an animated overlay instead of mounting/demounting it.
+   *
+   * @default true
+   */
+  isVisible?: boolean;
+};
+
+const OverlayWithRef: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = (
+  { children, className = '', isVisible = true, ...props },
+  ref
+) => {
+  const overlayClass = [
+    styles.overlay,
+    styles[isVisible ? 'overlay--visible' : 'overlay--hidden'],
+    className,
+  ].join(' ');
+
+  useScrollLock(isVisible);
+
+  return (
+    <div {...props} className={overlayClass} ref={ref}>
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Overlay component.
+ */
+export const Overlay = forwardRef(OverlayWithRef);
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index b98be04..3e8b410 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -19,7 +19,9 @@ export * from './use-reading-time';
 export * from './use-redirection';
 export * from './use-reduced-motion';
 export * from './use-route-change';
+export * from './use-scroll-lock';
 export * from './use-scroll-position';
+export * from './use-scrollbar-width';
 export * from './use-settings';
 export * from './use-state-change';
 export * from './use-system-color-scheme';
diff --git a/src/utils/hooks/use-scroll-lock/index.ts b/src/utils/hooks/use-scroll-lock/index.ts
new file mode 100644
index 0000000..f5735c7
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/index.ts
@@ -0,0 +1 @@
+export * from './use-scroll-lock';
diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
new file mode 100644
index 0000000..f8234e1
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { useScrollLock } from './use-scroll-lock';
+
+const body = 'eligendi dolor eos';
+
+const UseScrollLockDemo = ({ isLocked }: { isLocked: boolean }) => {
+  useScrollLock(isLocked);
+
+  return <div>{body}</div>;
+};
+
+describe('use-scroll-lock', () => {
+  it('can disable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked />);
+
+    expect(baseElement).toHaveStyle({ overflow: 'hidden' });
+  });
+
+  it('can enable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked={false} />);
+
+    expect(baseElement).not.toHaveStyle({ overflow: 'hidden' });
+  });
+});
diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts
new file mode 100644
index 0000000..64fc5e8
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts
@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useMemo } from 'react';
+import { useScrollBarWidth } from '../use-scrollbar-width';
+
+type Styles = {
+  overflow: string;
+  paddingRight: string;
+};
+
+/**
+ * React hook to lock/unlock the scroll on the body.
+ *
+ * @param {boolean} [isScrollLocked] - Should the scroll be locked?
+ */
+export const useScrollLock = (isScrollLocked = false) => {
+  const scrollbarWidth = useScrollBarWidth();
+  const initialStyles = useRef<Styles | null>(null);
+  const lockedStyles: Styles = useMemo(() => {
+    return {
+      overflow: 'hidden',
+      paddingRight: `calc(${
+        initialStyles.current?.paddingRight ?? 0
+      } + ${scrollbarWidth}px)`,
+    };
+  }, [scrollbarWidth]);
+
+  useEffect(() => {
+    const computedStyle =
+      typeof window === 'undefined'
+        ? undefined
+        : window.getComputedStyle(document.body);
+
+    initialStyles.current = {
+      overflow: computedStyle?.overflow ?? '',
+      paddingRight: computedStyle?.paddingRight ?? '',
+    };
+  }, []);
+
+  const lockScroll = useCallback(() => {
+    document.body.style.overflow = lockedStyles.overflow;
+    document.body.style.paddingRight = lockedStyles.paddingRight;
+  }, [lockedStyles]);
+
+  const unlockScroll = useCallback(() => {
+    document.body.style.overflow = initialStyles.current?.overflow ?? '';
+    document.body.style.paddingRight =
+      initialStyles.current?.paddingRight ?? '';
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+
+    if (isScrollLocked) lockScroll();
+
+    return () => {
+      unlockScroll();
+    };
+  }, [isScrollLocked, lockScroll, unlockScroll]);
+};
diff --git a/src/utils/hooks/use-scrollbar-width/index.ts b/src/utils/hooks/use-scrollbar-width/index.ts
new file mode 100644
index 0000000..932c9bd
--- /dev/null
+++ b/src/utils/hooks/use-scrollbar-width/index.ts
@@ -0,0 +1 @@
+export * from './use-scrollbar-width';
diff --git a/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts
new file mode 100644
index 0000000..04148be
--- /dev/null
+++ b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from '@jest/globals';
+import { renderHook } from '@testing-library/react';
+import { useScrollBarWidth } from './use-scrollbar-width';
+
+describe('useScrollbarWidth', () => {
+  it('returns the scrollbar width', () => {
+    const { result } = renderHook(() => useScrollBarWidth());
+
+    // JSdom always return 0 for measurements.
+    expect(result.current).toBe(0);
+  });
+});
diff --git a/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts
new file mode 100644
index 0000000..19bfebc
--- /dev/null
+++ b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts
@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * Retrieve the scrollbar width of the window.
+ *
+ * @returns {number} The scrollbar width.
+ */
+export const getScrollbarWidth = (): number => {
+  const defaultWidth = 15;
+
+  if (typeof window === 'undefined') return defaultWidth;
+
+  return window.document.body.clientWidth
+    ? window.innerWidth - window.document.body.clientWidth
+    : 0;
+};
+
+/**
+ * React hook to retrieve the current scrollbar width of the window.
+ *
+ * @returns {number} The scrollbar width.
+ */
+export const useScrollBarWidth = (): number => {
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
+
+  const updateScrollbarWidth = useCallback(() => {
+    setScrollbarWidth(getScrollbarWidth());
+  }, []);
+
+  useEffect(() => {
+    updateScrollbarWidth();
+    window.addEventListener('resize', updateScrollbarWidth);
+    window.addEventListener('orientationchange', updateScrollbarWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateScrollbarWidth);
+      window.removeEventListener('orientationchange', updateScrollbarWidth);
+    };
+  }, [updateScrollbarWidth]);
+
+  return scrollbarWidth;
+};