@camstack/ui-library 1.2.277 → 1.2.278

package/dist/composites/config-form-builder.d.ts

@@ -20,5 +20,16 @@ interface FormBuilderProps {
 	*/
 	bare?: boolean;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+export declare function sectionGridClass(columns: 1 | 2 | 3 | 4 | undefined): string;
 export declare function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe, bare }: FormBuilderProps): JSX.Element;
 export {};

package/dist/index.cjs

@@ -30125,11 +30125,27 @@ function resolveLabel(value, t) {
 	if (t && isI18nKey(value)) return t(value);
 	return value;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+function sectionGridClass(columns) {
+	const cols = columns ?? 2;
+	if (cols === 1) return "grid-cols-1";
+	if (cols === 3) return "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3";
+	if (cols === 4) return "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4";
+	return "grid-cols-1 @[480px]:grid-cols-2";
+}
 function SectionCard$1({ section, values, onChange, disabled, translationFn, onTestField, probeResults }) {
 	const [collapsed, setCollapsed] = (0, react$1.useState)(section.defaultCollapsed ?? false);
 	const isAccordion = section.style === "accordion";
-	const columns = section.columns ?? 2;
-	const gridClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3" : columns === 4 ? "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4" : "grid-cols-1 @[480px]:grid-cols-2";
+	const gridClass = sectionGridClass(section.columns);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "@container rounded-lg border border-border bg-surface p-3",
 		style: { containerType: "inline-size" },
@@ -30169,16 +30185,23 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		onClearProbe?.(key);
 	};
 	if (bare) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "grid grid-cols-1 gap-y-2.5",
-		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-			field,
-			values,
-			onChange: handleFieldChange,
-			disabled,
-			translationFn,
-			onTestField,
-			externalProbe: probeResults?.[field.key]
-		}, field.key)))
+		className: "space-y-4",
+		children: schema.sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "@container",
+			style: { containerType: "inline-size" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `grid ${sectionGridClass(section.columns)} gap-x-3 gap-y-2.5`,
+				children: section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
+					field,
+					values,
+					onChange: handleFieldChange,
+					disabled,
+					translationFn,
+					onTestField,
+					externalProbe: probeResults?.[field.key]
+				}, field.key))
+			})
+		}, section.id))
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "space-y-4",

package/dist/index.js

@@ -30101,11 +30101,27 @@ function resolveLabel(value, t) {
 	if (t && isI18nKey(value)) return t(value);
 	return value;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+function sectionGridClass(columns) {
+	const cols = columns ?? 2;
+	if (cols === 1) return "grid-cols-1";
+	if (cols === 3) return "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3";
+	if (cols === 4) return "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4";
+	return "grid-cols-1 @[480px]:grid-cols-2";
+}
 function SectionCard$1({ section, values, onChange, disabled, translationFn, onTestField, probeResults }) {
 	const [collapsed, setCollapsed] = useState(section.defaultCollapsed ?? false);
 	const isAccordion = section.style === "accordion";
-	const columns = section.columns ?? 2;
-	const gridClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3" : columns === 4 ? "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4" : "grid-cols-1 @[480px]:grid-cols-2";
+	const gridClass = sectionGridClass(section.columns);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "@container rounded-lg border border-border bg-surface p-3",
 		style: { containerType: "inline-size" },
@@ -30145,16 +30161,23 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		onClearProbe?.(key);
 	};
 	if (bare) return /* @__PURE__ */ jsx("div", {
-		className: "grid grid-cols-1 gap-y-2.5",
-		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
-			field,
-			values,
-			onChange: handleFieldChange,
-			disabled,
-			translationFn,
-			onTestField,
-			externalProbe: probeResults?.[field.key]
-		}, field.key)))
+		className: "space-y-4",
+		children: schema.sections.map((section) => /* @__PURE__ */ jsx("div", {
+			className: "@container",
+			style: { containerType: "inline-size" },
+			children: /* @__PURE__ */ jsx("div", {
+				className: `grid ${sectionGridClass(section.columns)} gap-x-3 gap-y-2.5`,
+				children: section.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
+					field,
+					values,
+					onChange: handleFieldChange,
+					disabled,
+					translationFn,
+					onTestField,
+					externalProbe: probeResults?.[field.key]
+				}, field.key))
+			})
+		}, section.id))
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.277",
+  "version": "1.2.278",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",