@vitus-labs/elements 1.4.2 → 1.4.3-alpha.3

package/lib/index.d.ts

@@ -270,195 +270,18 @@ type Props = Partial<{
    */
   css: ExtendCss;
   /**
-   * An additional prop for extending styling of the **content** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **content** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   contentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **beforeContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **beforeContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   beforeContentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **afterContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **afterContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   afterContentCss: ExtendCss;
 }>;

package/lib/index.js

@@ -86,11 +86,22 @@ const StyledComponent = styled$2(component$2)`
 
 //#endregion
 //#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+/**
+* Memoized content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-vl-element` attribute in development for debugging.
+*
+* Children are passed as raw content and rendered inside the memo boundary
+* via core `render()` — this lets React.memo skip re-renders when the
+* content reference is stable (common for component-type or string content).
+*/
+const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	const debugProps = IS_DEVELOPMENT ? { "data-vl-element": contentType } : {};
 	return /* @__PURE__ */ jsx(StyledComponent, {
 		as: tag,
 		$contentType: contentType,
-		$element: {
+		$element: useMemo(() => ({
 			contentType,
 			parentDirection,
 			direction,
@@ -99,16 +110,26 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 			equalCols,
 			gap,
 			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		children: render(children)
 	});
 };
-var component_default = memo(Component$9);
+var component_default$1 = memo(Component$9);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default;
+var Content_default = component_default$1;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -208,36 +229,52 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 		ref,
 		as: tag
 	};
-	if (!(!props.dangerouslySetInnerHTML && isWebFixNeeded(tag)) || false) return /* @__PURE__ */ jsx(styled_default$1, {
+	const needsFix = !props.dangerouslySetInnerHTML && isWebFixNeeded(tag);
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extendCss
+	]);
+	const parentFixElement = useMemo(() => ({
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	}), [block, extendCss]);
+	const childFixElement = useMemo(() => ({
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	}), [
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	]);
+	if (!needsFix || false) return /* @__PURE__ */ jsx(styled_default$1, {
 		...COMMON_PROPS,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		$element: normalElement,
 		children
 	});
 	const asTag = isInline ? "span" : "div";
 	return /* @__PURE__ */ jsx(styled_default$1, {
 		...COMMON_PROPS,
-		$element: {
-			parentFix: true,
-			block,
-			extraStyles: extendCss
-		},
+		$element: parentFixElement,
 		children: /* @__PURE__ */ jsx(styled_default$1, {
 			as: asTag,
 			$childFix: true,
-			$element: {
-				childFix: true,
-				direction,
-				alignX,
-				alignY,
-				equalCols
-			},
+			$element: childFixElement,
 			children
 		})
 	});
@@ -380,7 +417,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		...props,
 		...WRAPPER_PROPS
 	});
-	const contentRenderOutput = render(CHILDREN);
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
 		...WRAPPER_PROPS,
@@ -396,9 +432,9 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: beforeContentAlignY,
 				equalCols,
 				gap,
-				children: render(beforeContent)
+				children: beforeContent
 			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -407,7 +443,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols,
-				children: contentRenderOutput
+				children: CHILDREN
 			}),
 			afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -419,7 +455,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: afterContentAlignY,
 				equalCols,
 				gap,
-				children: render(afterContent)
+				children: afterContent
 			})
 		]
 	});
@@ -464,7 +500,12 @@ const withEqualBeforeAfter = (WrappedComponent) => {
 			const beforeEl = el.firstElementChild;
 			const afterEl = el.lastElementChild;
 			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
+		}, [
+			equalBeforeAfter,
+			beforeContent,
+			afterContent,
+			direction
+		]);
 		return /* @__PURE__ */ jsx(WrappedComponent, {
 			...rest,
 			afterContent,
@@ -633,12 +674,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx

package/lib/vitus-labs-elements.native.js

@@ -86,11 +86,22 @@ const StyledComponent = styled$2(component$2)`
 
 //#endregion
 //#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+/**
+* Memoized content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-vl-element` attribute in development for debugging.
+*
+* Children are passed as raw content and rendered inside the memo boundary
+* via core `render()` — this lets React.memo skip re-renders when the
+* content reference is stable (common for component-type or string content).
+*/
+const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	const debugProps = IS_DEVELOPMENT ? { "data-vl-element": contentType } : {};
 	return /* @__PURE__ */ jsx(StyledComponent, {
 		as: tag,
 		$contentType: contentType,
-		$element: {
+		$element: useMemo(() => ({
 			contentType,
 			parentDirection,
 			direction,
@@ -99,16 +110,26 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 			equalCols,
 			gap,
 			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		children: render(children)
 	});
 };
-var component_default = memo(Component$9);
+var component_default$1 = memo(Component$9);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default;
+var Content_default = component_default$1;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -172,19 +193,47 @@ var styled_default$1 = styled$1(component$1)`
 */
 const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
 const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(styled_default$1, {
+	const COMMON_PROPS = {
 		...props,
 		...DEV_PROPS,
 		ref,
-		as: tag,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		as: tag
+	};
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extendCss
+	]);
+	useMemo(() => ({
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	}), [block, extendCss]);
+	useMemo(() => ({
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	}), [
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	]);
+	return /* @__PURE__ */ jsx(styled_default$1, {
+		...COMMON_PROPS,
+		$element: normalElement,
 		children
 	});
 });
@@ -246,7 +295,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY: wrapperAlignY,
 		as: void 0
 	};
-	const contentRenderOutput = render(CHILDREN);
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
 		...WRAPPER_PROPS,
@@ -262,9 +310,9 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: beforeContentAlignY,
 				equalCols,
 				gap,
-				children: render(beforeContent)
+				children: beforeContent
 			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -273,7 +321,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols,
-				children: contentRenderOutput
+				children: CHILDREN
 			}),
 			afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -285,7 +333,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: afterContentAlignY,
 				equalCols,
 				gap,
-				children: render(afterContent)
+				children: afterContent
 			})
 		]
 	});
@@ -330,7 +378,12 @@ const withEqualBeforeAfter = (WrappedComponent) => {
 			const beforeEl = el.firstElementChild;
 			const afterEl = el.lastElementChild;
 			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
+		}, [
+			equalBeforeAfter,
+			beforeContent,
+			afterContent,
+			direction
+		]);
 		return /* @__PURE__ */ jsx(WrappedComponent, {
 			...rest,
 			afterContent,
@@ -499,12 +552,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "1.4.2",
+  "version": "1.4.3-alpha.3+16703b4",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -9,6 +9,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
@@ -57,19 +58,18 @@
     "@vitus-labs/core": "^1.4.0",
     "@vitus-labs/unistyle": "^1.4.0",
     "react": ">= 19",
-    "react-dom": ">= 19",
-    "styled-components": ">= 6"
+    "react-dom": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "1.4.2",
-    "@vitus-labs/rocketstyle": "1.4.2",
+    "@vitus-labs/core": "1.4.3-alpha.3+16703b4",
+    "@vitus-labs/rocketstyle": "1.4.3-alpha.3+16703b4",
     "@vitus-labs/tools-rolldown": "^1.6.0",
     "@vitus-labs/tools-storybook": "^1.6.0",
     "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "1.4.2"
+    "@vitus-labs/unistyle": "1.4.3-alpha.3+16703b4"
   },
   "dependencies": {
     "react-is": "^19.2.3"
   },
-  "gitHead": "f12f43c61149964ff4f3f4b80cb6f92da2825915"
+  "gitHead": "16703b4c8dc0525bd504c531aeb082bf593579cc"
 }