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

package/lib/index.js

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -12,6 +12,125 @@ const PKG_NAME = "@vitus-labs/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
+//#endregion
+//#region src/helpers/Content/styled.ts
+/**
+* Styled component for content areas (before/content/after). Applies
+* responsive flex alignment, gap spacing between slots based on parent
+* direction (margin-right for inline, margin-bottom for rows), and
+* equalCols flex distribution. The "content" slot gets `flex: 1` to
+* fill remaining space between before and after.
+*/
+const { styled: styled$2, css: css$2, component: component$2 } = config;
+const equalColsCSS = `
+  flex: 1;
+`;
+const typeContentCSS = `
+  flex: 1;
+`;
+const gapDimensions = {
+	inline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	reverseInline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	rows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	},
+	reverseRows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	}
+};
+const calculateGap = ({ direction, type, value }) => {
+	if (!direction || !type || type === "content") return void 0;
+	return `${gapDimensions[direction][type]}: ${value};`;
+};
+const styles$2 = ({ css, theme: t, rootSize }) => css`
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.equalCols && equalColsCSS};
+
+  ${t.gap && t.contentType && calculateGap({
+	direction: t.parentDirection,
+	type: t.contentType,
+	value: value(t.gap, rootSize)
+})};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+const StyledComponent = styled$2(component$2)`
+  ${`box-sizing: border-box;`};
+
+  display: flex;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
+
+  ${makeItResponsive({
+	key: "$element",
+	styles: styles$2,
+	css: css$2,
+	normalize: true
+})};
+`;
+
+//#endregion
+//#region src/helpers/Content/component.tsx
+/**
+* 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: useMemo(() => ({
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extraStyles: extendCss
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		children: render(children)
+	});
+};
+var component_default$1 = memo(Component$9);
+
+//#endregion
+//#region src/helpers/Content/index.ts
+var Content_default = component_default$1;
+
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
 /**
@@ -165,73 +284,6 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 //#region src/helpers/Wrapper/index.ts
 var Wrapper_default = Component$8;
 
-//#endregion
-//#region src/Element/slotStyles.ts
-/**
-* Slot styling logic extracted from Content/styled.ts for use with the
-* useCSS hook. Handles responsive flex alignment, gap spacing, equalCols,
-* and extendCss injection for before/content/after slots.
-*/
-const gapDimensions = {
-	inline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	reverseInline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	rows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	},
-	reverseRows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	}
-};
-const calculateGap = ({ direction, type, value: v }) => {
-	if (!direction || !type || type === "content") return void 0;
-	return `${gapDimensions[direction][type]}: ${v};`;
-};
-const slotStyles = ({ css, theme: t, rootSize }) => css`
-  ${alignContent({
-	direction: t.direction,
-	alignX: t.alignX,
-	alignY: t.alignY
-})};
-
-  ${t.equalCols && "flex: 1;"};
-
-  ${t.gap && t.contentType && calculateGap({
-	direction: t.parentDirection,
-	type: t.contentType,
-	value: value(t.gap, rootSize)
-})};
-
-  ${t.extraStyles && extendCss(t.extraStyles)};
-`;
-let _template = null;
-const getSlotTemplate = () => {
-	if (!_template) {
-		const { css } = config;
-		_template = css`
-      ${"box-sizing: border-box;"};
-      display: flex;
-      align-self: stretch;
-      flex-wrap: wrap;
-      ${({ $contentType }) => $contentType === "content" && "flex: 1;"};
-      ${makeItResponsive({
-			key: "$element",
-			styles: slotStyles,
-			css,
-			normalize: true
-		})};
-    `;
-	}
-	return _template;
-};
-
 //#endregion
 //#region src/Element/constants.ts
 /**
@@ -316,11 +368,7 @@ const getShouldBeEmpty = (tag) => {
 * to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
-*
-* Slot elements (before/content/after) use `useCSS` for direct className
-* injection — no styled component wrapper overhead per slot.
 */
-const { useCSS } = config;
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
@@ -330,7 +378,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = isInlineElement(tag);
-	const SUB_TAG = isInline ? "span" : "div";
+	const SUB_TAG = isInline ? "span" : void 0;
 	const { wrapperDirection, wrapperAlignX, wrapperAlignY } = useMemo(() => {
 		let wrapperDirection = direction;
 		let wrapperAlignX = alignX;
@@ -355,45 +403,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
-	const slotTemplate = getSlotTemplate();
-	const beforeClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "before",
-			parentDirection: wrapperDirection,
-			direction: beforeContentDirection,
-			alignX: beforeContentAlignX,
-			alignY: beforeContentAlignY,
-			equalCols,
-			gap,
-			extraStyles: beforeContentCss
-		},
-		$contentType: "before"
-	});
-	const contentClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "content",
-			parentDirection: wrapperDirection,
-			direction: contentDirection,
-			alignX: contentAlignX,
-			alignY: contentAlignY,
-			equalCols,
-			extraStyles: contentCss
-		},
-		$contentType: "content"
-	});
-	const afterClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "after",
-			parentDirection: wrapperDirection,
-			direction: afterContentDirection,
-			alignX: afterContentAlignX,
-			alignY: afterContentAlignY,
-			equalCols,
-			gap,
-			extraStyles: afterContentCss
-		},
-		$contentType: "after"
-	});
 	const WRAPPER_PROPS = {
 		ref: ref ?? innerRef,
 		extendCss: css,
@@ -408,24 +417,46 @@ 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,
 		isInline,
 		children: [
-			beforeContent && createElement(SUB_TAG, {
-				className: beforeClass,
-				"data-vl-slot": "before"
-			}, render(beforeContent)),
-			isSimpleElement ? contentRenderOutput : createElement(SUB_TAG, {
-				className: contentClass,
-				"data-vl-slot": "content"
-			}, contentRenderOutput),
-			afterContent && createElement(SUB_TAG, {
-				className: afterClass,
-				"data-vl-slot": "after"
-			}, render(afterContent))
+			beforeContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "before",
+				parentDirection: wrapperDirection,
+				extendCss: beforeContentCss,
+				direction: beforeContentDirection,
+				alignX: beforeContentAlignX,
+				alignY: beforeContentAlignY,
+				equalCols,
+				gap,
+				children: beforeContent
+			}),
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "content",
+				parentDirection: wrapperDirection,
+				extendCss: contentCss,
+				direction: contentDirection,
+				alignX: contentAlignX,
+				alignY: contentAlignY,
+				equalCols,
+				children: CHILDREN
+			}),
+			afterContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "after",
+				parentDirection: wrapperDirection,
+				extendCss: afterContentCss,
+				direction: afterContentDirection,
+				alignX: afterContentAlignX,
+				alignY: afterContentAlignY,
+				equalCols,
+				gap,
+				children: afterContent
+			})
 		]
 	});
 });

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

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -12,6 +12,125 @@ const PKG_NAME = "@vitus-labs/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
+//#endregion
+//#region src/helpers/Content/styled.ts
+/**
+* Styled component for content areas (before/content/after). Applies
+* responsive flex alignment, gap spacing between slots based on parent
+* direction (margin-right for inline, margin-bottom for rows), and
+* equalCols flex distribution. The "content" slot gets `flex: 1` to
+* fill remaining space between before and after.
+*/
+const { styled: styled$2, css: css$2, component: component$2 } = config;
+const equalColsCSS = `
+  flex: 1;
+`;
+const typeContentCSS = `
+  flex: 1;
+`;
+const gapDimensions = {
+	inline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	reverseInline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	rows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	},
+	reverseRows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	}
+};
+const calculateGap = ({ direction, type, value }) => {
+	if (!direction || !type || type === "content") return void 0;
+	return `${gapDimensions[direction][type]}: ${value};`;
+};
+const styles$2 = ({ css, theme: t, rootSize }) => css`
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.equalCols && equalColsCSS};
+
+  ${t.gap && t.contentType && calculateGap({
+	direction: t.parentDirection,
+	type: t.contentType,
+	value: value(t.gap, rootSize)
+})};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+const StyledComponent = styled$2(component$2)`
+  ${""};
+
+  display: flex;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
+
+  ${makeItResponsive({
+	key: "$element",
+	styles: styles$2,
+	css: css$2,
+	normalize: true
+})};
+`;
+
+//#endregion
+//#region src/helpers/Content/component.tsx
+/**
+* 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: useMemo(() => ({
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extraStyles: extendCss
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		children: render(children)
+	});
+};
+var component_default$1 = memo(Component$9);
+
+//#endregion
+//#region src/helpers/Content/index.ts
+var Content_default = component_default$1;
+
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
 /**
@@ -123,73 +242,6 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 //#region src/helpers/Wrapper/index.ts
 var Wrapper_default = Component$8;
 
-//#endregion
-//#region src/Element/slotStyles.ts
-/**
-* Slot styling logic extracted from Content/styled.ts for use with the
-* useCSS hook. Handles responsive flex alignment, gap spacing, equalCols,
-* and extendCss injection for before/content/after slots.
-*/
-const gapDimensions = {
-	inline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	reverseInline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	rows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	},
-	reverseRows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	}
-};
-const calculateGap = ({ direction, type, value: v }) => {
-	if (!direction || !type || type === "content") return void 0;
-	return `${gapDimensions[direction][type]}: ${v};`;
-};
-const slotStyles = ({ css, theme: t, rootSize }) => css`
-  ${alignContent({
-	direction: t.direction,
-	alignX: t.alignX,
-	alignY: t.alignY
-})};
-
-  ${t.equalCols && "flex: 1;"};
-
-  ${t.gap && t.contentType && calculateGap({
-	direction: t.parentDirection,
-	type: t.contentType,
-	value: value(t.gap, rootSize)
-})};
-
-  ${t.extraStyles && extendCss(t.extraStyles)};
-`;
-let _template = null;
-const getSlotTemplate = () => {
-	if (!_template) {
-		const { css } = config;
-		_template = css`
-      ${""};
-      display: flex;
-      align-self: stretch;
-      flex-wrap: wrap;
-      ${({ $contentType }) => $contentType === "content" && "flex: 1;"};
-      ${makeItResponsive({
-			key: "$element",
-			styles: slotStyles,
-			css,
-			normalize: true
-		})};
-    `;
-	}
-	return _template;
-};
-
 //#endregion
 //#region src/Element/component.tsx
 /**
@@ -199,11 +251,7 @@ const getSlotTemplate = () => {
 * to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
-*
-* Slot elements (before/content/after) use `useCSS` for direct className
-* injection — no styled component wrapper overhead per slot.
 */
-const { useCSS } = config;
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
@@ -212,7 +260,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = false;
-	const SUB_TAG = "div";
+	const SUB_TAG = void 0;
 	const { wrapperDirection, wrapperAlignX, wrapperAlignY } = useMemo(() => {
 		let wrapperDirection = direction;
 		let wrapperAlignX = alignX;
@@ -237,45 +285,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
-	const slotTemplate = getSlotTemplate();
-	const beforeClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "before",
-			parentDirection: wrapperDirection,
-			direction: beforeContentDirection,
-			alignX: beforeContentAlignX,
-			alignY: beforeContentAlignY,
-			equalCols,
-			gap,
-			extraStyles: beforeContentCss
-		},
-		$contentType: "before"
-	});
-	const contentClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "content",
-			parentDirection: wrapperDirection,
-			direction: contentDirection,
-			alignX: contentAlignX,
-			alignY: contentAlignY,
-			equalCols,
-			extraStyles: contentCss
-		},
-		$contentType: "content"
-	});
-	const afterClass = useCSS(slotTemplate, {
-		$element: {
-			contentType: "after",
-			parentDirection: wrapperDirection,
-			direction: afterContentDirection,
-			alignX: afterContentAlignX,
-			alignY: afterContentAlignY,
-			equalCols,
-			gap,
-			extraStyles: afterContentCss
-		},
-		$contentType: "after"
-	});
 	const WRAPPER_PROPS = {
 		ref: ref ?? innerRef,
 		extendCss: css,
@@ -286,24 +295,46 @@ 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,
 		isInline,
 		children: [
-			beforeContent && createElement(SUB_TAG, {
-				className: beforeClass,
-				"data-vl-slot": "before"
-			}, render(beforeContent)),
-			isSimpleElement ? contentRenderOutput : createElement(SUB_TAG, {
-				className: contentClass,
-				"data-vl-slot": "content"
-			}, contentRenderOutput),
-			afterContent && createElement(SUB_TAG, {
-				className: afterClass,
-				"data-vl-slot": "after"
-			}, render(afterContent))
+			beforeContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "before",
+				parentDirection: wrapperDirection,
+				extendCss: beforeContentCss,
+				direction: beforeContentDirection,
+				alignX: beforeContentAlignX,
+				alignY: beforeContentAlignY,
+				equalCols,
+				gap,
+				children: beforeContent
+			}),
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "content",
+				parentDirection: wrapperDirection,
+				extendCss: contentCss,
+				direction: contentDirection,
+				alignX: contentAlignX,
+				alignY: contentAlignY,
+				equalCols,
+				children: CHILDREN
+			}),
+			afterContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "after",
+				parentDirection: wrapperDirection,
+				extendCss: afterContentCss,
+				direction: afterContentDirection,
+				alignX: afterContentAlignX,
+				alignY: afterContentAlignY,
+				equalCols,
+				gap,
+				children: afterContent
+			})
 		]
 	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "1.4.3-alpha.1+cf4e0a6",
+  "version": "1.4.3-alpha.3+16703b4",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -61,15 +61,15 @@
     "react-dom": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "1.4.3-alpha.1+cf4e0a6",
-    "@vitus-labs/rocketstyle": "1.4.3-alpha.1+cf4e0a6",
+    "@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.3-alpha.1+cf4e0a6"
+    "@vitus-labs/unistyle": "1.4.3-alpha.3+16703b4"
   },
   "dependencies": {
     "react-is": "^19.2.3"
   },
-  "gitHead": "cf4e0a6230687c5c7acc2e07a3248bae4ae55f07"
+  "gitHead": "16703b4c8dc0525bd504c531aeb082bf593579cc"
 }