@qoretechnologies/reqore 0.29.1 → 0.29.3

package/src/components/Checkbox/index.tsx

@@ -52,6 +52,8 @@ export interface IReqoreCheckboxProps
   offText?: string | number;
   switchTextEffect?: IReqoreEffect;
   labelEffect?: IReqoreEffect;
+  margin?: 'left' | 'right' | 'both' | 'none';
+  wrapLabel?: boolean;
 }
 
 export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
@@ -78,10 +80,10 @@ const StyledSwitchToggle = styled.div`
       : !checked
       ? parentEffect?.gradient
         ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 1), 0.2)
-        : theme.main
+        : changeLightness(theme.main, 0.2)
       : parentEffect?.gradient
       ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 2), 0.2)
-      : theme.main};
+      : changeLightness(theme.main, 0.25)};
 `;
 
 const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
@@ -90,6 +92,7 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
@@ -97,11 +100,7 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.25 : 0.2)};
   border-radius: 50px;
 
-  margin-right: ${({ size }) => PADDING_FROM_SIZE[size]}px;
-  margin-left: ${({ size }) => PADDING_FROM_SIZE[size]}px;
-
-  background-color: ${({ theme, checked }) =>
-    checked ? rgba(changeLightness(theme.main, 0.15), 0.5) : 'transparent'};
+  background-color: ${({ theme }) => rgba(changeLightness(theme.main, 0.3), 0.1)};
 
   ${StyledIconWrapper} {
     z-index: 1;
@@ -117,13 +116,15 @@ const StyledSwitchTextWrapper = styled(StyledTextEffect)`
 `;
 
 const StyledOnSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
-  color: ${({ theme, checked }) =>
-    getReadableColorFrom(!checked ? theme.originalMain : theme.main)};
+  color: ${({ theme, checked, parentHasGradient }) =>
+    !parentHasGradient &&
+    getReadableColorFrom(checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
 `;
 
 const StyledOffSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
-  color: ${({ theme, checked }) =>
-    getReadableColorFrom(!checked ? theme.main : changeLightness(theme.main, 0.1))};
+  color: ${({ theme, checked, parentHasGradient }) =>
+    !parentHasGradient &&
+    getReadableColorFrom(checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
@@ -170,6 +171,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       labelDetail,
       labelDetailPosition = 'right',
       size = 'normal',
+      margin = 'left',
       checked,
       disabled,
       className,
@@ -187,6 +189,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       intent,
       effect,
       customTheme,
+      wrapLabel,
       ...rest
     }: IReqoreCheckboxProps,
     ref
@@ -221,17 +224,24 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         readOnly={readOnly}
         className={`${className || ''} reqore-checkbox reqore-control`}
       >
+        {margin === 'left' || margin === 'both' ? (
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+        ) : null}
         {label && labelPosition === 'left' ? (
           <>
-            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
               active={checked}
-              effect={{ ...labelEffect, interactive: !disabled && !readOnly && !checked }}
+              effect={{
+                ...labelEffect,
+                interactive: !disabled && !readOnly && !checked,
+                noWrap: !wrapLabel,
+              }}
             >
               {label}
             </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
+            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
           </>
         ) : null}
         {asSwitch ? (
@@ -241,7 +251,12 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
             checked={checked}
             theme={theme}
             as='div'
-            effect={effect}
+            effect={
+              {
+                interactive: !disabled && !readOnly,
+                ...effect,
+              } as IReqoreEffect
+            }
           >
             <>
               {offText || offText === 0 ? (
@@ -250,6 +265,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
                   size={size}
                   theme={theme}
                   checked={checked}
+                  parentHasGradient={!!effect?.gradient}
                   effect={
                     {
                       uppercase: true,
@@ -278,13 +294,14 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
                   size={size}
                   theme={theme}
                   checked={checked}
+                  parentHasGradient={!!effect?.gradient}
                   effect={
                     {
                       uppercase: true,
                       textSize: getOneLessSize(size),
                       weight: 'thick',
                       ...switchTextEffect,
-                      opacity: checked ? 1 : 0.5,
+                      opacity: checked ? 1 : 0.3,
                     } as IReqoreEffect
                   }
                 >
@@ -330,22 +347,29 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
             }
             image={image}
             effect={{ grayscale: image ? !checked : undefined, opacity: checked ? 1 : 0.5 }}
-            margin='both'
-            intent={intent}
+            color={intent ? changeLightness(theme.main, 0.2) : undefined}
           />
         )}
         {label && labelPosition === 'right' ? (
           <>
+            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
               active={checked}
-              effect={{ ...labelEffect, interactive: !disabled && !readOnly && !checked }}
+              effect={{
+                ...labelEffect,
+                interactive: !disabled && !readOnly && !checked,
+                noWrap: !wrapLabel,
+              }}
             >
               {label}
             </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
           </>
         ) : null}
+        {margin === 'right' || margin === 'both' ? (
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+        ) : null}
       </StyledCheckbox>
     );
   }

package/src/components/ControlGroup/index.tsx

@@ -50,19 +50,20 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
 
             border-radius: ${({ stack }) => (!stack ? undefined : 0)};
 
-            ${({ rounded, size }) =>
-              rounded &&
-              css`
-                &:first-child {
-                  border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
+            ${({ rounded, size, stack }) =>
+              rounded && stack
+                ? css`
+                    &:first-child {
+                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
 
-                &:last-child {
-                  border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
-              `}
+                    &:last-child {
+                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
+                  `
+                : undefined}
           }
 
           > .reqore-control-wrapper:not(:last-child) .reqore-control {
@@ -84,19 +85,20 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
 
             border-radius: ${({ stack }) => (!stack ? undefined : 0)};
 
-            ${({ rounded, size }) =>
-              rounded &&
-              css`
-                &:first-child {
-                  border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
+            ${({ rounded, size, stack }) =>
+              rounded && stack
+                ? css`
+                    &:first-child {
+                      border-top-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-left-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
 
-                &:last-child {
-                  border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                  border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
-                }
-              `}
+                    &:last-child {
+                      border-top-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                      border-bottom-right-radius: ${RADIUS_FROM_SIZE[size]}px;
+                    }
+                  `
+                : undefined}
           }
         `}
 `;

package/src/components/Effect/index.tsx

@@ -1,6 +1,7 @@
 import { rgba } from 'polished';
 import { HTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
+import { Colors } from '../../constants/colors';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import {
@@ -23,12 +24,21 @@ export type TReqoreEffectColor =
   | `${TReqoreIntent}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
   | 'main'
   | `main:${TReqoreEffectColorManipulation}`
-  | `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
+  | `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
+  | `${TReqoreHexColor}:${TReqoreEffectColorManipulation}`
+  | `${TReqoreHexColor}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
 export type TReqoreEffectColorList = [
   'main' | TReqoreIntent | TReqoreColor,
   TReqoreEffectColorManipulation | undefined,
   TReqoreEffectColorManipulationMultiplier | undefined
 ];
+export type TReqoreEffectGradientColors =
+  | 'main'
+  | TReqoreIntent
+  | TReqoreHexColor
+  | TReqoreEffectGradientColorsObject;
+export type TReqoreEffectGradientColorsObject = Record<number, TReqoreEffectColor>;
+export type TReqoreEffectGradientAnimationTrigger = 'always' | 'hover' | 'active' | 'never';
 
 export interface IReqoreEffectFilters {
   grayscale?: boolean;
@@ -45,9 +55,11 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
   gradient?: {
     type?: 'linear' | 'radial';
     shape?: 'circle' | 'ellipse';
-    colors: Record<number, TReqoreEffectColor>;
+    colors: TReqoreEffectGradientColors;
     direction?: string;
     borderColor?: TReqoreEffectColor;
+    animate?: TReqoreEffectGradientAnimationTrigger;
+    animationSpeed?: 1 | 2 | 3 | 4 | 5;
   };
   noWrap?: boolean;
   color?: TReqoreEffectColor;
@@ -61,7 +73,6 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
-    useBorder?: boolean;
   };
   interactive?: boolean;
 }
@@ -77,6 +88,19 @@ export interface IReqoreTextEffectProps
   isText?: boolean;
 }
 
+// Animate the gradient
+const StyledGradientKeyframes = keyframes`
+  0% {
+    background-position: 0% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+`;
+
 export const StyledEffect = styled.span`
   transition: all 0.2s ease-in-out;
 
@@ -154,6 +178,14 @@ export const StyledEffect = styled.span`
         }
       `}
 
+      ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
+        ? css`
+            background-size: 200% 200%;
+            animation: ${StyledGradientKeyframes} ${effect.gradient.animationSpeed || 2}s linear
+              infinite;
+          `
+        : undefined}
+
       ${effect.interactive &&
       css`
         cursor: pointer;
@@ -163,26 +195,44 @@ export const StyledEffect = styled.span`
         &:active {
           background: ${gradientActive};
           border-color: ${borderHoverColor} !important;
+
+          ${effect.gradient.animate === 'hover' ||
+          (effect.gradient.animate === 'active' && active) ||
+          effect.gradient.animate === 'always'
+            ? css`
+                background-size: 200% 200%;
+                animation: ${StyledGradientKeyframes} ${effect.gradient.animationSpeed || 2}s linear
+                  infinite;
+              `
+            : undefined}
         }
       `}
     `;
   }}
 
-  ${({ effect, theme }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, isText }: IReqoreTextEffectProps) => {
     if (!effect || !effect.glow) {
       return undefined;
     }
 
-    if (effect.glow.useBorder) {
+    if (!isText) {
       return css`
-        border: ${effect.glow.size || 2}px solid
-          ${getColorFromMaybeString(theme, effect.glow.color)} !important;
+        box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
+          ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
       `;
     }
 
+    const color = getColorFromMaybeString(
+      theme,
+      effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
+    );
+    const blur = effect.glow.blur || 0;
+
     return css`
-      box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
-        ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
+      color: ${Colors.LIGHT};
+      text-shadow: 0 0 ${blur}px ${color}, 0 0 ${blur + 5}px ${color}, 0 0 ${blur + 10}px ${color},
+        0 0 1px ${getReadableColorFrom(color)}, 0 0 2px ${getReadableColorFrom(color)},
+        0 0 3px ${getReadableColorFrom(color)};
     `;
   }}
 

package/src/components/Menu/divider.tsx

@@ -11,7 +11,7 @@ export interface IReqoreMenuDividerProps
     IWithReqoreEffect,
     IWithReqoreSize {
   label?: string | number;
-  margin?: 'left' | 'right' | 'both';
+  margin?: 'left' | 'right' | 'both' | 'none';
   align?: 'left' | 'center' | 'right';
 }
 

package/src/components/MultiSelect/index.tsx

@@ -1,6 +1,5 @@
 import { omit, size } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
 import { ReqoreDropdown, ReqoreInput } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { IPopoverControls } from '../../hooks/usePopover';
@@ -18,7 +17,7 @@ export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
 export interface IReqoreMultiSelectProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
   value?: string[];
-  onValueChange?: (value: string[]) => void;
+  onValueChange: (value: string[]) => void;
   items?: TReqoreMultiSelectItem[];
   onItemClick?: (item: IReqoreDropdownItem) => void;
   onItemClickIcon?: IReqoreTagProps['rightIcon'];
@@ -61,7 +60,15 @@ export const ReqoreMultiSelectItem = memo(
         effect={!item.intent ? item.effect || selectedItemEffect : undefined}
         size={selectedItemSize}
         onClick={onClick}
-        rightIcon={item.rightIcon || item.disabled ? undefined : onItemClickIcon}
+        rightIcon={
+          item.disabled
+            ? undefined
+            : item.rightIcon
+            ? item.rightIcon
+            : onClick
+            ? onItemClickIcon
+            : undefined
+        }
       />
     );
   }
@@ -70,7 +77,7 @@ export const ReqoreMultiSelectItem = memo(
 export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectProps>(
   (
     {
-      value,
+      value = [],
       onValueChange,
       onItemClick,
       canRemoveItems,
@@ -86,20 +93,11 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     }: IReqoreMultiSelectProps,
     ref
   ) => {
-    const [_value, setValue] = useState<string[]>(value || []);
     const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
     const [query, setQuery] = useState<string>('');
     const popoverData = useRef<IPopoverControls>(undefined);
     const [focused, setFocused] = useState<boolean>(false);
 
-    useUpdateEffect(() => {
-      onValueChange?.(_value);
-    }, [_value]);
-
-    useEffect(() => {
-      setValue(value || []);
-    }, [value]);
-
     useEffect(() => {
       if (query && !popoverData.current?.isOpen()) {
         popoverData.current?.open();
@@ -118,13 +116,13 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
     const addRemoveItem = useCallback(
       (item: TReqoreMultiSelectItem): void => {
-        if (_value.includes(item.value)) {
-          setValue(_value.filter((v) => v !== item.value));
+        if (value.includes(item.value)) {
+          onValueChange(value.filter((v) => v !== item.value));
         } else {
-          setValue([..._value, item.value]);
+          onValueChange([...value, item.value]);
         }
       },
-      [_value, value]
+      [value]
     );
 
     const handleItemSelect = useCallback(
@@ -142,7 +140,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
         setQuery('');
       },
-      [createdItems, _value]
+      [createdItems, value]
     );
 
     /*
@@ -168,7 +166,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       // Mark selected items as selected
       filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
         ...omit(item, ['actions', 'asBadge', 'rightIcon']),
-        selected: _value.includes(item.value),
+        selected: value.includes(item.value),
       }));
 
       if (query && !size(filteredItems)) {
@@ -207,7 +205,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       }
 
       return filteredItems;
-    }, [items, createdItems, query, _value]);
+    }, [items, createdItems, query, value]);
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent) => {
@@ -231,14 +229,14 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       (value: string): TReqoreMultiSelectItem => {
         return [...items, ...createdItems].find((item) => item.value === value);
       },
-      [items, createdItems, _value]
+      [items, createdItems, value]
     );
 
     return (
       <ReqoreControlGroup vertical fluid {...rest} ref={ref}>
         <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
-          {size(_value) ? (
-            _value.map((v) => (
+          {size(value) ? (
+            value.map((v) => (
               <ReqoreMultiSelectItem
                 key={v}
                 item={getItemByValue(v)}

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -34,7 +34,7 @@ import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
-import { IReqoreEffect, StyledEffect } from '../Effect';
+import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon, { StyledIconWrapper } from '../Icon';
 import { ReqoreSpacer } from '../Spacer';
@@ -275,7 +275,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       'main',
       customTheme ||
         (contentEffect?.gradient && minimal
-          ? { main: Object.values(contentEffect.gradient.colors)[0] }
+          ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
     const { targetRef } = useCombinedRefs(ref);

package/src/components/RadioGroup/index.tsx

@@ -21,6 +21,7 @@ export interface IReqoreRadioGroupProps
   asSwitch?: boolean;
   onText?: string;
   offText?: string;
+  margin?: 'left' | 'right' | 'both' | 'none';
 }
 
 const ReqoreRadioGroup = ({
@@ -33,6 +34,7 @@ const ReqoreRadioGroup = ({
   vertical = true,
   onText,
   offText,
+  margin = 'left',
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
@@ -41,8 +43,8 @@ const ReqoreRadioGroup = ({
         <ReqoreMenuDivider
           {...itemRest}
           size={size || itemRest.size}
-          effect={{ ...itemRest.effect, textAlign: 'left' }}
-          margin='left'
+          effect={{ textAlign: 'left', ...itemRest.effect }}
+          margin={margin}
           label={vertical ? itemRest.label : undefined}
         />
       ) : (

package/src/components/Spacer/index.tsx

@@ -1,8 +1,93 @@
-import styled from 'styled-components';
+import { memo } from 'react';
+import styled, { css } from 'styled-components';
+import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { changeLightness } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
+import { StyledEffect } from '../Effect';
 
-export const ReqoreSpacer = styled.div`
-  visibility: hidden;
-  height: ${({ height }) => height || 1}px;
-  width: ${({ width }) => width || 1}px;
+export const StyledSpacer = styled(StyledEffect)`
+  ${({ horizontal, vertical, width, height, lineSize }) => {
+    if (horizontal) {
+      return css`
+        margin-left: ${width / 2}px;
+        margin-right: ${width / 2}px;
+        width: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
+        vertical-align: middle;
+        display: inline-block;
+      `;
+    }
+
+    if (vertical) {
+      return css`
+        margin-top: ${height / 2}px;
+        margin-bottom: ${height / 2}px;
+        height: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        width: ${width ? `${width}px` : '100%'};
+      `;
+    }
+  }}
+
+  background-color: ${({ theme, lineSize }) =>
+    lineSize === 'none' ? 'transparent' : changeLightness(theme.main, 0.2)};
   flex-shrink: 0;
 `;
+
+export interface IReqoreSpacerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreEffect,
+    IWithReqoreCustomTheme,
+    IReqoreIntent {
+  width?: number;
+  height?: number;
+  lineSize?: TSizes | 'none';
+}
+
+export const ReqoreSpacer = memo(
+  ({
+    customTheme,
+    intent,
+    lineSize = 'none',
+    ...rest
+  }: IReqoreSpacerProps & { horizontal?: boolean; vertical?: boolean }) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+    let { horizontal, vertical } = rest;
+
+    // The user is using old version of the component
+    // We will assume that the user wants a spacer based on the width or height
+    if (!horizontal && !vertical) {
+      if (rest.width) {
+        horizontal = true;
+      }
+
+      if (rest.height) {
+        vertical = true;
+      }
+    }
+
+    return (
+      <StyledSpacer
+        as='div'
+        {...rest}
+        theme={theme}
+        lineSize={lineSize}
+        horizontal={horizontal}
+        vertical={vertical}
+        className='reqore-spacer'
+      />
+    );
+  }
+);
+
+export const ReqoreHorizontalSpacer = memo(
+  ({ width = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
+    return <ReqoreSpacer width={width} lineSize={lineSize} horizontal {...rest} />;
+  }
+);
+
+export const ReqoreVerticalSpacer = memo(
+  ({ height = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
+    return <ReqoreSpacer height={height} lineSize={lineSize} vertical {...rest} />;
+  }
+);

package/src/constants/sizes.ts

@@ -1,9 +1,18 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const ReqoreSizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  NORMAL: 'normal',
+  BIG: 'big',
+  HUGE: 'huge',
+};
+
 export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
 
 export const SIZE_TO_NUMBER = {
+  none: 0,
   tiny: 1,
   small: 2,
   normal: 3,