@faststore/components 2.0.54-alpha.0 → 2.0.57-alpha.0

package/dist/molecules/Table/Table.d.ts

@@ -22,5 +22,5 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
      */
     nonce?: string | undefined;
 }
-declare const Table: React.ForwardRefExoticComponent<Pick<PropsWithChildren<TableProps>, "slot" | "style" | "summary" | "title" | "testId" | "variant" | "aria-label" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "key" | "align" | "bgcolor" | "border" | "cellPadding" | "cellSpacing" | "frame" | "rules"> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<Pick<PropsWithChildren<TableProps>, "slot" | "style" | "summary" | "title" | "children" | "testId" | "variant" | "aria-label" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "key" | "align" | "bgcolor" | "border" | "cellPadding" | "cellSpacing" | "frame" | "rules"> & React.RefAttributes<HTMLTableElement>>;
 export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.54-alpha.0",
+  "version": "2.0.57-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "7173ea0bec153905a6b800d002401b5c27fd3213"
+  "gitHead": "a9310e34894883ae71d8bdb32402c3a17b419078"
 }

package/src/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+interface Size {
+  width: string
+  height: string
+}
+
+export type BorderStyle = 'regular' | 'pill' | 'circle'
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Control whether skeleton should be visible or not.
+   */
+  loading?: boolean
+  /**
+   * Control whether the shimmer effect should be displayed or not.
+   */
+  shimmer?: boolean
+  /**
+   * Specifies the skeleton element size (width, height).
+   */
+  size: Size
+  /**
+   * Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
+   */
+  border?: BorderStyle
+  /**
+   * Custom border radius for skeleton elements.
+   */
+  borderRadius?: string
+}
+
+const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonProps>>(
+  function Skeleton(
+    {
+      testId = 'fs-skeleton',
+      loading = true,
+      shimmer = true,
+      children,
+      size,
+      border,
+      borderRadius,
+      ...otherProps
+    },
+    ref
+  ) {
+    const styles = {
+      width: size.width,
+      height: size.height,
+    }
+
+    return loading ? (
+      <div
+        ref={ref}
+        data-fs-skeleton
+        data-testid={testId}
+        data-fs-skeleton-border={border ? border : null}
+        style={
+          borderRadius ? { ...styles, borderRadius: borderRadius } : styles
+        }
+        {...otherProps}
+      >
+        {shimmer && <div data-fs-skeleton-shimmer />}
+      </div>
+    ) : (
+      <>{children}</>
+    )
+  }
+)
+
+export default Skeleton

package/src/atoms/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

package/src/hooks/UIProvider.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { createContext, useContext, useMemo, useReducer } from 'react'
+import type { PropsWithChildren } from 'react'
+
+interface Toast {
+  message: string
+  status: 'ERROR' | 'WARNING' | 'INFO'
+  title?: string
+  icon?: string
+}
+
+interface State {
+  /** Cart sidebar */
+  cart: boolean
+  /** Region modal */
+  modal: boolean
+  /** Menu slider */
+  navbar: boolean
+  /** Search page filter slider */
+  filter: boolean
+  toasts: Toast[]
+}
+
+type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
+
+type Action =
+  | {
+      type: 'open'
+      payload: UIElement
+    }
+  | {
+      type: 'close'
+      payload: UIElement
+    }
+  | {
+      type: 'pushToast'
+      payload: Toast
+    }
+  | {
+      type: 'popToast'
+    }
+
+const reducer = (state: State, action: Action): State => {
+  const { type } = action
+
+  switch (type) {
+    case 'open': {
+      const { payload } = action
+
+      document.body.classList.add('no-scroll')
+
+      return {
+        ...state,
+        [payload]: true,
+      }
+    }
+
+    case 'close': {
+      const { payload } = action
+
+      document.body.classList.remove('no-scroll')
+
+      return {
+        ...state,
+        [payload]: false,
+      }
+    }
+
+    case 'pushToast': {
+      return {
+        ...state,
+        toasts: [...state.toasts, action.payload],
+      }
+    }
+
+    case 'popToast': {
+      return {
+        ...state,
+        toasts: state.toasts.slice(1),
+      }
+    }
+
+    default:
+      throw new Error(`Action ${type} not implemented`)
+  }
+}
+
+const initializer = (): State => ({
+  cart: false,
+  modal: false,
+  navbar: false,
+  filter: false,
+  toasts: [],
+})
+
+interface Context extends State {
+  closeNavbar: () => void
+  openNavbar: () => void
+  closeFilter: () => void
+  openFilter: () => void
+  openCart: () => void
+  closeCart: () => void
+  openModal: () => void
+  closeModal: () => void
+  pushToast: (data: Toast) => void
+  popToast: () => void
+}
+
+const UIContext = createContext<Context | undefined>(undefined)
+
+function UIProvider({ children }: PropsWithChildren) {
+  const [ui, dispatch] = useReducer(reducer, undefined, initializer)
+
+  const callbacks = useMemo(
+    () => ({
+      openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
+      closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
+      openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
+      closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
+      openCart: () => dispatch({ type: 'open', payload: 'cart' }),
+      closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
+      openModal: () => dispatch({ type: 'open', payload: 'modal' }),
+      closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
+      pushToast: (toast: Toast) =>
+        dispatch({ type: 'pushToast', payload: toast }),
+      popToast: () => dispatch({ type: 'popToast' }),
+    }),
+    []
+  )
+
+  const value = useMemo(
+    () => ({
+      ...ui,
+      ...callbacks,
+    }),
+    [callbacks, ui]
+  )
+
+  return <UIContext.Provider value={value}>{children}</UIContext.Provider>
+}
+
+export function useUI() {
+  const context = useContext(UIContext)
+
+  if (context === undefined) {
+    throw new Error('Missing UI context on React tree')
+  }
+
+  return context
+}
+
+export default UIProvider

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as UIProvider, useUI } from './UIProvider'
+export { useFadeEffect } from './useFadeEffect'
+export { useTrapFocus } from './useTrapFocus'

package/src/hooks/useFadeEffect.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback, useEffect } from 'react'
+
+export const useFadeEffect = () => {
+  const [fade, setFade] = useState<'in' | 'out'>('out')
+  const fadeOut = useCallback(() => setFade('out'), [])
+  const fadeIn = useCallback(() => setFade('in'), [])
+
+  useEffect(() => {
+    fadeIn()
+
+    return () => {
+      fadeOut()
+    }
+  }, [fadeIn, fadeOut])
+
+  return {
+    fade,
+    fadeIn,
+    fadeOut,
+  }
+}

package/src/hooks/useTrapFocus.ts

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react'
+import type { RefObject } from 'react'
+import type { FocusableElement } from 'tabbable'
+import { tabbable } from 'tabbable'
+
+interface TrapFocusParams {
+  beforeElementRef: RefObject<HTMLElement>
+  trapFocusRef: RefObject<HTMLElement>
+  afterElementRef: RefObject<HTMLElement>
+}
+
+/*
+ * Element that will maintain the focus inside trapFocusRef, focus the first element,
+ * and focus back on the element that was in focus when useTrapFocus was triggered.
+ *
+ * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+ */
+export const useTrapFocus = ({
+  trapFocusRef,
+  beforeElementRef,
+  afterElementRef,
+}: TrapFocusParams) => {
+  const tabbableNodesRef = useRef<FocusableElement[]>()
+  const nodeToRestoreRef = useRef<HTMLElement | null>(
+    document.hasFocus() ? (document.activeElement as HTMLElement) : null
+  )
+
+  // Focus back on the element that was focused when useTrapFocus is triggered.
+  useEffect(() => {
+    const nodeToRestore = nodeToRestoreRef.current
+
+    return () => {
+      nodeToRestore?.focus()
+    }
+  }, [nodeToRestoreRef])
+
+  // Set focus on first tabbable element
+  useEffect(() => {
+    if (!trapFocusRef.current) {
+      return
+    }
+
+    if (!tabbableNodesRef.current) {
+      tabbableNodesRef.current = tabbable(trapFocusRef.current)
+    }
+
+    const [firstTabbable] = tabbableNodesRef.current
+
+    if (!firstTabbable) {
+      trapFocusRef.current.focus()
+
+      return
+    }
+
+    firstTabbable.focus()
+  }, [trapFocusRef])
+
+  // Handle loop focus. Set keydown and focusin event listeners
+  useEffect(() => {
+    if (
+      !trapFocusRef.current ||
+      !beforeElementRef.current ||
+      !afterElementRef.current
+    ) {
+      return
+    }
+
+    const beforeElement = beforeElementRef.current
+    const afterElement = afterElementRef.current
+    const trapFocus = trapFocusRef.current
+
+    const handleLoopFocus = (nativeEvent: FocusEvent) => {
+      if (!document.hasFocus()) {
+        return
+      }
+
+      tabbableNodesRef.current = tabbable(trapFocusRef.current!)
+
+      if (!tabbableNodesRef.current.length) {
+        trapFocus.focus()
+      }
+
+      /*
+       * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
+       * It will focus the last element of the trapFocusRef.
+       */
+      if (nativeEvent.target === beforeElement) {
+        tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus()
+      }
+
+      /*
+       * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
+       * It will focus the first element of the trapFocusRef.
+       */
+      if (nativeEvent.target === afterElement) {
+        tabbableNodesRef.current[0]?.focus()
+      }
+    }
+
+    beforeElement?.addEventListener('focusin', handleLoopFocus)
+    afterElement?.addEventListener('focusin', handleLoopFocus)
+
+    return () => {
+      beforeElement?.removeEventListener('focusin', handleLoopFocus)
+      afterElement?.removeEventListener('focusin', handleLoopFocus)
+    }
+  }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef])
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 // Assets
 export * from './assets'
 
+// Hooks
+export * from './hooks'
+
 // Atoms
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
@@ -26,6 +29,8 @@ export { default as Price } from './atoms/Price'
 export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
+export { default as Skeleton } from './atoms/Skeleton'
+export type { SkeletonProps } from './atoms/Skeleton'
 export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
 export { default as Slider } from './atoms/Slider'
@@ -66,11 +71,7 @@ export type {
   DropdownItemProps,
   DropdownMenuProps,
 } from './molecules/Dropdown'
-export {
-  default as Gift,
-  GiftContent,
-  GiftImage,
-} from './molecules/Gift'
+export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
 export type {
   GiftProps,
   GiftContentProps,
@@ -80,16 +81,12 @@ export { default as InputField } from './molecules/InputField'
 export type { InputFieldProps } from './molecules/InputField'
 export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
+export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
+export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
-export {
-  default as RadioGroup,
-  RadioOption,
-} from './molecules/RadioGroup'
-export type {
-  RadioGroupProps,
-  RadioOptionProps,
-} from './molecules/RadioGroup'
+export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
+export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
 export { default as SelectField } from './molecules/SelectField'

package/src/molecules/Modal/Modal.tsx

@@ -0,0 +1,106 @@
+import type {
+  AriaAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react'
+import React from 'react'
+import { createPortal } from 'react-dom'
+
+import { Overlay } from '../..'
+import { useFadeEffect, useUI } from '../../hooks'
+import type { ModalContentProps } from './ModalContent'
+import ModalContent from './ModalContent'
+
+export type ModalChildrenProps = {
+  fade: 'in' | 'out'
+  fadeOut: () => void
+  fadeIn: () => void
+}
+
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode
+
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
+   */
+  'aria-labelledby'?: AriaAttributes['aria-label']
+  /**
+   * A boolean value that represents the state of the Modal
+   */
+  isOpen?: boolean
+  /**
+   * Event emitted when the modal is closed
+   */
+  onDismiss?: () => void
+  /**
+   * Children or function as a children
+   */
+  children: ModalChildrenFunction | ReactNode
+}
+
+/*
+ * This component is based on @reach/dialog.
+ * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
+ * https://reach.tech/dialog
+ */
+
+const Modal = ({
+  children,
+  testId = 'fs-modal',
+  isOpen = true,
+  onDismiss,
+  ...otherProps
+}: ModalProps) => {
+  const { closeModal } = useUI()
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
+
+  const handleBackdropClick = (event: MouseEvent) => {
+    if (event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  const handleBackdropKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) {
+      return
+    }
+
+    event.stopPropagation()
+    fadeOut?.()
+    onDismiss?.()
+  }
+
+  return isOpen
+    ? createPortal(
+        <Overlay
+          onClick={handleBackdropClick}
+          onKeyDown={handleBackdropKeyDown}
+        >
+          <ModalContent
+            onTransitionEnd={() => fade === 'out' && closeModal()}
+            data-fs-modal
+            data-fs-modal-state={fade}
+            testId={testId}
+            {...otherProps}
+          >
+            {typeof children === 'function'
+              ? children({ fade, fadeOut, fadeIn })
+              : children}
+          </ModalContent>
+        </Overlay>,
+        document.body
+      )
+    : null
+}
+
+export default Modal

package/src/molecules/Modal/ModalBody.tsx

@@ -0,0 +1,13 @@
+import React, { ReactNode, HTMLAttributes } from 'react'
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+const ModalBody = ({ children, ...otherProps }: ModalBodyProps) => (
+  <div data-fs-modal-body {...otherProps}>
+    {children}
+  </div>
+)
+
+export default ModalBody

package/src/molecules/Modal/ModalContent.tsx

@@ -0,0 +1,90 @@
+import type {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  MouseEvent,
+  RefObject,
+} from 'react'
+import React, { useRef } from 'react'
+
+import { useTrapFocus } from '../../hooks'
+
+interface ModalContentPureProps
+  extends Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    'ref'
+  > {
+  beforeElementRef: RefObject<HTMLDivElement>
+  trapFocusRef: RefObject<HTMLDivElement>
+  afterElementRef: RefObject<HTMLDivElement>
+  testId?: string
+}
+
+const ModalContentPure = ({
+  beforeElementRef,
+  trapFocusRef,
+  afterElementRef,
+  testId = 'store-modal-content',
+  children,
+  ...otherProps
+}: ModalContentPureProps) => {
+  return (
+    <>
+      <div
+        ref={beforeElementRef}
+        data-testid="beforeElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+      <div
+        data-fs-modal-content
+        data-testid={testId}
+        ref={trapFocusRef}
+        aria-modal="true"
+        role="dialog"
+        tabIndex={-1}
+        {...otherProps}
+      >
+        {children}
+      </div>
+      <div
+        ref={afterElementRef}
+        data-testid="afterElement"
+        tabIndex={0}
+        aria-hidden="true"
+      />
+    </>
+  )
+}
+
+export type ModalContentProps = Omit<
+  ModalContentPureProps,
+  'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'
+>
+
+const ModalContent = ({ children, ...otherProps }: ModalContentProps) => {
+  const trapFocusRef = useRef<HTMLDivElement>(null)
+  const beforeElementRef = useRef<HTMLDivElement>(null)
+  const afterElementRef = useRef<HTMLDivElement>(null)
+
+  useTrapFocus({
+    beforeElementRef,
+    trapFocusRef,
+    afterElementRef,
+  })
+
+  return (
+    <ModalContentPure
+      {...otherProps}
+      trapFocusRef={trapFocusRef}
+      beforeElementRef={beforeElementRef}
+      afterElementRef={afterElementRef}
+      onClick={(event: MouseEvent) => {
+        event.stopPropagation()
+      }}
+    >
+      {children}
+    </ModalContentPure>
+  )
+}
+
+export default ModalContent