@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19

package/lib/components/items/VimeoEmbed.js

@@ -13,10 +13,8 @@ const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useStatesClassNames_1 = require("../useStatesClassNames");
-const getStatesCSS_1 = require("../../utils/getStatesCSS");
-const useStatesTransitions_1 = require("../useStatesTransitions");
 const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -29,12 +27,8 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
-    const layoutValues = [item.area, item.layoutParams, item.state];
-    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video-wrapper');
-    const videoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video');
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'opacity']);
-    (0, useStatesTransitions_1.useStatesTransitions)(iframeRef, item.state, ['radius']);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
@@ -67,7 +61,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         vimeoPlayer.play();
         setIsCoverVisible(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id} ${wrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -84,35 +78,37 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video ${videoClassNames}`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embed-video {
+      .embedVideo {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video', ['radius'], stateParams);
+      ${(0, sdk_1.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: all 0.2s ease;
+            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
           }
-          .embed-video-wrapper-${item.id} .embed-video {
+          .embed-video-wrapper-${item.id}:hover {
+            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
+          }
+          .embed-video-wrapper-${item.id} .embedVideo {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: all 0.2s ease;
+            transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
+          }
+          .embed-video-wrapper-${item.id}:hover .embedVideo {
+            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
           }
-          ${wrapperStatesCSS}
-          ${videoStatesCSS}
         `);
                 })}
     ` })] }));

package/lib/components/items/YoutubeEmbed.js

@@ -12,12 +12,10 @@ const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
+const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
-const useStatesClassNames_1 = require("../useStatesClassNames");
-const getStatesCSS_1 = require("../../utils/getStatesCSS");
-const useStatesTransitions_1 = require("../useStatesTransitions");
 const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -27,16 +25,11 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
-    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const layoutValues = [item.area, item.layoutParams, item.state];
-    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-youtube-video-wrapper');
-    const embedClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed');
+    const layoutValues = [item.area, item.layoutParams, item.state.hover];
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
-    (0, useStatesTransitions_1.useStatesTransitions)(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
-    (0, useStatesTransitions_1.useStatesTransitions)(div, item.state, ['radius']);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -87,7 +80,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { ref: setWrapperRef, className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -105,7 +98,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id} ${embedClassNames}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -121,22 +114,24 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
-                    const embedStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed', ['radius'], stateParams);
+        ${(0, sdk_1.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: all 0.2s ease;
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: all 0.2s ease;
+              transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover {
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
+            }
+            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
+              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
             }
-            ${wrapperStatesCSS}
-            ${embedStatesCSS}
           `);
                 })}
       ` })] }));

package/lib/utils/{StateStyles/StateStyles.js → HoverStyles/HoverStyles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTransitions = exports.getStateStyles = void 0;
+exports.getHoverStyles = exports.getTransitions = void 0;
 const color_1 = require("@cntrl-site/color");
 const getItemTopStyle_1 = require("../getItemTopStyle");
-const stateTransformationMap = {
+const hoverTransformationMap = {
     'width': (width) => `width: ${width * 100}vw !important;`,
     'height': (height) => `height: ${height * 100}vw !important;`,
     'top': (top, anchorSide) => `top: ${(0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide)} !important;`,
@@ -39,51 +39,39 @@ const CSSPropertyNameMap = {
     'wordSpacing': 'word-spacing',
     'color': 'color'
 };
-function getStateStyles(values, state, anchorSide) {
-    if (!state)
-        return '';
-    const stateValues = values.reduce((acc, valueName) => {
-        // @ts-ignore
-        if (valueName in state && state[valueName] !== undefined) {
-            // @ts-ignore
-            const stateProperties = state[valueName];
-            const getter = stateTransformationMap[valueName];
+function getTransitions(values, hover) {
+    if (!hover)
+        return 'unset';
+    const transitionValues = values.reduce((acc, valueName) => {
+        if (valueName in hover && hover[valueName] !== undefined) {
+            const hoverProperties = hover[valueName];
             return [
                 ...acc,
-                getter(stateProperties.value, anchorSide)
+                `${CSSPropertyNameMap[valueName]} ${hoverProperties.duration}ms ${hoverProperties.timing} ${hoverProperties.delay}ms`
             ];
         }
         return acc;
     }, []);
-    if (!stateValues.length)
-        return '';
-    // @ts-ignore
-    const transitionStr = getTransitions(values, state);
-    stateValues.push(`transition: ${transitionStr};`);
-    return stateValues.join('\n');
-}
-exports.getStateStyles = getStateStyles;
-function getTransitions(values, state) {
-    if (!state)
+    if (!transitionValues.length)
         return 'unset';
-    const transitionValues = values.reduce((acc, valueName) => {
-        // @ts-ignore TODO
-        if (valueName in state && state[valueName] !== undefined) {
-            // @ts-ignore TODO
-            const stateProperties = state[valueName];
+    return transitionValues.join(', ');
+}
+exports.getTransitions = getTransitions;
+function getHoverStyles(values, hover, anchorSide) {
+    if (!hover)
+        return '';
+    const hoverValues = values.reduce((acc, valueName) => {
+        if (valueName in hover && hover[valueName] !== undefined) {
+            const hoverProperties = hover[valueName];
             return [
                 ...acc,
-                // @ts-ignore
-                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
+                hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
             ];
         }
         return acc;
     }, []);
-    if (!transitionValues.length)
-        return 'unset';
-    return transitionValues.join(', ');
+    if (!hoverValues.length)
+        return '';
+    return hoverValues.join('\n');
 }
-exports.getTransitions = getTransitions;
-// export function getStateTransitions<T extends ArticleItemType>(
-//
-// )
+exports.getHoverStyles = getHoverStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.19-alpha.2",
+  "version": "1.0.19",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.4-alpha.8",
+    "@cntrl-site/sdk": "^1.12.3",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
@@ -38,15 +38,12 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
     "typescript": "^5.2.2"
   },

package/src/components/Article.tsx

@@ -1,12 +1,11 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle, ArticleItemType, ItemState, ItemStateParams } from '@cntrl-site/sdk';
+import { Article as TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';
-import { InteractionsProvider } from '../provider/InteractionsContext';
 
 interface Props {
   article: TArticle;
@@ -28,37 +27,35 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <InteractionsProvider interactions={article.interactions}>
-        <ArticleWrapper>
-          <div className="article" ref={articleRef}>
-            {article.sections.map((section, i) => {
-              const data = section.name ? sectionData[section.name] : {};
-              return (
-                <Section
-                  section={section}
-                  key={section.id}
-                  data={data}
-                >
-                  {article.sections[i].items.map(item => (
-                    <Item
-                      item={item}
-                      key={item.id}
-                      sectionId={section.id}
-                      articleHeight={articleHeight}
-                    />
-                  ))}
-                </Section>
-              );
-            })}
-          </div>
-        </ArticleWrapper>
-        <JSXStyle id={id}>{`
+      <ArticleWrapper>
+        <div className="article" ref={articleRef}>
+          {article.sections.map((section, i) => {
+            const data = section.name ? sectionData[section.name] : {};
+            return (
+              <Section
+                section={section}
+                key={section.id}
+                data={data}
+              >
+                {article.sections[i].items.map(item => (
+                  <Item
+                    item={item}
+                    key={item.id}
+                    sectionId={section.id}
+                    articleHeight={articleHeight}
+                  />
+                ))}
+              </Section>
+            );
+          })}
+        </div>
+      </ArticleWrapper>
+      <JSXStyle id={id}>{`
        .article {
-         position: relative;
-         overflow: clip;
-       }
+            position: relative;
+            overflow: clip;
+          }
       `}</JSXStyle>
-      </InteractionsProvider>
     </ArticleRectContext.Provider>
   );
 };

package/src/components/ArticleWrapper.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties, FC, PropsWithChildren } from 'react';
+import React, { CSSProperties, FC, PropsWithChildren, useEffect, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';
 

package/src/components/Head.tsx

@@ -35,6 +35,7 @@ export const CNTRLHead: FC<Props> = ({ meta, project }) => {
       <meta name="twitter:description" content={meta.description} />
       <meta name="keywords" content={meta.keywords} />
       <meta name="og:image" content={meta.opengraphThumbnail} />
+      <meta name="twitter:image" content={meta.opengraphThumbnail} />
       <meta name="generator" content="https://cntrl.site" />
       <link rel="icon" href={meta.favicon} />
       {customFonts.length > 0 && (

package/src/components/Item.tsx

@@ -21,6 +21,7 @@ import { useItemDimensions } from './useItemDimensions';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
+import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
@@ -31,10 +32,6 @@ import { GroupItem } from './items/GroupItem';
 import { CodeEmbedItem } from './items/CodeEmbedItem';
 import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
 import { KeyframesContext } from '../provider/KeyframesContext';
-import { InteractionsContext } from '../provider/InteractionsContext';
-import { getStatesCSS } from '../utils/getStatesCSS';
-import { useStatesClassNames } from './useStatesClassNames';
-import { useStatesTransitions } from './useStatesTransitions';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -82,7 +79,6 @@ const noop = () => null;
 
 export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
-  const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const keyframesRepo = useContext(KeyframesContext);
   const id = useId();
@@ -97,14 +93,14 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const dimensions = useItemDimensions(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
   const isInitialRef = useRef(true);
-  const { transitionTo, getItemTrigger } = useContext(InteractionsContext);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
+
   const sizing = layout && isItemType(item, ArticleItemType.RichText)
     ? item.layoutParams[layout].sizing
     : undefined;
@@ -134,13 +130,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const innerStatesClassNames = useStatesClassNames(item.id, item.state, 'item-inner');
-  const wrapperStatesClassNames = useStatesClassNames(item.id, item.state, 'item-wrapper');
-  useStatesTransitions(itemWrapperRef.current, item.state, ['top', 'left']);
-  useStatesTransitions(itemInnerRef.current, item.state, ['width', 'height', 'scale']);
   return (
     <div
-      className={`item-wrapper-${item.id} ${wrapperStatesClassNames}`}
+      className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
       style={{
         ...(position ? { top: position.top } : {}),
@@ -160,23 +152,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
       >
         <RichTextWrapper isRichText={isRichText}>
           <div
-            className={`item-${item.id}-inner ${innerStatesClassNames}`}
-            ref={itemInnerRef}
-            onClick={() => {
-              const trigger = getItemTrigger(item.id, 'click');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
-            }}
-            onMouseEnter={() => {
-              const trigger = getItemTrigger(item.id, 'hover-in');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
-            }}
-            onMouseLeave={() => {
-              const trigger = getItemTrigger(item.id, 'hover-out');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
-            }}
+            className={`item-${item.id}-inner`}
             style={{
               ...(dimensions ? {
                 width: `${sizingAxis.x === 'manual'
@@ -193,12 +169,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, states, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;
-          const statesInnerCSS = getStatesCSS(item.id, 'item-inner', ['width', 'height', 'scale'], states);
-          const statesWrapperCSS = getStatesCSS(item.id, 'item-wrapper', ['top', 'left'], states, area.anchorSide);
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -209,6 +183,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               height: fit-content;
             }
             .item-${item.id}-inner {
+              transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
               pointer-events: auto;
               width: ${sizingAxis.x === 'manual'
                 ? `${area.width * 100}vw`
@@ -225,9 +200,14 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
+              transition: ${getTransitions(['left', 'top'], hoverParams)};
+            }
+            .item-${item.id}-inner:hover {
+              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)};
+            }
+            .item-wrapper-${item.id}:hover {
+              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)};
             }
-            ${statesWrapperCSS}
-            ${statesInnerCSS}
           `);
       })}
       `}</JSXStyle>
@@ -243,11 +223,11 @@ function parseSizing(sizing: string = 'manual'): Axis {
   } as Axis;
 }
 
-export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
-  return item.type === itemType;
-}
-
 interface Axis {
   x: 'manual' | 'auto';
   y: 'manual' | 'auto';
 }
+
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}

package/src/components/items/CodeEmbedItem.tsx

@@ -1,15 +1,13 @@
-import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
+import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, 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 { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 const stylesMap = {
   [AreaAnchor.TopLeft]: {},
@@ -32,9 +30,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'embed-wrapper');
-  useStatesTransitions(ref!, item.state, ['angle', 'blur', 'opacity']);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
 
   useEffect(() => {
     if (!ref) return;
@@ -60,7 +56,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-wrapper-${item.id} ${statesClassNames}`}
+        className={`embed-wrapper-${item.id}`}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
@@ -97,20 +93,21 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
         z-index: 1;
         border: none;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams], exemplary) => {
-        const statesCSS = getStatesCSS(item.id, 'embed-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
         return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: all 0.2s ease;
+            transition: ${getTransitions<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
           }
           .embed-${item.id} {
             width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
             height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
           }
-          ${statesCSS}
+          .embed-wrapper-${item.id}:hover {
+            ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
+          }
         `);
       })}
     `}</JSXStyle>

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,19 +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: all 0.2s ease;
+              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>