@cntrl-site/sdk-nextjs 1.0.19-alpha.3 → 1.0.20

package/src/components/items/CustomItem.tsx

@@ -1,29 +1,25 @@
-import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
 import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item, sectionId);
   const component = sdk.customItems.get(item.commonParams.name);
-  const layoutValues: Record<string, any>[] = [item.area, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'custom-component');
-  useStatesTransitions(ref, item.state, ['angle'])
   if (!component) return null;
   return (
     <>
       <div
-        className={`custom-component-${item.id} ${statesClassNames}`}
+        className={`custom-component-${item.id}`}
         ref={setRef}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
@@ -32,18 +28,20 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
         {component({})}
       </div>
       <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, layoutValues, ([area, stateParams]) => {
-          const statesCSS = getStatesCSS(item.id, 'custom-component', ['angle'], stateParams);
+        {`${getLayoutStyles(layouts, layoutValues, ([area, hoverParams]) => {
           return (`
             .custom-component-${item.id} {
               transform: rotate(${area.angle}deg);
+              transition: ${getTransitions<ArticleItemType.Custom>(['angle'], hoverParams)};
               height: 100%;
               width: 100%;
               position: absolute;
               left: 0;
               top: 0;
             }
-            ${statesCSS}
+            .custom-component-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Custom>(['angle'], hoverParams)};
+            }
           `);
         })}`}
       </JSXStyle>

package/src/components/items/GroupItem.tsx

@@ -1,15 +1,13 @@
 import React, { FC, useId, useState } from 'react';
 import { Item, ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRegisterResize } from '../../common/useRegisterResize';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight }) => {
   const id = useId();
@@ -17,17 +15,15 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const angle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
   const { opacity } = useGroupItem(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'group');
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  useStatesTransitions(ref!, item.state, ['opacity', 'angle']);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
-          className={`group-${item.id} ${statesClassNames}`}
+          className={`group-${item.id}`}
           ref={setRef}
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
@@ -51,14 +47,16 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           height: 100%;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const statesCSS = getStatesCSS(item.id, 'group', ['opacity', 'angle'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .group-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
+              transition: ${getTransitions<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
+            }
+            .group-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
             }
-            ${statesCSS}
           `);
         })}
       `}</JSXStyle>

package/src/components/items/ImageItem.tsx

@@ -1,19 +1,17 @@
 import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useImageFx } from '../../utils/effects/useImageFx';
 import { useElementRect } from '../../utils/useElementRect';
 import { useLayoutContext } from '../useLayoutContext';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
@@ -31,9 +29,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
-  const [imgRef, setImgRef] = useState<HTMLImageElement | HTMLCanvasElement | null>(null);
-  useRegisterResize(wrapperRef, onResize);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
   const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
@@ -44,17 +41,12 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     acc[control.shaderParam] = control.value;
     return acc;
   }, {});
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
-  const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'image-wrapper');
-  const statesImgClassNames = useStatesClassNames(item.id, item.state, 'image');
-  useStatesTransitions(wrapperRef, item.state, ['angle', 'opacity', 'blur']);
-  useStatesTransitions(imgRef, item.state, ['strokeWidth', 'radius', 'strokeColor']);
-  useStatesTransitions(fxCanvas.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -70,7 +62,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     width,
     height
   );
-  const rect = useElementRect(wrapperRef);
+  const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
   const inlineStyles = {
@@ -82,8 +74,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
-          className={`image-wrapper-${item.id} ${statesWrapperClassNames}`}
-          ref={setWrapperRef}
+          className={`image-wrapper-${item.id}`}
+          ref={setRef}
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
@@ -94,16 +86,15 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             <canvas
               style={inlineStyles}
               ref={fxCanvas}
-              className={`img-canvas image-${item.id} ${statesImgClassNames}`}
+              className={`img-canvas image-${item.id}`}
               width={rectWidth}
               height={rectHeight}
             />
           ) : (
             <img
               alt=""
-              className={`image image-${item.id} ${statesImgClassNames}`}
+              className={`image image-${item.id}`}
               style={inlineStyles}
-              ref={setImgRef}
               src={item.commonParams.url}
             />
           )}
@@ -134,22 +125,26 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           border-width: 0;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const wrapperStatesCSS = getStatesCSS(item.id, 'image-wrapper', ['angle', 'opacity', 'blur'], stateParams);
-          const imgStatesCSS = getStatesCSS(item.id, 'image', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .image-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              transition: ${getTransitions<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)};
+            }
+            .image-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Image>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .image-${item.id} {
               border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
+              transition: ${getTransitions<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+            }
+            .image-wrapper-${item.id}:hover .image, .image-wrapper-${item.id}:hover .img-canvas {
+              ${getHoverStyles<ArticleItemType.Image>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
-            ${wrapperStatesCSS}
-            ${imgStatesCSS}
           `);
         })}
       `}</JSXStyle>

package/src/components/items/RectangleItem.tsx

@@ -1,16 +1,14 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
-import { RectangleItem as TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
+import { RectangleItem as TRectangleItem, getLayoutStyles, ArticleItemType } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -19,18 +17,16 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => fillColor ? CntrlColor.parse(fillColor) : undefined, [fillColor]);
   const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'rectangle');
   useRegisterResize(ref, onResize);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
-  useStatesTransitions(ref, item.state, ['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
-          className={`rectangle-${item.id} ${statesClassNames}`}
+          className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
             ...(backgroundColor ? { backgroundColor : `${backgroundColor.fmt('rgba')}` } : {}),
@@ -53,8 +49,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           border-style: solid;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, states]) => {
-          const statesCSS = getStatesCSS(item.id, 'rectangle', ['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], states);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .rectangle-${item.id} {
               background-color: ${CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
@@ -65,8 +60,11 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropFilter !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              transition: ${getTransitions<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
+            }
+            .rectangle-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
-            ${statesCSS}
           `);
         })}
       `}</JSXStyle>

package/src/components/items/RichTextItem.tsx

@@ -1,18 +1,16 @@
 import { FC, useId, useMemo, useState } from 'react';
 import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRichTextItemValues } from './useRichTextItemValues';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
 import { useExemplary } from '../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles] = useRichTextItem(item);
@@ -22,17 +20,15 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const angle = useItemAngle(item, sectionId);
   const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = useRichTextItemValues(item, sectionId);
   const textColor = useMemo(() => color ? CntrlColor.parse(color) : undefined, [color]);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const exemplary = useExemplary();
-  const stateClassNames = useStatesClassNames(item.id, item.state, 'rich-text-wrapper');
   useRegisterResize(ref, onResize);
-  useStatesTransitions(ref, item.state, ['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
 
   return (
     <>
       <div
         ref={setRef}
-        className={`rich-text-wrapper-${item.id} ${stateClassNames}`}
+        className={`rich-text-wrapper-${item.id}`}
         style={{
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
@@ -47,14 +43,8 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
       </div>
       <JSXStyle id={id}>
         {styles}
-        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, states]) => {
+        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           const color = CntrlColor.parse(layoutParams.color);
-          const statesCSS = getStatesCSS(
-            item.id,
-            'rich-text-wrapper',
-            ['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'],
-            states
-          );
           return (`
             .rich-text-wrapper-${item.id} {
               font-size: ${layoutParams.fontSize * 100}vw;
@@ -70,13 +60,16 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
+              transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
+            }
+            .rich-text-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {
               .rich-text-wrapper-${item.id} {
                 color: ${color.fmt('rgba')};
               }
             }
-            ${statesCSS}
           `);
         })}`}
       </JSXStyle>

package/src/components/items/VideoItem.tsx

@@ -1,18 +1,16 @@
 import { FC, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useLayoutContext } from '../useLayoutContext';
 import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -24,12 +22,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const layoutId = useLayoutContext();
   const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'video-wrapper');
-  const statesVideoClassNames = useStatesClassNames(item.id, item.state, 'video');
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const hasScrollPlayback = scrollPlayback !== null;
-  useStatesTransitions(ref, item.state, ['angle', 'opacity', 'blur']);
-  useStatesTransitions(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
   useRegisterResize(ref, onResize);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
@@ -40,7 +34,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`video-wrapper-${item.id} ${statesWrapperClassNames}`}
+        className={`video-wrapper-${item.id}`}
         ref={setRef}
         style={{
           ...(opacity !== undefined ? { opacity } : {}),
@@ -54,7 +48,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             src={item.commonParams.url}
             playbackParams={scrollPlayback}
             style={inlineStyles}
-            className={`video video-playback-wrapper video-${item.id} ${statesWrapperClassNames}`}
+            className={`video video-playback-wrapper video-${item.id}`}
           />
           ) : (
           <video
@@ -64,7 +58,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             muted
             loop
             playsInline
-            className={`video video-${item.id} ${statesVideoClassNames}`}
+            className={`video video-${item.id}`}
             style={inlineStyles}
           >
             <source src={item.commonParams.url} />
@@ -98,22 +92,26 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           display: flex;
           justify-content: center;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const wrapperStatesCSS = getStatesCSS(item.id, 'video-wrapper', ['angle', 'opacity', 'blur'], stateParams);
-          const videoStatesCSS = getStatesCSS(item.id, 'video', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              transition: ${getTransitions<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
+            }
+            .video-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
             }
             .video-${item.id} {
               border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
+              transition: ${getTransitions<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+            }
+            .video-wrapper-${item.id}:hover .video {
+              ${getHoverStyles<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
             }
-            ${wrapperStatesCSS}
-            ${videoStatesCSS}
           `);
         })}
     `}</JSXStyle>

package/src/components/items/VimeoEmbed.tsx

@@ -5,12 +5,10 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -23,12 +21,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-video-wrapper');
-  const videoClassNames = useStatesClassNames(item.id, item.state, 'embed-video');
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   useRegisterResize(ref, onResize);
-  useStatesTransitions(ref, item.state, ['angle', 'blur', 'opacity']);
-  useStatesTransitions(iframeRef, item.state, ['radius']);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -66,7 +60,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-video-wrapper-${item.id} ${wrapperClassNames}`}
+        className={`embed-video-wrapper-${item.id}`}
         ref={setRef}
         style={{
           ...(opacity !== undefined ? { opacity } : {}),
@@ -102,7 +96,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         )}
         <iframe
           ref={setIframeRef}
-          className={`embed-video ${videoClassNames}`}
+          className="embedVideo"
           src={validUrl || ''}
           allow="autoplay; fullscreen; picture-in-picture;"
           allowFullScreen
@@ -117,27 +111,31 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         width: 100%;
         height: 100%;
       }
-      .embed-video {
+      .embedVideo {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-        const wrapperStatesCSS = getStatesCSS(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-        const videoStatesCSS = getStatesCSS(item.id, 'embed-video', ['radius'], stateParams);
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
         return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
           }
-          .embed-video-wrapper-${item.id} .embed-video {
+          .embed-video-wrapper-${item.id}:hover {
+            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
+          }
+          .embed-video-wrapper-${item.id} .embedVideo {
             border-radius: ${layoutParams.radius * 100}vw;
+            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
+          }
+          .embed-video-wrapper-${item.id}:hover .embedVideo {
+            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
           }
-          ${wrapperStatesCSS}
-          ${videoStatesCSS}
         `);
       })}
     `}</JSXStyle>

package/src/components/items/YoutubeEmbed.tsx

@@ -5,14 +5,12 @@ import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
+import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
 import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
 import { useRegisterResize } from "../../common/useRegisterResize";
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -22,16 +20,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-youtube-video-wrapper');
-  const embedClassNames = useStatesClassNames(item.id, item.state, 'embed');
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   useRegisterResize(div, onResize);
-  useStatesTransitions(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
-  useStatesTransitions(div, item.state, ['radius']);
+
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);
@@ -84,8 +78,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        ref={setWrapperRef}
-        className={`embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`}
+        className={`embed-youtube-video-wrapper-${item.id}`}
         onMouseEnter={() => {
           if (!player || play !== 'on-hover') return;
           player.playVideo();
@@ -120,10 +113,11 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           />
         )}
         <div
-          className={`embed-${item.id} ${embedClassNames}`}
+          className={`embed-${item.id}`}
           ref={setDiv}
           style={{
             ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {}),
+
           }}
         />
       </div>
@@ -143,20 +137,24 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           z-index: 1;
           border: none;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const wrapperStatesCSS = getStatesCSS(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-          const embedStatesCSS = getStatesCSS(item.id, 'embed', ['radius'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
           return (`
             .embed-youtube-video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
+              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover {
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
             }
-            ${wrapperStatesCSS}
-            ${embedStatesCSS}
           `);
       })}
       `}</JSXStyle>