@faststore/components 2.0.53-alpha.0 → 2.0.56-alpha.0

package/dist/molecules/Modal/ModalHeader.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+import { IconButtonProps } from '../IconButton';
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title for header modal.
+     */
+    title: string;
+    /**
+     * Description for header modal.
+     */
+    description?: string;
+    /**
+     * Props for the Close Button component.
+     */
+    closeButtonProps?: Partial<Omit<IconButtonProps, 'onClick'>>;
+    onClose?: () => void;
+}
+declare const ModalHeader: ({ onClose, title, closeButtonProps, description, }: ModalHeaderProps) => JSX.Element;
+export default ModalHeader;

package/dist/molecules/Modal/ModalHeader.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { X } from '../../assets';
+import IconButton from '../IconButton';
+const ModalHeader = ({ onClose, title, closeButtonProps = {}, description, }) => {
+    return (React.createElement("header", { "data-fs-modal-header": true },
+        onClose && (React.createElement(IconButton, { onClick: () => onClose?.(), "data-fs-modal-header-close-button": true, icon: React.createElement(X, null), "aria-label": "Close modal", ...closeButtonProps })),
+        React.createElement("p", { "data-fs-modal-header-title": true }, title),
+        description && React.createElement("p", { "data-fs-modal-header-description": true }, description)));
+};
+export default ModalHeader;
+//# sourceMappingURL=ModalHeader.js.map

package/dist/molecules/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAChC,OAAO,UAA+B,MAAM,eAAe,CAAA;AAqB3D,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,KAAK,EACL,gBAAgB,GAAG,EAAE,EACrB,WAAW,GACM,EAAE,EAAE;IACrB,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,6CAE1B,IAAI,EAAE,oBAAC,CAAC,OAAG,gBACA,aAAa,KACpB,gBAAgB,GACpB,CACH;QACD,iEAA+B,KAAK,CAAK;QACxC,WAAW,IAAI,uEAAqC,WAAW,CAAK,CAC9D,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+export type { ModalProps } from './Modal';
+export type { ModalHeaderProps } from './ModalHeader';

package/dist/molecules/Modal/index.js

@@ -0,0 +1,4 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+//# sourceMappingURL=index.js.map

package/dist/molecules/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

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/dist/organisms/PriceRange/PriceRange.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { AriaAttributes } from 'react';
+import type { PriceProps, SliderProps } from '../../index';
+export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
+    /**
+     * The current use case variant for prices.
+     */
+    variant?: PriceProps['variant'];
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: PriceProps['formatter'];
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+};
+type PriceRangeRefType = {
+    setPriceRangeValues: (values: {
+        min: number;
+        max: number;
+    }) => void;
+};
+declare const PriceRange: React.ForwardRefExoticComponent<Omit<SliderProps, "absoluteValuesLabel"> & {
+    /**
+     * The current use case variant for prices.
+     */
+    variant?: PriceProps['variant'];
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: PriceProps['formatter'];
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+} & React.RefAttributes<PriceRangeRefType | undefined>>;
+export default PriceRange;

package/dist/organisms/PriceRange/PriceRange.js

@@ -0,0 +1,75 @@
+import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { Price, Slider, InputField } from '../../index';
+const PriceRange = forwardRef(function PriceRange({ formatter, max, min, step = 1, onChange, onEnd, testId = 'fs-price-range', variant, 'aria-label': ariaLabel, ...otherProps }, ref) {
+    const sliderRef = useRef();
+    useImperativeHandle(ref, () => ({
+        setPriceRangeValues: (values) => {
+            onChange?.(values);
+            sliderRef.current?.setSliderValues(values);
+        },
+    }));
+    const inputMinRef = useRef(null);
+    const inputMaxRef = useRef(null);
+    const [inputMinError, setInputMinError] = useState();
+    const [inputMaxError, setInputMaxError] = useState();
+    const [priceRange, setPriceRange] = useState({
+        min: Math.floor(min.selected),
+        max: Math.round(max.selected),
+    });
+    function onChangePriceRange(value) {
+        setInputMinError(undefined);
+        setInputMaxError(undefined);
+        setPriceRange({ min: value.min, max: value.max });
+        if (inputMinRef.current?.value) {
+            inputMinRef.current.value = String(value.min);
+        }
+        if (inputMaxRef.current?.value) {
+            inputMaxRef.current.value = String(value.max);
+        }
+    }
+    function onChangeInputMin(value) {
+        setInputMinError(undefined);
+        if (Number(value) < Math.floor(min.absolute)) {
+            return;
+        }
+        if (Number(value) > Math.floor(priceRange.max)) {
+            setInputMinError(`Min price can't be greater than max`);
+        }
+        setPriceRange({ ...priceRange, min: Number(value) });
+        sliderRef.current?.setSliderValues({
+            ...priceRange,
+            min: Number(value),
+        });
+    }
+    function onChangeInputMax(value) {
+        setInputMaxError(undefined);
+        if (Number(value) > Math.round(max.absolute)) {
+            return;
+        }
+        if (Number(value) < Math.round(priceRange.min)) {
+            setInputMaxError(`Max price can't be smaller than min`);
+        }
+        setPriceRange({ ...priceRange, max: Number(value) });
+        sliderRef.current?.setSliderValues({
+            ...priceRange,
+            max: Number(value),
+        });
+    }
+    return (React.createElement("div", { "data-fs-price-range": true, "data-testid": testId, ...otherProps },
+        React.createElement(Slider, { ref: sliderRef, min: min, max: max, step: step, onEnd: (value) => {
+                onEnd?.(value);
+                onChangePriceRange(value);
+            }, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), absoluteValuesLabel: {
+                min: (React.createElement(Price, { value: Math.floor(min.absolute), variant: variant, formatter: formatter })),
+                max: (React.createElement(Price, { value: Math.round(max.absolute), variant: variant, formatter: formatter })),
+            }, minValueLabelComponent: (minValue) => {
+                return (React.createElement(Price, { value: minValue, variant: variant, formatter: formatter }));
+            }, maxValueLabelComponent: (maxValue) => {
+                return (React.createElement(Price, { value: maxValue, variant: variant, formatter: formatter }));
+            } }),
+        React.createElement("div", { "data-fs-price-range-inputs": true },
+            React.createElement(InputField, { id: "price-range-min", step: step, label: "Min", type: "number", inputMode: "numeric", error: inputMinError, inputRef: inputMinRef, min: Math.floor(min.absolute), max: priceRange.max, value: priceRange.min, onChange: (e) => onChangeInputMin(e.target.value), onBlur: () => !inputMinError && onEnd?.(priceRange) }),
+            React.createElement(InputField, { id: "price-range-max", label: "Max", step: step, type: "number", inputMode: "numeric", error: inputMaxError, inputRef: inputMaxRef, max: Math.round(max.absolute), min: priceRange.min, value: priceRange.max, onChange: (e) => onChangeInputMax(e.target.value), onBlur: () => !inputMaxError && onEnd?.(priceRange) }))));
+});
+export default PriceRange;
+//# sourceMappingURL=PriceRange.js.map

package/dist/organisms/PriceRange/PriceRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/organisms/PriceRange/PriceRange.tsx"],"names":[],"mappings":"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"}

package/dist/organisms/PriceRange/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './PriceRange';
+export type { PriceRangeProps } from './PriceRange';

package/dist/organisms/PriceRange/index.js

@@ -0,0 +1,2 @@
+export { default } from './PriceRange';
+//# sourceMappingURL=index.js.map

package/dist/organisms/PriceRange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/PriceRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.53-alpha.0",
+  "version": "2.0.56-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": "a9a211450d2173e08fd8b8dcf4a6da4d78590a71"
+  "gitHead": "6afa204ec28032832e3867f805fbc5bcbbed4aab"
 }

package/src/atoms/Slider/Slider.tsx

@@ -0,0 +1,220 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+import React, {
+  useState,
+  useMemo,
+  useImperativeHandle,
+  forwardRef,
+} from 'react'
+import type { ReactNode } from 'react'
+
+interface Range {
+  absolute: number
+  selected: number
+}
+
+interface RangeLabel {
+  min: string | ReactNode
+  max: string | ReactNode
+}
+
+export type SliderProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   *
+   * @default 'fs-slider'
+   */
+  testId?: string
+  /**
+   * The minimum value of the slider.
+   */
+  min: Range
+  /**
+   * The maximum value of the slider.
+   */
+  max: Range
+  /**
+   * Specifies the number interval to be used in the inputs.
+   */
+  step?: number
+  /**
+   * Specifies the absolute values labels.
+   */
+  absoluteValuesLabel: RangeLabel
+  /**
+   * Callback that fires when the slider value changes.
+   */
+  onChange?: (value: { min: number; max: number }) => void
+  /**
+   * Callback that fires when the slider value ends changing.
+   */
+  onEnd?: (value: { min: number; max: number }) => void
+  /**
+   * A function used to set a human-readable value text based on the slider's current value.
+   */
+  getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
+  /**
+   * Component that renders min value label above the left thumb.
+   */
+  minValueLabelComponent?: (minValue: number) => ReactNode
+  /**
+   * Component that renders max value label above the right thumb.
+   */
+  maxValueLabelComponent?: (maxValue: number) => ReactNode
+}
+
+type SliderRefType = {
+  setSliderValues: (values: { min: number; max: number }) => void
+}
+
+const percent = (value: number, min: number, max: number) =>
+  Math.round(((value - min) / (max - min)) * 100)
+
+const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
+  function Slider(
+    {
+      min,
+      max,
+      absoluteValuesLabel,
+      onChange,
+      onEnd,
+      testId = 'fs-slider',
+      getAriaValueText,
+      step,
+      minValueLabelComponent,
+      maxValueLabelComponent,
+      ...otherProps
+    },
+    ref
+  ) {
+    const widthPercent = useMemo(
+      () => (max.absolute - min.absolute) / 100,
+      [max.absolute, min.absolute]
+    )
+    const [minPercent, setMinPercent] = useState(() =>
+      percent(min.selected, min.absolute, max.absolute)
+    )
+
+    const [maxPercent, setMaxPercent] = useState(() =>
+      percent(max.selected, min.absolute, max.absolute)
+    )
+
+    const [minVal, setMinVal] = useState(() =>
+      Math.floor(min.absolute + minPercent * widthPercent)
+    )
+    const [maxVal, setMaxVal] = useState(() =>
+      Math.round(min.absolute + maxPercent * widthPercent)
+    )
+
+    const percentage = (value: number) => (value / max.absolute) * 100
+
+    useImperativeHandle(ref, () => ({
+      setSliderValues: (values: { min: number; max: number }) => {
+        const sliderMinValue = Math.min(Number(values.min), maxVal)
+        setMinVal(sliderMinValue)
+        setMinPercent(percent(sliderMinValue, min.absolute, max.absolute))
+
+        if (values.max > max.absolute) {
+          setMaxVal(max.absolute)
+          setMaxPercent(percent(max.absolute, min.absolute, max.absolute))
+          return
+        }
+
+        const sliderMaxValue = Math.max(Number(values.max), minVal)
+        setMaxVal(sliderMaxValue)
+        setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute))
+      },
+    }))
+
+    return (
+      <div data-fs-slider data-testid={testId}>
+        <div data-fs-slider-absolute-values>
+          <span>{absoluteValuesLabel.min}</span>
+          <span>{absoluteValuesLabel.max}</span>
+        </div>
+        <div data-fs-slider-wrapper>
+          <div
+            data-fs-slider-range
+            style={{
+              left: `${minPercent}%`,
+              width: `${maxPercent - minPercent}%`,
+            }}
+          />
+          <input
+            type="range"
+            min={Math.floor(min.absolute)}
+            max={Math.round(max.absolute)}
+            value={minVal}
+            step={step}
+            onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
+            onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
+            onChange={(event) => {
+              const minValue = Math.min(Number(event.target.value), maxVal)
+
+              setMinVal(minValue)
+              setMinPercent(percent(minValue, min.absolute, max.absolute))
+              onChange?.({ min: minValue, max: maxVal })
+            }}
+            data-fs-slider-thumb="left"
+            aria-valuemin={min.absolute}
+            aria-valuemax={max.absolute}
+            aria-valuenow={minVal}
+            aria-label={String(minVal)}
+            aria-labelledby={getAriaValueText?.(minVal, 'min')}
+            {...otherProps}
+          />
+          {minValueLabelComponent && (
+            <span
+              data-fs-slider-value-label="min"
+              style={{
+                left: `calc(${percentage(minVal)}% + (${
+                  8 - percentage(minVal) * 0.2
+                }px))`,
+              }}
+            >
+              {minValueLabelComponent(minVal)}
+            </span>
+          )}
+
+          <input
+            type="range"
+            min={Math.floor(min.absolute)}
+            max={Math.round(max.absolute)}
+            value={maxVal}
+            step={step}
+            onMouseUp={() => onEnd?.({ min: minVal, max: maxVal })}
+            onTouchEnd={() => onEnd?.({ min: minVal, max: maxVal })}
+            onChange={(event) => {
+              const maxValue = Math.max(Number(event.target.value), minVal)
+
+              setMaxVal(maxValue)
+              setMaxPercent(percent(maxValue, min.absolute, max.absolute))
+              onChange?.({ min: minVal, max: maxValue })
+            }}
+            data-fs-slider-thumb="right"
+            aria-valuemin={min.absolute}
+            aria-valuemax={max.absolute}
+            aria-valuenow={maxVal}
+            aria-label={String(maxVal)}
+            aria-labelledby={getAriaValueText?.(maxVal, 'max')}
+          />
+          {maxValueLabelComponent && (
+            <span
+              data-fs-slider-value-label="max"
+              style={{
+                left: `calc(${percentage(maxVal)}% + (${
+                  8 - percentage(maxVal) * 0.2
+                }px))`,
+              }}
+            >
+              {maxValueLabelComponent(maxVal)}
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+export default Slider

package/src/atoms/Slider/index.ts

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

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,
+  }
+}