@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260918101819 → 0.8.1-dev.20260919082926

package/dist/{DataBindingControls-54BNRIUZ.mjs → DataBindingControls-2UETIUJJ.mjs}

@@ -13,7 +13,7 @@ import { useRouter } from "next/navigation";
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic from "next/dynamic";
-var InputControl = dynamic(() => import("./InputControlClient-IZXNAD2P.mjs"), {
+var InputControl = dynamic(() => import("./InputControlClient-M4D4WJVQ.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;

package/dist/{DataBindingControls-AJKE3EWG.mjs → DataBindingControls-CHXAZSAC.mjs}

@@ -3,7 +3,7 @@
 "use client";
 import {
   InputControl_default
-} from "./chunk-XMAYRT62.mjs";
+} from "./chunk-HVJZPJGV.mjs";
 import {
   Button_default
 } from "./chunk-LSKD5U3S.mjs";

package/dist/{InputControlClient-SROI2BE2.mjs → InputControlClient-H7BLOV3P.mjs}

@@ -18,7 +18,7 @@ import {
   SelectWithSearchInput_default,
   Select_default,
   TimeInput_default
-} from "./chunk-A5UTFK4O.mjs";
+} from "./chunk-OC3VBCRR.mjs";
 import {
   Hyperlink,
   Icon_default

package/dist/{InputControlClient-IZXNAD2P.mjs → InputControlClient-M4D4WJVQ.mjs}

@@ -635,8 +635,20 @@ var DateTimeInput_default = DateTimeInput;
 // src/components/controls/edit/ColorInput.tsx
 import React11, { useEffect as useEffect2 } from "react";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_COLOR = "#3b82f6";
 var ColorInput = (props) => {
-  const [color, setColor] = React11.useState("#3b82f6");
+  const [color, setColor] = React11.useState(DEFAULT_COLOR);
+  useEffect2(() => {
+    const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
+    if (!hasValue && props.callback && !props.attributes?.readOnly) {
+      props.callback({
+        name: props.name,
+        value: DEFAULT_COLOR,
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+  }, []);
   useEffect2(() => {
     if (props.value !== void 0 && props.value !== null) {
       if (typeof props.value === "string") {
@@ -670,7 +682,8 @@ var ColorInput = (props) => {
         value: color,
         onChange: handleColorChange,
         required: props?.attributes?.required,
-        className: `block cursor-pointer`,
+        disabled: props?.attributes?.readOnly,
+        className: `peer block cursor-pointer`,
         style: {
           width: "78px",
           height: "33px",
@@ -685,7 +698,7 @@ var ColorInput = (props) => {
         }
       }
     ),
-    props?.attributes?.errorMessage && /* @__PURE__ */ jsx11("p", { className: "mt-1 bg-error-weak text-sm", children: props.attributes.errorMessage })
+    /* @__PURE__ */ jsx11("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
   ] });
 };
 var ColorInput_default = ColorInput;

package/dist/{chunk-XMAYRT62.mjs → chunk-HVJZPJGV.mjs}

@@ -3,7 +3,7 @@
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic from "next/dynamic";
-var InputControl = dynamic(() => import("./InputControlClient-SROI2BE2.mjs"), {
+var InputControl = dynamic(() => import("./InputControlClient-H7BLOV3P.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;

package/dist/{chunk-A5UTFK4O.mjs → chunk-OC3VBCRR.mjs}

@@ -619,8 +619,20 @@ var DateTimeInput_default = DateTimeInput;
 // src/components/controls/edit/ColorInput.tsx
 import React11, { useEffect as useEffect2 } from "react";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_COLOR = "#3b82f6";
 var ColorInput = (props) => {
-  const [color, setColor] = React11.useState("#3b82f6");
+  const [color, setColor] = React11.useState(DEFAULT_COLOR);
+  useEffect2(() => {
+    const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
+    if (!hasValue && props.callback && !props.attributes?.readOnly) {
+      props.callback({
+        name: props.name,
+        value: DEFAULT_COLOR,
+        index: props.index,
+        groupKey: props.groupKey
+      });
+    }
+  }, []);
   useEffect2(() => {
     if (props.value !== void 0 && props.value !== null) {
       if (typeof props.value === "string") {
@@ -654,7 +666,8 @@ var ColorInput = (props) => {
         value: color,
         onChange: handleColorChange,
         required: props?.attributes?.required,
-        className: `block cursor-pointer`,
+        disabled: props?.attributes?.readOnly,
+        className: `peer block cursor-pointer`,
         style: {
           width: "78px",
           height: "33px",
@@ -669,7 +682,7 @@ var ColorInput = (props) => {
         }
       }
     ),
-    props?.attributes?.errorMessage && /* @__PURE__ */ jsx11("p", { className: "mt-1 bg-error-weak text-sm", children: props.attributes.errorMessage })
+    /* @__PURE__ */ jsx11("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
   ] });
 };
 var ColorInput_default = ColorInput;

package/dist/index.js

@@ -2865,14 +2865,26 @@ var init_DateTimeInput = __esm({
 });
 
 // src/components/controls/edit/ColorInput.tsx
-var import_react33, import_jsx_runtime40, ColorInput, ColorInput_default;
+var import_react33, import_jsx_runtime40, DEFAULT_COLOR, ColorInput, ColorInput_default;
 var init_ColorInput = __esm({
   "src/components/controls/edit/ColorInput.tsx"() {
     "use strict";
     import_react33 = __toESM(require("react"));
     import_jsx_runtime40 = require("react/jsx-runtime");
+    DEFAULT_COLOR = "#3b82f6";
     ColorInput = (props) => {
-      const [color, setColor] = import_react33.default.useState("#3b82f6");
+      const [color, setColor] = import_react33.default.useState(DEFAULT_COLOR);
+      (0, import_react33.useEffect)(() => {
+        const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
+        if (!hasValue && props.callback && !props.attributes?.readOnly) {
+          props.callback({
+            name: props.name,
+            value: DEFAULT_COLOR,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      }, []);
       (0, import_react33.useEffect)(() => {
         if (props.value !== void 0 && props.value !== null) {
           if (typeof props.value === "string") {
@@ -2906,7 +2918,8 @@ var init_ColorInput = __esm({
             value: color,
             onChange: handleColorChange,
             required: props?.attributes?.required,
-            className: `block cursor-pointer`,
+            disabled: props?.attributes?.readOnly,
+            className: `peer block cursor-pointer`,
             style: {
               width: "78px",
               height: "33px",
@@ -2921,7 +2934,7 @@ var init_ColorInput = __esm({
             }
           }
         ),
-        props?.attributes?.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-1 bg-error-weak text-sm", children: props.attributes.errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
       ] });
     };
     ColorInput_default = ColorInput;
@@ -8163,6 +8176,30 @@ var getNestedValue5 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
+var parseDocuments = (value) => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
+      try {
+        return parseDocuments(JSON.parse(trimmed));
+      } catch {
+        return [];
+      }
+    }
+    return [{ assetUrl: trimmed }];
+  }
+  if (Array.isArray(value)) {
+    return value.filter(
+      (item) => Boolean(item && typeof item === "object" && typeof item.assetUrl === "string" && item.assetUrl.trim())
+    );
+  }
+  if (value && typeof value === "object" && "assetUrl" in value) {
+    const asset = value;
+    return typeof asset.assetUrl === "string" && asset.assetUrl.trim() ? [asset] : [];
+  }
+  return [];
+};
 var PdfIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
   "svg",
   {
@@ -8473,38 +8510,13 @@ var getFileDetails2 = (url) => {
   return { Icon: Icon2, extLabel };
 };
 var DocumentNode = (props) => {
-  console.log("DocumentNode rendered");
-  console.log("props", props);
-  console.log("node", props.node);
   let documents = [];
   if (props.dataitem && props.node.documentKey) {
     const docData = getNestedValue5(props.dataitem, props.node.documentKey);
-    if (typeof docData === "string") {
-      const trimmed = docData.trim();
-      if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
-        try {
-          const parsed = JSON.parse(trimmed);
-          if (Array.isArray(parsed)) {
-            documents = parsed.filter(
-              (item) => item && item.assetUrl
-            );
-          } else if (parsed?.assetUrl) {
-            documents = [parsed];
-          }
-        } catch {
-        }
-      } else {
-        documents = [
-          {
-            assetUrl: docData
-          }
-        ];
-      }
-    } else if (Array.isArray(docData)) {
-      documents = docData.filter((item) => item && item.assetUrl);
-    } else if (docData && typeof docData === "object" && docData.assetUrl) {
-      documents = [docData];
-    }
+    documents = parseDocuments(docData);
+  }
+  if (documents.length === 0 && props.node.documentAsset) {
+    documents = parseDocuments(props.node.documentAsset);
   }
   if (documents.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_jsx_runtime82.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [

package/dist/index.mjs

@@ -8,7 +8,7 @@ import {
 } from "./chunk-SNDGEYWZ.mjs";
 import {
   InputControl_default
-} from "./chunk-XMAYRT62.mjs";
+} from "./chunk-HVJZPJGV.mjs";
 import "./chunk-JDX47MFV.mjs";
 import {
   CheckboxInput_default,
@@ -27,7 +27,7 @@ import {
   SelectWithSearchInput_default,
   Select_default,
   TimeInput_default
-} from "./chunk-A5UTFK4O.mjs";
+} from "./chunk-OC3VBCRR.mjs";
 import {
   Hyperlink,
   Icon_default
@@ -1926,6 +1926,30 @@ var getNestedValue5 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
+var parseDocuments = (value) => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
+      try {
+        return parseDocuments(JSON.parse(trimmed));
+      } catch {
+        return [];
+      }
+    }
+    return [{ assetUrl: trimmed }];
+  }
+  if (Array.isArray(value)) {
+    return value.filter(
+      (item) => Boolean(item && typeof item === "object" && typeof item.assetUrl === "string" && item.assetUrl.trim())
+    );
+  }
+  if (value && typeof value === "object" && "assetUrl" in value) {
+    const asset = value;
+    return typeof asset.assetUrl === "string" && asset.assetUrl.trim() ? [asset] : [];
+  }
+  return [];
+};
 var PdfIcon = () => /* @__PURE__ */ jsxs13(
   "svg",
   {
@@ -2236,38 +2260,13 @@ var getFileDetails = (url) => {
   return { Icon, extLabel };
 };
 var DocumentNode = (props) => {
-  console.log("DocumentNode rendered");
-  console.log("props", props);
-  console.log("node", props.node);
   let documents = [];
   if (props.dataitem && props.node.documentKey) {
     const docData = getNestedValue5(props.dataitem, props.node.documentKey);
-    if (typeof docData === "string") {
-      const trimmed = docData.trim();
-      if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
-        try {
-          const parsed = JSON.parse(trimmed);
-          if (Array.isArray(parsed)) {
-            documents = parsed.filter(
-              (item) => item && item.assetUrl
-            );
-          } else if (parsed?.assetUrl) {
-            documents = [parsed];
-          }
-        } catch {
-        }
-      } else {
-        documents = [
-          {
-            assetUrl: docData
-          }
-        ];
-      }
-    } else if (Array.isArray(docData)) {
-      documents = docData.filter((item) => item && item.assetUrl);
-    } else if (docData && typeof docData === "object" && docData.assetUrl) {
-      documents = [docData];
-    }
+    documents = parseDocuments(docData);
+  }
+  if (documents.length === 0 && props.node.documentAsset) {
+    documents = parseDocuments(props.node.documentAsset);
   }
   if (documents.length === 0) {
     return /* @__PURE__ */ jsx34(Fragment6, { children: /* @__PURE__ */ jsxs13("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [
@@ -2392,7 +2391,7 @@ var GoogleMapNode_default = GoogleMapNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Pagination = dynamic13(() => import("./Pagination-BDWRNSFB.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-AJKE3EWG.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-CHXAZSAC.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {

package/dist/server.js

@@ -4344,14 +4344,26 @@ var init_DateTimeInput = __esm({
 });
 
 // src/components/controls/edit/ColorInput.tsx
-var import_react49, import_jsx_runtime74, ColorInput, ColorInput_default;
+var import_react49, import_jsx_runtime74, DEFAULT_COLOR, ColorInput, ColorInput_default;
 var init_ColorInput = __esm({
   "src/components/controls/edit/ColorInput.tsx"() {
     "use strict";
     import_react49 = __toESM(require("react"));
     import_jsx_runtime74 = require("react/jsx-runtime");
+    DEFAULT_COLOR = "#3b82f6";
     ColorInput = (props) => {
-      const [color, setColor] = import_react49.default.useState("#3b82f6");
+      const [color, setColor] = import_react49.default.useState(DEFAULT_COLOR);
+      (0, import_react49.useEffect)(() => {
+        const hasValue = props.value !== void 0 && props.value !== null && props.value !== "";
+        if (!hasValue && props.callback && !props.attributes?.readOnly) {
+          props.callback({
+            name: props.name,
+            value: DEFAULT_COLOR,
+            index: props.index,
+            groupKey: props.groupKey
+          });
+        }
+      }, []);
       (0, import_react49.useEffect)(() => {
         if (props.value !== void 0 && props.value !== null) {
           if (typeof props.value === "string") {
@@ -4385,7 +4397,8 @@ var init_ColorInput = __esm({
             value: color,
             onChange: handleColorChange,
             required: props?.attributes?.required,
-            className: `block cursor-pointer`,
+            disabled: props?.attributes?.readOnly,
+            className: `peer block cursor-pointer`,
             style: {
               width: "78px",
               height: "33px",
@@ -4400,7 +4413,7 @@ var init_ColorInput = __esm({
             }
           }
         ),
-        props?.attributes?.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "mt-1 bg-error-weak text-sm", children: props.attributes.errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "hidden group-[.validated]:peer-invalid:block mt-1 bg-error-weak text-sm", children: props?.attributes?.errorMessage ? props.attributes.errorMessage : "" })
       ] });
     };
     ColorInput_default = ColorInput;
@@ -8132,6 +8145,30 @@ var getNestedValue5 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
+var parseDocuments = (value) => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
+      try {
+        return parseDocuments(JSON.parse(trimmed));
+      } catch {
+        return [];
+      }
+    }
+    return [{ assetUrl: trimmed }];
+  }
+  if (Array.isArray(value)) {
+    return value.filter(
+      (item) => Boolean(item && typeof item === "object" && typeof item.assetUrl === "string" && item.assetUrl.trim())
+    );
+  }
+  if (value && typeof value === "object" && "assetUrl" in value) {
+    const asset = value;
+    return typeof asset.assetUrl === "string" && asset.assetUrl.trim() ? [asset] : [];
+  }
+  return [];
+};
 var PdfIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
   "svg",
   {
@@ -8442,38 +8479,13 @@ var getFileDetails2 = (url) => {
   return { Icon: Icon2, extLabel };
 };
 var DocumentNode = (props) => {
-  console.log("DocumentNode rendered");
-  console.log("props", props);
-  console.log("node", props.node);
   let documents = [];
   if (props.dataitem && props.node.documentKey) {
     const docData = getNestedValue5(props.dataitem, props.node.documentKey);
-    if (typeof docData === "string") {
-      const trimmed = docData.trim();
-      if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
-        try {
-          const parsed = JSON.parse(trimmed);
-          if (Array.isArray(parsed)) {
-            documents = parsed.filter(
-              (item) => item && item.assetUrl
-            );
-          } else if (parsed?.assetUrl) {
-            documents = [parsed];
-          }
-        } catch {
-        }
-      } else {
-        documents = [
-          {
-            assetUrl: docData
-          }
-        ];
-      }
-    } else if (Array.isArray(docData)) {
-      documents = docData.filter((item) => item && item.assetUrl);
-    } else if (docData && typeof docData === "object" && docData.assetUrl) {
-      documents = [docData];
-    }
+    documents = parseDocuments(docData);
+  }
+  if (documents.length === 0 && props.node.documentAsset) {
+    documents = parseDocuments(props.node.documentAsset);
   }
   if (documents.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [

package/dist/server.mjs

@@ -1894,6 +1894,30 @@ var getNestedValue5 = (obj, path) => {
     return current && current[key] !== void 0 ? current[key] : void 0;
   }, obj);
 };
+var parseDocuments = (value) => {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return [];
+    if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
+      try {
+        return parseDocuments(JSON.parse(trimmed));
+      } catch {
+        return [];
+      }
+    }
+    return [{ assetUrl: trimmed }];
+  }
+  if (Array.isArray(value)) {
+    return value.filter(
+      (item) => Boolean(item && typeof item === "object" && typeof item.assetUrl === "string" && item.assetUrl.trim())
+    );
+  }
+  if (value && typeof value === "object" && "assetUrl" in value) {
+    const asset = value;
+    return typeof asset.assetUrl === "string" && asset.assetUrl.trim() ? [asset] : [];
+  }
+  return [];
+};
 var PdfIcon = () => /* @__PURE__ */ jsxs13(
   "svg",
   {
@@ -2204,38 +2228,13 @@ var getFileDetails = (url) => {
   return { Icon, extLabel };
 };
 var DocumentNode = (props) => {
-  console.log("DocumentNode rendered");
-  console.log("props", props);
-  console.log("node", props.node);
   let documents = [];
   if (props.dataitem && props.node.documentKey) {
     const docData = getNestedValue5(props.dataitem, props.node.documentKey);
-    if (typeof docData === "string") {
-      const trimmed = docData.trim();
-      if (trimmed.startsWith("[") || trimmed.startsWith("{")) {
-        try {
-          const parsed = JSON.parse(trimmed);
-          if (Array.isArray(parsed)) {
-            documents = parsed.filter(
-              (item) => item && item.assetUrl
-            );
-          } else if (parsed?.assetUrl) {
-            documents = [parsed];
-          }
-        } catch {
-        }
-      } else {
-        documents = [
-          {
-            assetUrl: docData
-          }
-        ];
-      }
-    } else if (Array.isArray(docData)) {
-      documents = docData.filter((item) => item && item.assetUrl);
-    } else if (docData && typeof docData === "object" && docData.assetUrl) {
-      documents = [docData];
-    }
+    documents = parseDocuments(docData);
+  }
+  if (documents.length === 0 && props.node.documentAsset) {
+    documents = parseDocuments(props.node.documentAsset);
   }
   if (documents.length === 0) {
     return /* @__PURE__ */ jsx34(Fragment6, { children: /* @__PURE__ */ jsxs13("div", { className: "py-4 px-2 bg-neutral-weak border rounded text-center flex flex-col gap-2", children: [
@@ -2360,7 +2359,7 @@ var GoogleMapNode_default = GoogleMapNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Pagination = dynamic13(() => import("./Pagination-OSLUL7SF.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-54BNRIUZ.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-2UETIUJJ.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-QIGKP6AE.mjs"), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clyrex-digital/clyrex-controls-dev",
-  "version": "0.8.1-dev.20260918101819",
+  "version": "0.8.1-dev.20260919082926",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",