@qoretechnologies/reqore 0.29.1 → 0.29.2

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}
           />
         )}
         {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/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,10 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
   gradient?: {
     type?: 'linear' | 'radial';
     shape?: 'circle' | 'ellipse';
-    colors: Record<number, TReqoreEffectColor>;
+    colors: TReqoreEffectGradientColors;
     direction?: string;
     borderColor?: TReqoreEffectColor;
+    animate?: TReqoreEffectGradientAnimationTrigger;
   };
   noWrap?: boolean;
   color?: TReqoreEffectColor;
@@ -61,7 +72,6 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
-    useBorder?: boolean;
   };
   interactive?: boolean;
 }
@@ -77,6 +87,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 +177,13 @@ export const StyledEffect = styled.span`
         }
       `}
 
+      ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
+        ? css`
+            background-size: 200% 200%;
+            animation: ${StyledGradientKeyframes} 1.5s linear infinite;
+          `
+        : undefined}
+
       ${effect.interactive &&
       css`
         cursor: pointer;
@@ -163,26 +193,43 @@ 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} 2s 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/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/constants/sizes.ts

@@ -1,6 +1,14 @@
 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 = {

package/src/constants/theme.ts

@@ -1,4 +1,8 @@
-import { TReqoreEffectColor, TReqoreHexColor } from '../components/Effect';
+import {
+  TReqoreEffectColor,
+  TReqoreEffectGradientAnimationTrigger,
+  TReqoreHexColor,
+} from '../components/Effect';
 
 export interface IReqoreSidebarTheme {
   main?: TReqoreHexColor;
@@ -65,6 +69,7 @@ export interface IReqoreTheme {
   header?: IReqoreNavbarTheme;
   footer?: IReqoreNavbarTheme;
   breadcrumbs?: IReqoreBreadcrumbsTheme;
+  buttons?: IReqoreCustomTheme;
 }
 
 export interface IReqoreCustomTheme {
@@ -73,6 +78,8 @@ export interface IReqoreCustomTheme {
     color?: TReqoreEffectColor;
     dim?: boolean;
   };
+  gradient?: boolean;
+  animate?: TReqoreEffectGradientAnimationTrigger;
 }
 
 export interface IReqoreIntents {

package/src/helpers/colors.ts

@@ -1,6 +1,12 @@
 import { cloneDeep, merge, reduce } from 'lodash';
 import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
-import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
+import {
+  TReqoreEffectColor,
+  TReqoreEffectColorList,
+  TReqoreEffectGradientColors,
+  TReqoreEffectGradientColorsObject,
+  TReqoreHexColor,
+} from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
@@ -175,7 +181,7 @@ export const getColorFromMaybeString = (
     _color = theme.intents[providedColor];
   }
 
-  if (isValidSixCharHex(color)) {
+  if (isValidSixCharHex(providedColor)) {
     _color = providedColor as TReqoreHexColor;
   }
 
@@ -192,28 +198,62 @@ export const getColorFromMaybeString = (
 
 export const createEffectGradient = (
   theme: IReqoreTheme,
-  colors: Record<number, TReqoreEffectColor>,
+  colors: TReqoreEffectGradientColors,
   lighten: number = 0,
   minimal?: boolean
 ): string => {
+  let _colors: TReqoreEffectGradientColorsObject;
+  // Check if the colors are valid
+  if (!colors) {
+    throw new Error('You need to provide colors');
+  }
+
+  if (typeof colors === 'string') {
+    _colors = buildGradientColorsFromString(theme, colors);
+  } else {
+    _colors = colors;
+  }
+
   return reduce(
-    colors,
+    _colors,
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
-        minimal ? theme.main : changeLightness(getColorFromMaybeString(theme, color), lighten)
+        minimal
+          ? theme.originalMain
+          : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },
     ''
   );
 };
 
+export const buildGradientColorsFromString = (
+  theme: IReqoreTheme,
+  color: 'main' | TReqoreHexColor | TReqoreIntent
+): TReqoreEffectGradientColorsObject => {
+  if (!color) {
+    throw new Error('You need to provide a color or intent');
+  }
+
+  const colorFrom: TReqoreHexColor = getColorFromMaybeString(theme, `${color}:lighten:1`);
+  const colorTo: TReqoreHexColor = getColorFromMaybeString(theme, `${color}`);
+
+  return {
+    0: colorFrom,
+    100: colorTo,
+  };
+};
+
 export const getNthGradientColor = (
   theme: IReqoreTheme,
-  colors?: Record<number, TReqoreEffectColor>,
+  colors?: TReqoreEffectGradientColors,
   nth: number = 1
 ): TReqoreHexColor | undefined => {
-  if (colors) {
-    return getColorFromMaybeString(theme, Object.values(colors)[nth - 1]);
+  const _colors =
+    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
+
+  if (_colors) {
+    return getColorFromMaybeString(theme, Object.values(_colors)[nth - 1]);
   }
 
   return undefined;
@@ -221,12 +261,15 @@ export const getNthGradientColor = (
 
 export const getGradientMix = (
   theme: IReqoreTheme,
-  colors: Record<number, TReqoreEffectColor>,
+  colors: TReqoreEffectGradientColors,
   fallback?: TReqoreHexColor
 ): TReqoreHexColor | undefined => {
+  const _colors =
+    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
+
   if (colors && Object.keys(colors).length === 2) {
-    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, colors);
-    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, colors, 2);
+    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, _colors);
+    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, _colors, 2);
 
     return mix(
       0.5,

package/src/hooks/useReqoreEffect.ts

@@ -0,0 +1,49 @@
+import { useContext, useMemo } from 'react';
+import {
+  IReqoreEffect,
+  TReqoreEffectGradientAnimationTrigger,
+  TReqoreHexColor,
+} from '../components/Effect';
+import { IReqoreTheme } from '../constants/theme';
+import ThemeContext from '../context/ThemeContext';
+
+export const useReqoreEffect = (
+  component: 'buttons',
+  theme: IReqoreTheme,
+  effect?: IReqoreEffect
+): IReqoreEffect => {
+  let _theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+  // Return the effect if the component is not defined in the theme
+  if (!theme[component]) {
+    return effect;
+  }
+
+  if (theme) {
+    // No other way to conditionally use a hook
+    _theme = theme;
+  }
+
+  const colors: TReqoreHexColor = useMemo(() => {
+    return _theme[component].gradient ? _theme.main : undefined;
+  }, [_theme, effect]);
+
+  const animate: TReqoreEffectGradientAnimationTrigger = useMemo(() => {
+    return _theme[component].animate;
+  }, [_theme, effect]);
+
+  const _effect = useMemo(() => {
+    return {
+      ...effect,
+      gradient: {
+        colors,
+        animate,
+
+        // If the user has defined a gradient, we don't want to override it
+        ...effect?.gradient,
+      },
+    };
+  }, [colors, animate, effect]);
+
+  return _effect;
+};

package/src/hooks/useTheme.ts

@@ -11,13 +11,14 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
     color?: TReqoreEffectColor;
     dim?: boolean;
   };
+  gradient?: boolean;
 }
 
 export const useReqoreTheme = (
   element?: string,
   customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
-) => {
+): IReqoreTheme => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
 
   if (!element) {

package/src/index.tsx

@@ -54,6 +54,8 @@ export { default as ReqoreTextarea } from './components/Textarea';
 export { TimeAgo as ReqoreTimeAgo } from './components/TimeAgo';
 export { ReqoreTree } from './components/Tree';
 export { Colors as ReqoreColors } from './constants/colors';
+export { ReqoreSizes } from './constants/sizes';
+export { ReqoreIntents } from './constants/theme';
 export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';

package/src/stories/Button/Button.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreButton from '../../components/Button';
+import { IReqoreTheme } from '../../constants/theme';
 import { ReqoreControlGroup } from '../../index';
 import { IconArg, SizeArg } from '../utils/args';
 
@@ -185,6 +186,7 @@ Effect.args = {
     gradient: {
       direction: 'to right bottom',
       colors: { 0: '#33023c', 100: '#0a487b' },
+      animate: 'active',
     },
     spaced: 2,
     uppercase: true,
@@ -192,3 +194,15 @@ Effect.args = {
     textSize: 'small',
   },
 };
+
+export const GlobalEffect: ComponentStory<
+  typeof ReqoreButton & { otherThemeOptions?: IReqoreTheme }
+> = Template.bind({});
+GlobalEffect.args = {
+  otherThemeOptions: {
+    buttons: {
+      gradient: true,
+      animate: 'active',
+    },
+  },
+} as any;

package/src/stories/Panel/Panel.stories.tsx

@@ -181,7 +181,7 @@ WithEffect.args = {
       type: 'radial',
       shape: 'ellipse',
       colors: { 0: '#670079', 100: '#180222' },
-      //borderColor: '#fff349',
+      animate: 'hover',
     },
   },
   headerEffect: {