@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260910063325 → 0.8.1-dev.20260916063140

package/dist/{DataBindingControls-44OP5UE6.mjs → DataBindingControls-2CSX5L5I.mjs}

@@ -3,10 +3,14 @@
 "use client";
 import {
   InputControl_default
-} from "./chunk-PIMVBXWS.mjs";
+} from "./chunk-6GVLDYCQ.mjs";
+import {
+  Button_default
+} from "./chunk-LSKD5U3S.mjs";
 import {
   InputControlType_default
 } from "./chunk-DTWPZPSX.mjs";
+import "./chunk-IMNQO57B.mjs";
 
 // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -40,6 +44,21 @@ var parseODataSearch = (value) => {
   }
   return trimmedValue;
 };
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
 var normalizeSortOption = (option) => {
   const direction = option.direction.trim();
   return {
@@ -139,19 +158,17 @@ var DataBindingControls = ({
     },
     [router]
   );
-  useEffect(() => {
+  const handleSearch = useCallback(async () => {
     const trimmedSearchText = searchText.trim();
     if (trimmedSearchText === currentSearch.trim()) {
-      return;
+      return { isSuccessful: true };
     }
-    const timeout = window.setTimeout(() => {
-      navigateWithoutReload(
-        getQueryUrl({
-          "$search": trimmedSearchText || void 0
-        })
-      );
-    }, 500);
-    return () => window.clearTimeout(timeout);
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
   }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
   const hasFacetControls = showFacets && facetGroups.length > 0;
   const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -193,20 +210,57 @@ var DataBindingControls = ({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
     shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        InputControl_default,
+      showSearchBar && /* @__PURE__ */ jsxs(
+        "form",
         {
-          name: "searchText",
-          controlType: InputControlType_default.lineTextInput,
-          value: searchText,
-          callback: (updatedValues) => setSearchText(updatedValues.value),
-          attributes: { placeholder: "Search" },
-          inputClasses: "!mt-0"
+          role: "search",
+          className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSearch();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+              /* @__PURE__ */ jsx(
+                InputControl_default,
+                {
+                  name: "searchText",
+                  controlType: InputControlType_default.lineTextInput,
+                  value: searchText,
+                  callback: (updatedValues) => setSearchText(updatedValues.value),
+                  attributes: {
+                    placeholder: "Search discussions, topics, or keywords..."
+                  },
+                  inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button_default,
+              {
+                ButtonType: "Primary" /* Solid */,
+                onClick: handleSearch,
+                className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsx("span", { children: "Search" })
+                ]
+              }
+            )
+          ]
         }
-      ) }),
-      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+      ),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
         /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "sortOptions",
+            className: "shrink-0 whitespace-nowrap font-medium",
+            children: "Sort by"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
           InputControl_default,
           {
             name: "sortOptions",
@@ -222,9 +276,9 @@ var DataBindingControls = ({
               })
             ),
             attributes: { placeholder: "Default" },
-            inputClasses: "!mt-0 min-w-44"
+            inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
           }
-        )
+        ) })
       ] })
     ] }),
     shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),

package/dist/{DataBindingControls-6VOZSGOL.mjs → DataBindingControls-F72KPWHV.mjs}

@@ -2,6 +2,10 @@
 import {
   InputControlType_default
 } from "./chunk-IEY342PD.mjs";
+import {
+  Button_default
+} from "./chunk-4WMSS6CE.mjs";
+import "./chunk-56HSDML5.mjs";
 
 // src/components/pageRenderingEngine/nodes/DataBindingControls.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -9,7 +13,7 @@ import { useRouter } from "next/navigation";
 
 // src/components/controls/edit/InputControl.tsx
 import dynamic from "next/dynamic";
-var InputControl = dynamic(() => import("./InputControlClient-3GUBYGP2.mjs"), {
+var InputControl = dynamic(() => import("./InputControlClient-BZPWT7KE.mjs"), {
   ssr: false
 });
 var InputControl_default = InputControl;
@@ -44,6 +48,21 @@ var parseODataSearch = (value) => {
   }
   return trimmedValue;
 };
+var SearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+    ]
+  }
+);
 var normalizeSortOption = (option) => {
   const direction = option.direction.trim();
   return {
@@ -143,19 +162,17 @@ var DataBindingControls = ({
     },
     [router]
   );
-  useEffect(() => {
+  const handleSearch = useCallback(async () => {
     const trimmedSearchText = searchText.trim();
     if (trimmedSearchText === currentSearch.trim()) {
-      return;
+      return { isSuccessful: true };
     }
-    const timeout = window.setTimeout(() => {
-      navigateWithoutReload(
-        getQueryUrl({
-          "$search": trimmedSearchText || void 0
-        })
-      );
-    }, 500);
-    return () => window.clearTimeout(timeout);
+    navigateWithoutReload(
+      getQueryUrl({
+        "$search": trimmedSearchText || void 0
+      })
+    );
+    return { isSuccessful: true };
   }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
   const hasFacetControls = showFacets && facetGroups.length > 0;
   const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -197,20 +214,57 @@ var DataBindingControls = ({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
     shouldShowToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-      showSearchBar && /* @__PURE__ */ jsx("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ jsx(
-        InputControl_default,
+      showSearchBar && /* @__PURE__ */ jsxs(
+        "form",
         {
-          name: "searchText",
-          controlType: InputControlType_default.lineTextInput,
-          value: searchText,
-          callback: (updatedValues) => setSearchText(updatedValues.value),
-          attributes: { placeholder: "Search" },
-          inputClasses: "!mt-0"
+          role: "search",
+          className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+          onSubmit: (event) => {
+            event.preventDefault();
+            void handleSearch();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+              /* @__PURE__ */ jsx(
+                InputControl_default,
+                {
+                  name: "searchText",
+                  controlType: InputControlType_default.lineTextInput,
+                  value: searchText,
+                  callback: (updatedValues) => setSearchText(updatedValues.value),
+                  attributes: {
+                    placeholder: "Search discussions, topics, or keywords..."
+                  },
+                  inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Button_default,
+              {
+                ButtonType: "Primary" /* Solid */,
+                onClick: handleSearch,
+                className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsx("span", { children: "Search" })
+                ]
+              }
+            )
+          ]
         }
-      ) }),
-      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sort by" }),
+      ),
+      hasSortControls && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
         /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "sortOptions",
+            className: "shrink-0 whitespace-nowrap font-medium",
+            children: "Sort by"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ jsx(
           InputControl_default,
           {
             name: "sortOptions",
@@ -226,9 +280,9 @@ var DataBindingControls = ({
               })
             ),
             attributes: { placeholder: "Default" },
-            inputClasses: "!mt-0 min-w-44"
+            inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
           }
-        )
+        ) })
       ] })
     ] }),
     shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ jsx("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),

package/dist/{InputControlClient-3GUBYGP2.mjs → InputControlClient-BZPWT7KE.mjs}

@@ -11,7 +11,7 @@ import {
 import {
   Button_default,
   ClientButton_default
-} from "./chunk-RHVNJMS4.mjs";
+} from "./chunk-4WMSS6CE.mjs";
 import "./chunk-56HSDML5.mjs";
 import {
   AssetUtility_default

package/dist/{InputControlClient-Y3IT2BUV.mjs → InputControlClient-DZGLI4DU.mjs}

@@ -19,18 +19,18 @@ import {
   Select_default,
   TimeInput_default
 } from "./chunk-BF4G3ZGG.mjs";
-import {
-  Button_default,
-  ClientButton_default
-} from "./chunk-23WJE3YB.mjs";
 import {
   Hyperlink,
   Icon_default
 } from "./chunk-GCG4OYDJ.mjs";
-import "./chunk-IMNQO57B.mjs";
+import {
+  Button_default,
+  ClientButton_default
+} from "./chunk-LSKD5U3S.mjs";
 import {
   InputControlType_default
 } from "./chunk-DTWPZPSX.mjs";
+import "./chunk-IMNQO57B.mjs";
 import {
   AssetUtility_default
 } from "./chunk-UPCAOGEY.mjs";

package/dist/{LinkNodeButton-X75YEE2O.mjs → LinkNodeButton-EZFQLUKA.mjs}

@@ -7,7 +7,7 @@ import {
 import {
   Button_default,
   ToastService_default
-} from "./chunk-23WJE3YB.mjs";
+} from "./chunk-LSKD5U3S.mjs";
 import "./chunk-IMNQO57B.mjs";
 
 // src/components/pageRenderingEngine/nodes/LinkNodeButton.tsx
@@ -191,13 +191,16 @@ var LinkNodeButton = (props) => {
     return node.title || "Button";
   };
   const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
+  const isCustomButton = Boolean(node.customButtonClass);
+  const buttonClass = isCustomButton ? node.customButtonClass ?? "" : ["w-full", node.customButtonClass].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: "link-button-wrapper", children: /* @__PURE__ */ jsx(
     Button_default,
     {
       ButtonType: linkType,
       onClick,
       disabled: isLoading || !!successMessage,
-      className: "w-full",
+      className: buttonClass,
+      isCustomButton,
       children: successMessage ? /* @__PURE__ */ jsxs(
         "span",
         {

package/dist/{LinkNodeButton-MUX27SFO.mjs → LinkNodeButton-WXAW3ZD6.mjs}

@@ -2,7 +2,7 @@
 import {
   Button_default,
   ToastService_default
-} from "./chunk-RHVNJMS4.mjs";
+} from "./chunk-4WMSS6CE.mjs";
 import {
   ServiceClient_default
 } from "./chunk-WXZMRMRS.mjs";
@@ -189,13 +189,16 @@ var LinkNodeButton = (props) => {
     return node.title || "Button";
   };
   const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
+  const isCustomButton = Boolean(node.customButtonClass);
+  const buttonClass = isCustomButton ? node.customButtonClass ?? "" : ["w-full", node.customButtonClass].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: "link-button-wrapper", children: /* @__PURE__ */ jsx(
     Button_default,
     {
       ButtonType: linkType,
       onClick,
       disabled: isLoading || !!successMessage,
-      className: "w-full",
+      className: buttonClass,
+      isCustomButton,
       children: successMessage ? /* @__PURE__ */ jsxs(
         "span",
         {

package/dist/{chunk-RHVNJMS4.mjs → chunk-4WMSS6CE.mjs}

@@ -192,7 +192,7 @@ var Button = (props) => {
       );
     });
   };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+  let buttonClass = props.isCustomButton ? props.ButtonType ? buttonClasses.get(props.ButtonType) ?? "" : "" : props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
   let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
   const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
   return /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
@@ -203,7 +203,7 @@ var Button = (props) => {
         onClick: execute,
         disabled: props.disabled,
         title: isDisabled ? "The button is disabled to prevent any action" : "",
-        className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
+        className: props.isCustomButton ? `${buttonClass ? buttonClass + " " : ""}${props.className ?? ""}`.trim() : `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`.trim(),
         children: [
           isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
           inProgress && /* @__PURE__ */ jsx3(Fragment2, { children: props.hideProgressIndicator ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2(

package/dist/{chunk-PIMVBXWS.mjs → chunk-6GVLDYCQ.mjs}

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

package/dist/{chunk-23WJE3YB.mjs → chunk-LSKD5U3S.mjs}

@@ -194,7 +194,7 @@ var Button = (props) => {
       );
     });
   };
-  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+  let buttonClass = props.isCustomButton ? props.ButtonType ? buttonClasses.get(props.ButtonType) ?? "" : "" : props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
   let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
   const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
   return /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
@@ -205,7 +205,7 @@ var Button = (props) => {
         onClick: execute,
         disabled: props.disabled,
         title: isDisabled ? "The button is disabled to prevent any action" : "",
-        className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
+        className: props.isCustomButton ? `${buttonClass ? buttonClass + " " : ""}${props.className ?? ""}`.trim() : `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`.trim(),
         children: [
           isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
           inProgress && /* @__PURE__ */ jsx3(Fragment2, { children: props.hideProgressIndicator ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2(

package/dist/index.d.mts

@@ -250,6 +250,7 @@ interface ButtonProps<T> {
     confirm?: boolean;
     confirmationMessage?: string;
     disabled?: boolean;
+    isCustomButton?: boolean;
 }
 declare const Button: React__default.FC<ButtonProps<any>>;
 

package/dist/index.d.ts

@@ -250,6 +250,7 @@ interface ButtonProps<T> {
     confirm?: boolean;
     confirmationMessage?: string;
     disabled?: boolean;
+    isCustomButton?: boolean;
 }
 declare const Button: React__default.FC<ButtonProps<any>>;
 

package/dist/index.js

@@ -3382,7 +3382,7 @@ var init_Button = __esm({
           );
         });
       };
-      let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+      let buttonClass = props.isCustomButton ? props.ButtonType ? buttonClasses.get(props.ButtonType) ?? "" : "" : props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
       let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
       const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react37.default.Fragment, { children: [
@@ -3393,7 +3393,7 @@ var init_Button = __esm({
             onClick: execute,
             disabled: props.disabled,
             title: isDisabled ? "The button is disabled to prevent any action" : "",
-            className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
+            className: props.isCustomButton ? `${buttonClass ? buttonClass + " " : ""}${props.className ?? ""}`.trim() : `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`.trim(),
             children: [
               isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
               inProgress && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: props.hideProgressIndicator ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -4960,13 +4960,16 @@ var init_LinkNodeButton = __esm({
         return node.title || "Button";
       };
       const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
+      const isCustomButton = Boolean(node.customButtonClass);
+      const buttonClass = isCustomButton ? node.customButtonClass ?? "" : ["w-full", node.customButtonClass].filter(Boolean).join(" ");
       return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "link-button-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         Button_default,
         {
           ButtonType: linkType,
           onClick,
           disabled: isLoading || !!successMessage,
-          className: "w-full",
+          className: buttonClass,
+          isCustomButton,
           children: successMessage ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             "span",
             {
@@ -5605,15 +5608,17 @@ var DataBindingControls_exports = {};
 __export(DataBindingControls_exports, {
   default: () => DataBindingControls_default
 });
-var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
+var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
 var init_DataBindingControls = __esm({
   "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
     "use strict";
     "use client";
     import_react59 = require("react");
     import_navigation = require("next/navigation");
+    init_Button();
     init_InputControl();
     init_InputControlType();
+    init_StyleTypes();
     import_jsx_runtime85 = require("react/jsx-runtime");
     humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
     escapeODataString = (value) => value.replace(/'/g, "''");
@@ -5643,6 +5648,21 @@ var init_DataBindingControls = __esm({
       }
       return trimmedValue;
     };
+    SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+        ]
+      }
+    );
     normalizeSortOption = (option) => {
       const direction = option.direction.trim();
       return {
@@ -5742,19 +5762,17 @@ var init_DataBindingControls = __esm({
         },
         [router]
       );
-      (0, import_react59.useEffect)(() => {
+      const handleSearch = (0, import_react59.useCallback)(async () => {
         const trimmedSearchText = searchText.trim();
         if (trimmedSearchText === currentSearch.trim()) {
-          return;
+          return { isSuccessful: true };
         }
-        const timeout = window.setTimeout(() => {
-          navigateWithoutReload(
-            getQueryUrl({
-              "$search": trimmedSearchText || void 0
-            })
-          );
-        }, 500);
-        return () => window.clearTimeout(timeout);
+        navigateWithoutReload(
+          getQueryUrl({
+            "$search": trimmedSearchText || void 0
+          })
+        );
+        return { isSuccessful: true };
       }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
       const hasFacetControls = showFacets && facetGroups.length > 0;
       const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -5796,20 +5814,57 @@ var init_DataBindingControls = __esm({
       ] });
       return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
         shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            InputControl_default,
+          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+            "form",
             {
-              name: "searchText",
-              controlType: InputControlType_default.lineTextInput,
-              value: searchText,
-              callback: (updatedValues) => setSearchText(updatedValues.value),
-              attributes: { placeholder: "Search" },
-              inputClasses: "!mt-0"
+              role: "search",
+              className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void handleSearch();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                    InputControl_default,
+                    {
+                      name: "searchText",
+                      controlType: InputControlType_default.lineTextInput,
+                      value: searchText,
+                      callback: (updatedValues) => setSearchText(updatedValues.value),
+                      attributes: {
+                        placeholder: "Search discussions, topics, or keywords..."
+                      },
+                      inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                  Button_default,
+                  {
+                    ButtonType: "Primary" /* Solid */,
+                    onClick: handleSearch,
+                    className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "h-5 w-5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: "Search" })
+                    ]
+                  }
+                )
+              ]
             }
-          ) }),
-          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "font-medium", children: "Sort by" }),
+          ),
+          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              "label",
+              {
+                htmlFor: "sortOptions",
+                className: "shrink-0 whitespace-nowrap font-medium",
+                children: "Sort by"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               InputControl_default,
               {
                 name: "sortOptions",
@@ -5825,9 +5880,9 @@ var init_DataBindingControls = __esm({
                   })
                 ),
                 attributes: { placeholder: "Default" },
-                inputClasses: "!mt-0 min-w-44"
+                inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
               }
-            )
+            ) })
           ] })
         ] }),
         shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
@@ -6951,6 +7006,7 @@ var LinkNode = (props) => {
     {
       href: linkUrl || "#",
       linkType,
+      className: node.customButtonClass,
       alt: linkText || node.title || "",
       children: [
         renderChildren2(),

package/dist/index.mjs

@@ -8,7 +8,7 @@ import {
 } from "./chunk-RG3CISAA.mjs";
 import {
   InputControl_default
-} from "./chunk-PIMVBXWS.mjs";
+} from "./chunk-6GVLDYCQ.mjs";
 import "./chunk-JDX47MFV.mjs";
 import {
   CheckboxInput_default,
@@ -28,20 +28,20 @@ import {
   Select_default,
   TimeInput_default
 } from "./chunk-BF4G3ZGG.mjs";
-import {
-  Button_default,
-  ClientButton_default,
-  ToastService_default
-} from "./chunk-23WJE3YB.mjs";
 import {
   Hyperlink,
   Icon_default
 } from "./chunk-GCG4OYDJ.mjs";
-import "./chunk-IMNQO57B.mjs";
+import {
+  Button_default,
+  ClientButton_default,
+  ToastService_default
+} from "./chunk-LSKD5U3S.mjs";
 import {
   Constants,
   InputControlType_default
 } from "./chunk-DTWPZPSX.mjs";
+import "./chunk-IMNQO57B.mjs";
 import {
   AssetUtility_default
 } from "./chunk-UPCAOGEY.mjs";
@@ -658,7 +658,7 @@ var ImageNode_default = ImageNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import dynamic8 from "next/dynamic";
 import { Fragment, jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
-var LinkNodeButton = dynamic8(() => import("./LinkNodeButton-X75YEE2O.mjs"), {
+var LinkNodeButton = dynamic8(() => import("./LinkNodeButton-EZFQLUKA.mjs"), {
   ssr: false
 });
 function getNestedValue2(obj, path) {
@@ -760,6 +760,7 @@ var LinkNode = (props) => {
     {
       href: linkUrl || "#",
       linkType,
+      className: node.customButtonClass,
       alt: linkText || node.title || "",
       children: [
         renderChildren(),
@@ -2347,8 +2348,8 @@ 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-CQKMBXXJ.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-44OP5UE6.mjs"), {
+var Pagination = dynamic13(() => import("./Pagination-PGAK7KDA.mjs"), { ssr: true });
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-2CSX5L5I.mjs"), {
   ssr: true
 });
 var Slider = dynamic13(() => import("./Slider-IVPJBPE5.mjs"), {

package/dist/server.js

@@ -945,7 +945,7 @@ var init_Button = __esm({
           );
         });
       };
-      let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+      let buttonClass = props.isCustomButton ? props.ButtonType ? buttonClasses.get(props.ButtonType) ?? "" : "" : props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
       let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
       const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react4.default.Fragment, { children: [
@@ -956,7 +956,7 @@ var init_Button = __esm({
             onClick: execute,
             disabled: props.disabled,
             title: isDisabled ? "The button is disabled to prevent any action" : "",
-            className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
+            className: props.isCustomButton ? `${buttonClass ? buttonClass + " " : ""}${props.className ?? ""}`.trim() : `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`.trim(),
             children: [
               isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
               inProgress && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: props.hideProgressIndicator ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -1422,13 +1422,16 @@ var init_LinkNodeButton = __esm({
         return node.title || "Button";
       };
       const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
+      const isCustomButton = Boolean(node.customButtonClass);
+      const buttonClass = isCustomButton ? node.customButtonClass ?? "" : ["w-full", node.customButtonClass].filter(Boolean).join(" ");
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "link-button-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Button_default,
         {
           ButtonType: linkType,
           onClick,
           disabled: isLoading || !!successMessage,
-          className: "w-full",
+          className: buttonClass,
+          isCustomButton,
           children: successMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "span",
             {
@@ -5603,15 +5606,17 @@ var DataBindingControls_exports = {};
 __export(DataBindingControls_exports, {
   default: () => DataBindingControls_default
 });
-var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
+var import_react59, import_navigation, import_jsx_runtime85, humanize, escapeODataString, parseFacetSelections, buildFacetFilter, parseODataSearch, SearchIcon, normalizeSortOption, DUMMY_FACETS, DUMMY_SORT_OPTIONS, DataBindingControls, DataBindingControls_default;
 var init_DataBindingControls = __esm({
   "src/components/pageRenderingEngine/nodes/DataBindingControls.tsx"() {
     "use strict";
     "use client";
     import_react59 = require("react");
     import_navigation = require("next/navigation");
+    init_Button();
     init_InputControl();
     init_InputControlType();
+    init_StyleTypes();
     import_jsx_runtime85 = require("react/jsx-runtime");
     humanize = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim();
     escapeODataString = (value) => value.replace(/'/g, "''");
@@ -5641,6 +5646,21 @@ var init_DataBindingControls = __esm({
       }
       return trimmedValue;
     };
+    SearchIcon = ({ className = "" }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", d: "m20 20-4-4" })
+        ]
+      }
+    );
     normalizeSortOption = (option) => {
       const direction = option.direction.trim();
       return {
@@ -5740,19 +5760,17 @@ var init_DataBindingControls = __esm({
         },
         [router]
       );
-      (0, import_react59.useEffect)(() => {
+      const handleSearch = (0, import_react59.useCallback)(async () => {
         const trimmedSearchText = searchText.trim();
         if (trimmedSearchText === currentSearch.trim()) {
-          return;
+          return { isSuccessful: true };
         }
-        const timeout = window.setTimeout(() => {
-          navigateWithoutReload(
-            getQueryUrl({
-              "$search": trimmedSearchText || void 0
-            })
-          );
-        }, 500);
-        return () => window.clearTimeout(timeout);
+        navigateWithoutReload(
+          getQueryUrl({
+            "$search": trimmedSearchText || void 0
+          })
+        );
+        return { isSuccessful: true };
       }, [currentSearch, getQueryUrl, navigateWithoutReload, searchText]);
       const hasFacetControls = showFacets && facetGroups.length > 0;
       const hasSortControls = showSortOptions && normalizedSortOptions.length > 0;
@@ -5794,20 +5812,57 @@ var init_DataBindingControls = __esm({
       ] });
       return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: mode === "toolbar" ? "my-6" : "flex flex-col gap-2", children: [
         shouldShowToolbar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "w-full max-w-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-            InputControl_default,
+          showSearchBar && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+            "form",
             {
-              name: "searchText",
-              controlType: InputControlType_default.lineTextInput,
-              value: searchText,
-              callback: (updatedValues) => setSearchText(updatedValues.value),
-              attributes: { placeholder: "Search" },
-              inputClasses: "!mt-0"
+              role: "search",
+              className: "flex w-full flex-col gap-3 rounded-2xl border border-info bg-info-soft p-3 sm:flex-row sm:items-center md:min-w-0 md:flex-1",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void handleSearch();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative bg-default rounded-xl min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "pointer-events-none absolute left-4 top-1/2 z-10 h-5 w-5 -translate-y-1/2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                    InputControl_default,
+                    {
+                      name: "searchText",
+                      controlType: InputControlType_default.lineTextInput,
+                      value: searchText,
+                      callback: (updatedValues) => setSearchText(updatedValues.value),
+                      attributes: {
+                        placeholder: "Search discussions, topics, or keywords..."
+                      },
+                      inputClasses: "!mt-0 !rounded-xl !py-3 !pl-11 !pr-4 !shadow-sm"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+                  Button_default,
+                  {
+                    ButtonType: "Primary" /* Solid */,
+                    onClick: handleSearch,
+                    className: "!rounded-xl !px-6 !py-3 sm:self-stretch",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SearchIcon, { className: "h-5 w-5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: "Search" })
+                    ]
+                  }
+                )
+              ]
             }
-          ) }),
-          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "font-medium", children: "Sort by" }),
+          ),
+          hasSortControls && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex w-full items-center gap-3 rounded-2xl border border-info bg-info-soft p-3 text-sm md:ml-auto md:w-auto md:min-w-72 md:self-stretch", children: [
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              "label",
+              {
+                htmlFor: "sortOptions",
+                className: "shrink-0 whitespace-nowrap font-medium",
+                children: "Sort by"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "min-w-0 flex-1 rounded-xl bg-default md:min-w-48", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               InputControl_default,
               {
                 name: "sortOptions",
@@ -5823,9 +5878,9 @@ var init_DataBindingControls = __esm({
                   })
                 ),
                 attributes: { placeholder: "Default" },
-                inputClasses: "!mt-0 min-w-44"
+                inputClasses: "!mt-0 !rounded-xl !border-info !bg-default !px-4 !py-3 !text-body !shadow-sm focus:!border-primary focus:!ring-primary-base"
               }
-            )
+            ) })
           ] })
         ] }),
         shouldShowFacets && facetGroups.length === 1 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("nav", { "aria-label": `${humanize(facetGroups[0][0])} filters`, children: renderFacetLinks(facetGroups[0][0], facetGroups[0][1]) }),
@@ -6584,6 +6639,7 @@ var LinkNode = (props) => {
     {
       href: linkUrl || "#",
       linkType,
+      className: node.customButtonClass,
       alt: linkText || node.title || "",
       children: [
         renderChildren2(),

package/dist/server.mjs

@@ -291,7 +291,7 @@ var ImageNode_default = ImageNode;
 // src/components/pageRenderingEngine/nodes/LinkNode.tsx
 import dynamic3 from "next/dynamic";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-MUX27SFO.mjs"), {
+var LinkNodeButton = dynamic3(() => import("./LinkNodeButton-WXAW3ZD6.mjs"), {
   ssr: false
 });
 function getNestedValue2(obj, path) {
@@ -393,6 +393,7 @@ var LinkNode = (props) => {
     {
       href: linkUrl || "#",
       linkType,
+      className: node.customButtonClass,
       alt: linkText || node.title || "",
       children: [
         renderChildren(),
@@ -2316,7 +2317,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-M3VZKKXY.mjs"), { ssr: true });
-var DataBindingControls = dynamic13(() => import("./DataBindingControls-6VOZSGOL.mjs"), {
+var DataBindingControls = dynamic13(() => import("./DataBindingControls-F72KPWHV.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.20260910063325",
+  "version": "0.8.1-dev.20260916063140",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/dist/{Pagination-CQKMBXXJ.mjs → Pagination-PGAK7KDA.mjs}

@@ -8,10 +8,10 @@ import {
   Hyperlink,
   Icon_default
 } from "./chunk-GCG4OYDJ.mjs";
-import "./chunk-IMNQO57B.mjs";
 import {
   Constants
 } from "./chunk-DTWPZPSX.mjs";
+import "./chunk-IMNQO57B.mjs";
 
 // src/components/Pagination.tsx
 import { useMemo } from "react";