@vitus-labs/coolgrid 2.0.0-alpha.9 → 2.0.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @vitus-labs/coolgrid
 
-Responsive grid system for React and styled-components.
+Responsive grid system for React.
 
 [![npm](https://img.shields.io/npm/v/@vitus-labs/coolgrid)](https://www.npmjs.com/package/@vitus-labs/coolgrid)
 [![license](https://img.shields.io/npm/l/@vitus-labs/coolgrid)](https://github.com/vitus-labs/ui-system/blob/main/LICENSE)
@@ -20,7 +20,7 @@ Bootstrap-inspired Container / Row / Col grid with context-cascading configurati
 ## Installation
 
 ```bash
-npm install @vitus-labs/coolgrid @vitus-labs/core @vitus-labs/unistyle styled-components
+npm install @vitus-labs/coolgrid @vitus-labs/core @vitus-labs/unistyle
 ```
 
 ## Quick Start
@@ -213,6 +213,10 @@ All numeric props support three formats:
 <Col size={{ xs: 12, md: 6, lg: 4 }} />
 ```
 
+## React Native
+
+Coolgrid includes native components (`Col.native.tsx`, `Row.native.tsx`) that use `onLayout` measurement instead of CSS `calc()`. Works automatically when initialized with `@vitus-labs/connector-native`.
+
 ## Peer Dependencies
 
 | Package | Version |
@@ -220,7 +224,7 @@ All numeric props support three formats:
 | react | >= 19 |
 | @vitus-labs/core | * |
 | @vitus-labs/unistyle | * |
-| styled-components | >= 6 |
+| react-native | >= 0.76 (optional) |
 
 ## License
 

package/lib/index.js

@@ -84,12 +84,14 @@ const widthStyles = ({ size, columns, gap, RNparentWidth }, { rootSize }) => {
 	const c = columns;
 	const g = gap;
 	const width = s / c * 100;
-	const val = hasValue(gap) ? `calc(${width}% - ${g}px)` : `${width}%`;
+	const v = value(hasValue(gap) ? `calc(${width}% - ${g}px)` : `${width}%`, rootSize);
 	return css$2`
     flex-grow: 0;
     flex-shrink: 0;
-    max-width: ${value(val, rootSize)};
-    flex-basis: ${value(val, rootSize)};
+    ${css$2`
+      max-width: ${v};
+      flex-basis: ${v};
+    `}
   `;
 };
 /** Applies half of the given value as either margin or padding (used for gap and padding distribution). */
@@ -107,7 +109,7 @@ const spacingStyles$1 = (type, param, rootSize) => {
 const styles$2 = ({ theme, css, rootSize }) => {
 	const { size, columns, gap, padding, extraStyles, RNparentWidth } = theme;
 	if (isVisible(size)) return css`
-      left: initial;
+      ${"left: initial;"}
       position: relative;
       ${widthStyles({
 		size,
@@ -121,7 +123,7 @@ const styles$2 = ({ theme, css, rootSize }) => {
     `;
 	return css`
     left: -9999px;
-    position: fixed;
+    position: ${"fixed"};
     margin: 0;
     padding: 0;
   `;
@@ -129,14 +131,14 @@ const styles$2 = ({ theme, css, rootSize }) => {
 var styled_default$2 = styled$2(component$2)`
   ${css$2`
     box-sizing: border-box;
-  `};
+    justify-content: stretch;
+  `}
 
   position: relative;
   display: flex;
   flex-basis: 0;
   flex-grow: 1;
   flex-direction: column;
-  justify-content: stretch;
 
   ${makeItResponsive({
 	key: "$coolgrid",
@@ -194,21 +196,23 @@ var Col_default = Component$2;
 //#region src/Container/styled.ts
 const { styled: styled$1, css: css$1, component: component$1 } = config;
 /** Responsive styles that apply the container's max-width and any extra CSS at each breakpoint. */
-const styles$1 = ({ theme: t, css, rootSize }) => css`
-  max-width: ${value(t.width, rootSize)};
-  ${extendCss(t.extraStyles)};
-`;
+const styles$1 = ({ theme: t, css, rootSize }) => {
+	const w = t.width != null && typeof t.width !== "object" ? t.width : null;
+	return css`
+    ${w != null ? `max-width: ${value(w, rootSize)};` : ""};
+    ${extendCss(t.extraStyles)};
+  `;
+};
 /** Styled Container element. Centered via auto margins with responsive max-width. */
 var styled_default$1 = styled$1(component$1)`
-  ${css$1`
-    box-sizing: border-box;
-  `};
-
   display: flex;
-  width: 100%;
   flex-direction: column;
-  margin-right: auto;
-  margin-left: auto;
+  ${css$1`
+    box-sizing: border-box;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+  `}
 
   ${makeItResponsive({
 	key: "$coolgrid",
@@ -228,7 +232,7 @@ var styled_default$1 = styled$1(component$1)`
 */
 const DEV_PROPS$1 = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "container" } : {};
 const Component$1 = ({ children, component, css, width, ...props }) => {
-	const { containerWidth = {}, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(props);
+	const { containerWidth, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(props);
 	const context = useMemo(() => ({
 		columns,
 		size,
@@ -289,8 +293,8 @@ const spacingStyles = ({ gap, gutter }, { rootSize }) => {
 	const getValue = (param) => value(param, rootSize);
 	const spacingX = g / 2 * -1;
 	return css`
-    margin: ${getValue(isNumber(gutter) ? gutter - g / 2 : g / 2)} ${getValue(spacingX)};
-  `;
+        margin: ${getValue(isNumber(gutter) ? gutter - g / 2 : g / 2)} ${getValue(spacingX)};
+      `;
 };
 /** Maps the contentAlignX prop to a CSS justify-content value. */
 const contentAlign = (align) => {

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

@@ -1,5 +1,5 @@
 import { ALIGN_CONTENT_MAP_X, Provider, context, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { config, get, omit, pick } from "@vitus-labs/core";
 import { jsx } from "react/jsx-runtime";
 
@@ -83,13 +83,15 @@ const widthStyles = ({ size, columns, gap, RNparentWidth }, { rootSize }) => {
 	const s = size;
 	const c = columns;
 	const g = gap;
+	if (!RNparentWidth) return "";
 	const width = RNparentWidth / c * s;
-	const val = hasValue(gap) ? width - g : width;
 	return css$2`
     flex-grow: 0;
     flex-shrink: 0;
-    max-width: ${value(val, rootSize)};
-    flex-basis: ${value(val, rootSize)};
+    ${css$2`
+      width: ${value(hasValue(gap) ? Math.max(0, width - g) : width, rootSize)};
+      flex-basis: auto;
+    `}
   `;
 };
 /** Applies half of the given value as either margin or padding (used for gap and padding distribution). */
@@ -107,7 +109,7 @@ const spacingStyles$1 = (type, param, rootSize) => {
 const styles$2 = ({ theme, css, rootSize }) => {
 	const { size, columns, gap, padding, extraStyles, RNparentWidth } = theme;
 	if (isVisible(size)) return css`
-      left: initial;
+      ${""}
       position: relative;
       ${widthStyles({
 		size,
@@ -121,20 +123,19 @@ const styles$2 = ({ theme, css, rootSize }) => {
     `;
 	return css`
     left: -9999px;
-    position: fixed;
+    position: ${"absolute"};
     margin: 0;
     padding: 0;
   `;
 };
 var styled_default$2 = styled$2(component$2)`
-  ${false};
+  ${false}
 
   position: relative;
   display: flex;
   flex-basis: 0;
   flex-grow: 1;
   flex-direction: column;
-  justify-content: stretch;
 
   ${makeItResponsive({
 	key: "$coolgrid",
@@ -145,29 +146,32 @@ var styled_default$2 = styled$2(component$2)`
 `;
 
 //#endregion
-//#region src/Col/component.tsx
+//#region src/Col/component.native.tsx
 /**
-* Col (column) component that reads grid settings from RowContext
-* (columns, gap, gutter) and calculates its own width as a fraction
-* of the total columns. Supports responsive size, padding, and visibility.
+* Native Col component that reads RNparentWidth from RowContext
+* and passes it into the styled component so column widths can be
+* computed as absolute pixels (CSS calc() is unavailable on RN).
 */
-const DEV_PROPS$2 = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "col" } : {};
 const Component$2 = ({ children, component, css, ...props }) => {
+	const parentCtx = useContext(RowContext_default);
 	const { colCss, colComponent, columns, gap, size, padding } = useGridContext({
-		...useContext(RowContext_default),
+		...parentCtx,
 		...props
 	});
+	const RNparentWidth = parentCtx.RNparentWidth ?? 0;
 	const finalProps = useMemo(() => ({ $coolgrid: {
 		columns,
 		gap,
 		size,
 		padding,
+		RNparentWidth,
 		extraStyles: css ?? colCss
 	} }), [
 		columns,
 		gap,
 		size,
 		padding,
+		RNparentWidth,
 		css,
 		colCss
 	]);
@@ -175,7 +179,6 @@ const Component$2 = ({ children, component, css, ...props }) => {
 		...omitCtxKeys(props),
 		as: component ?? colComponent,
 		...finalProps,
-		...DEV_PROPS$2,
 		children
 	});
 };
@@ -192,19 +195,18 @@ var Col_default = Component$2;
 //#region src/Container/styled.ts
 const { styled: styled$1, css: css$1, component: component$1 } = config;
 /** Responsive styles that apply the container's max-width and any extra CSS at each breakpoint. */
-const styles$1 = ({ theme: t, css, rootSize }) => css`
-  max-width: ${value(t.width, rootSize)};
-  ${extendCss(t.extraStyles)};
-`;
+const styles$1 = ({ theme: t, css, rootSize }) => {
+	const w = t.width != null && typeof t.width !== "object" ? t.width : null;
+	return css`
+    ${w != null ? `max-width: ${value(w, rootSize)};` : ""};
+    ${extendCss(t.extraStyles)};
+  `;
+};
 /** Styled Container element. Centered via auto margins with responsive max-width. */
 var styled_default$1 = styled$1(component$1)`
-  ${false};
-
   display: flex;
-  width: 100%;
   flex-direction: column;
-  margin-right: auto;
-  margin-left: auto;
+  ${false}
 
   ${makeItResponsive({
 	key: "$coolgrid",
@@ -222,9 +224,9 @@ var styled_default$1 = styled$1(component$1)`
 * components via ContainerContext, and renders a styled wrapper with
 * responsive max-width.
 */
-const DEV_PROPS$1 = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "container" } : {};
+const DEV_PROPS = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "container" } : {};
 const Component$1 = ({ children, component, css, width, ...props }) => {
-	const { containerWidth = {}, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(props);
+	const { containerWidth, columns, size, gap, padding, gutter, colCss, colComponent, rowCss, rowComponent, contentAlignX } = useGridContext(props);
 	const context = useMemo(() => ({
 		columns,
 		size,
@@ -260,7 +262,7 @@ const Component$1 = ({ children, component, css, width, ...props }) => {
 		...omitCtxKeys(props),
 		as: component,
 		...finalProps,
-		...DEV_PROPS$1,
+		...DEV_PROPS,
 		children: /* @__PURE__ */ jsx(ContainerContext_default.Provider, {
 			value: context,
 			children
@@ -284,9 +286,13 @@ const spacingStyles = ({ gap, gutter }, { rootSize }) => {
 	const g = gap;
 	const getValue = (param) => value(param, rootSize);
 	const spacingX = g / 2 * -1;
+	const spacingY = isNumber(gutter) ? gutter - g / 2 : g / 2;
 	return css`
-    margin: ${getValue(isNumber(gutter) ? gutter - g / 2 : g / 2)} ${getValue(spacingX)};
-  `;
+        margin-top: ${getValue(spacingY)};
+        margin-bottom: ${getValue(spacingY)};
+        margin-left: ${getValue(spacingX)};
+        margin-right: ${getValue(spacingX)};
+      `;
 };
 /** Maps the contentAlignX prop to a CSS justify-content value. */
 const contentAlign = (align) => {
@@ -324,17 +330,17 @@ var styled_default = styled(component)`
 `;
 
 //#endregion
-//#region src/Row/component.tsx
+//#region src/Row/component.native.tsx
 /**
-* Row component that reads inherited config from ContainerContext, merges
-* it with its own props, and provides the resolved grid settings (columns,
-* gap, gutter) to Col children via RowContext. Renders a flex-wrap container
-* with negative margins to offset column gutters.
+* Native Row component that measures its own width via onLayout and passes
+* it as RNparentWidth through RowContext so Col children can compute
+* absolute pixel widths (CSS calc() is unavailable on React Native).
 */
-const DEV_PROPS = process.env.NODE_ENV !== "production" ? { "data-coolgrid": "row" } : {};
 const Component = ({ children, component, css, contentAlignX: rowAlignX, ...props }) => {
+	const parentCtx = useContext(ContainerContext_default);
+	const [parentWidth, setParentWidth] = useState(0);
 	const { columns, gap, gutter, rowComponent, rowCss, contentAlignX, containerWidth, size, padding, colCss, colComponent } = useGridContext({
-		...useContext(ContainerContext_default),
+		...parentCtx,
 		...props
 	});
 	const context = useMemo(() => ({
@@ -345,7 +351,8 @@ const Component = ({ children, component, css, contentAlignX: rowAlignX, ...prop
 		colComponent,
 		columns,
 		gap,
-		gutter
+		gutter,
+		RNparentWidth: parentWidth
 	}), [
 		containerWidth,
 		size,
@@ -354,7 +361,8 @@ const Component = ({ children, component, css, contentAlignX: rowAlignX, ...prop
 		colComponent,
 		columns,
 		gap,
-		gutter
+		gutter,
+		parentWidth
 	]);
 	const finalProps = useMemo(() => ({ $coolgrid: {
 		contentAlignX: rowAlignX || contentAlignX,
@@ -371,11 +379,15 @@ const Component = ({ children, component, css, contentAlignX: rowAlignX, ...prop
 		css,
 		rowCss
 	]);
+	const onLayout = useCallback((e) => {
+		const newWidth = e?.nativeEvent?.layout?.width;
+		if (newWidth != null) setParentWidth((prev) => prev === newWidth ? prev : newWidth);
+	}, []);
 	return /* @__PURE__ */ jsx(styled_default, {
 		...omitCtxKeys(props),
 		as: component || rowComponent,
 		...finalProps,
-		...DEV_PROPS,
+		onLayout,
 		children: /* @__PURE__ */ jsx(RowContext_default.Provider, {
 			value: context,
 			children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/coolgrid",
-  "version": "2.0.0-alpha.9+f2f47db",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -10,11 +10,13 @@
   "sideEffects": false,
   "exports": {
     "source": "./src/index.ts",
+    "react-native": "./lib/vitus-labs-coolgrid.native.js",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
   "react-native": "./lib/vitus-labs-coolgrid.native.js",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -56,19 +58,27 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "cover": "coveralls < .coverage/lcov.info",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "version": "node ../../scripts/sync-peer-deps.mjs"
   },
   "peerDependencies": {
-    "@vitus-labs/core": "^1.4.0",
-    "@vitus-labs/unistyle": "^1.4.0",
-    "react": ">= 19"
+    "@vitus-labs/core": "2.0.0-alpha.27",
+    "@vitus-labs/unistyle": "2.0.0-alpha.27",
+    "react": ">= 19",
+    "react-native": ">= 0.76"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@vitus-labs/core": "2.0.0-alpha.9+f2f47db",
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-storybook": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "2.0.0-alpha.9+f2f47db"
+    "@vitus-labs/core": "2.0.0-beta.0",
+    "@vitus-labs/tools-rolldown": "1.10.0",
+    "@vitus-labs/tools-storybook": "1.10.0",
+    "@vitus-labs/tools-typescript": "1.10.0",
+    "@vitus-labs/unistyle": "2.0.0-beta.0",
+    "react-native": ">=0.76.0"
   },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+  "gitHead": "dd8b9f356086ecd8bfb69c87fcad1e8bfa9ab1f4"
 }