@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260914095913 → 0.8.1-dev.20260916090938

package/dist/server.js

@@ -346,10 +346,10 @@ var init_HlsPlayer = __esm({
         }, [isMobile, resetInactivityTimer]);
         const posterSources = resolvedSources.filter((s) => s.media && s.posterUrl);
         const fallbackPoster = posterUrl ?? resolvedSources.find((s) => !s.media)?.posterUrl ?? resolvedSources[0]?.posterUrl;
-        const playBtnSize = "clamp(44px, 8vmin, 80px)";
+        const playBtnSize = "clamp(40px, 6.5vmin, 68px)";
         const iconBtnSize = "clamp(28px, 4.5vmin, 40px)";
         const iconSvgSize = "clamp(14px, 2.5vmin, 20px)";
-        const playIconSize = "clamp(24px, 4.5vmin, 44px)";
+        const playIconSize = "clamp(18px, 3.2vmin, 32px)";
         const iconButtonStyle = {
           pointerEvents: isControlsVisible ? "auto" : "none",
           width: iconBtnSize,
@@ -439,11 +439,24 @@ var init_HlsPlayer = __esm({
               ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
           .hls-play-btn {
-            will-change: transform;
-            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            transform-origin: center center;
+            transition: transform 0.24s cubic-bezier(0.25, 1, 0.5, 1),
+                        box-shadow 0.24s cubic-bezier(0.25, 1, 0.5, 1),
+                        background-color 0.2s ease;
           }
           .hls-play-btn:hover {
-            transform: scale(1.08);
+            transform: scale(1.05) translateZ(0);
+            -webkit-transform: scale(1.05) translateZ(0);
+            background-color: #ffffff !important;
+            box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 1px #ffffff !important;
+          }
+          .hls-play-btn:active {
+            transform: scale(0.96) translateZ(0);
+            -webkit-transform: scale(0.96) translateZ(0);
           }
         ` }),
               isBuffering && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -457,51 +470,39 @@ var init_HlsPlayer = __esm({
                 to { transform: rotate(360deg); }
               }
               .hls-spinner {
-                animation: hls-spin 1s linear infinite;
-                filter: drop-shadow(0 0 6px rgba(243, 31, 73, 0.7))
-                        drop-shadow(0 0 12px rgba(143, 38, 237, 0.5));
+                animation: hls-spin 0.85s linear infinite;
+                filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
               }
             ` }),
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                       "svg",
                       {
                         className: "hls-spinner",
-                        width: "clamp(44px, 8vmin, 72px)",
-                        height: "clamp(44px, 8vmin, 72px)",
-                        viewBox: "0 0 72 72",
+                        width: "clamp(44px, 8vmin, 64px)",
+                        height: "clamp(44px, 8vmin, 64px)",
+                        viewBox: "0 0 48 48",
                         fill: "none",
                         xmlns: "http://www.w3.org/2000/svg",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "hls-arc-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "rgba(243,31,73,0)" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "40%", stopColor: "rgba(243,31,73,1)" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "rgba(143,38,237,1)" })
-                          ] }) }),
-                          Array.from({ length: 18 }).map((_, i) => {
-                            const angle = i / 18 * 360;
-                            const opacity = 0.15 + i / 17 * 0.85;
-                            const rad = (angle - 90) * (Math.PI / 180);
-                            const r = 30;
-                            const cx = 36 + r * Math.cos(rad);
-                            const cy = 36 + r * Math.sin(rad);
-                            const t = i / 17;
-                            const r1 = Math.round(243 * (1 - t) + 143 * t);
-                            const g1 = Math.round(31 * (1 - t) + 38 * t);
-                            const b1 = Math.round(73 * (1 - t) + 237 * t);
-                            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                              "rect",
-                              {
-                                x: cx - 2.2,
-                                y: cy - 5.5,
-                                width: 4.4,
-                                height: 11,
-                                rx: 2.2,
-                                fill: `rgba(${r1},${g1},${b1},${opacity})`,
-                                transform: `rotate(${angle}, ${cx}, ${cy})`
-                              },
-                              i
-                            );
-                          })
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "circle",
+                            {
+                              cx: "24",
+                              cy: "24",
+                              r: "18",
+                              stroke: "rgba(255, 255, 255, 0.25)",
+                              strokeWidth: "3.5"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "path",
+                            {
+                              d: "M24 6a18 18 0 0 1 18 18",
+                              stroke: "#ffffff",
+                              strokeWidth: "3.5",
+                              strokeLinecap: "round"
+                            }
+                          )
                         ]
                       }
                     )
@@ -516,7 +517,7 @@ var init_HlsPlayer = __esm({
                     opacity: isControlsVisible ? 1 : 0,
                     transition: "opacity 0.3s ease"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "button",
                     {
                       type: "button",
@@ -532,83 +533,58 @@ var init_HlsPlayer = __esm({
                         width: playBtnSize,
                         height: playBtnSize,
                         borderRadius: "50%",
-                        border: "none",
+                        border: "1px solid rgba(255, 255, 255, 0.8)",
                         cursor: "pointer",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center",
-                        background: "linear-gradient(50deg, rgba(243, 31, 73, 1) 0%, rgba(143, 38, 237, 1) 100%)",
+                        background: "rgba(255, 255, 255, 0.92)",
+                        backdropFilter: "blur(12px)",
+                        WebkitBackdropFilter: "blur(12px)",
+                        boxShadow: "0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 1)",
                         flexShrink: 0,
-                        position: "relative",
-                        overflow: "hidden"
+                        position: "relative"
                       },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "div",
+                      children: isPlaying ? (
+                        /* Pause — clean rounded dual bars */
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          "svg",
                           {
-                            style: {
-                              position: "absolute",
-                              inset: 0,
-                              borderRadius: "50%",
-                              background: "radial-gradient(ellipse 70% 55% at 30% 25%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 55%, transparent 75%)",
-                              pointerEvents: "none"
-                            }
+                            width: playIconSize,
+                            height: playIconSize,
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "6.5", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "14", y: "4.5", width: "3.5", height: "15", rx: "1.75", fill: "#0f172a" })
+                            ]
                           }
-                        ),
+                        )
+                      ) : (
+                        /* Play — clean rounded triangle with standard optical balance */
                         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                          "div",
+                          "svg",
                           {
-                            style: {
-                              position: "absolute",
-                              inset: 0,
-                              borderRadius: "50%",
-                              background: "radial-gradient(ellipse 50% 40% at 72% 75%, rgba(255,255,255,0.18) 0%, transparent 70%)",
-                              pointerEvents: "none"
-                            }
+                            width: playIconSize,
+                            height: playIconSize,
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              "polygon",
+                              {
+                                points: "6 3 20 12 6 21 6 3",
+                                fill: "#0f172a",
+                                stroke: "#0f172a",
+                                strokeWidth: "2",
+                                strokeLinejoin: "round",
+                                strokeLinecap: "round"
+                              }
+                            )
                           }
-                        ),
-                        isPlaying ? (
-                          /* Pause — two rounded bars, sized to match play icon proportions */
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                            "svg",
-                            {
-                              width: playIconSize,
-                              height: playIconSize,
-                              viewBox: "0 0 20 20",
-                              fill: "none",
-                              xmlns: "http://www.w3.org/2000/svg",
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "3.5", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "2.5", width: "4.5", height: "15", rx: "1.5", fill: "white" })
-                              ]
-                            }
-                          )
-                        ) : (
-                          /*
-                           * Play — rounded-corner triangle from the provided SVG path.
-                           * Original viewBox is "0,0,240,250" (with a 5.33x scale group inside).
-                           * We flatten the transform: effective drawing area is 240×250 units.
-                           */
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                            "svg",
-                            {
-                              width: playIconSize,
-                              height: playIconSize,
-                              viewBox: "0 0 240 250",
-                              fill: "none",
-                              xmlns: "http://www.w3.org/2000/svg",
-                              style: { transform: "translateX(4%)" },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                "path",
-                                {
-                                  d: "M60.78 21.93C48.57 22.41 37.33 32.78 37.33 45.87v164.26c0 17.92 19.96 29.67 35.64 20.99l148.31-82.17c16.12-8.93 16.12-33.04 0-41.97L72.97 24.81c-3.92-2.17-8.11-3.07-12.19-2.88z",
-                                  fill: "white"
-                                }
-                              )
-                            }
-                          )
                         )
-                      ]
+                      )
                     }
                   )
                 }
@@ -5606,15 +5582,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, "''");
@@ -5644,6 +5622,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 {
@@ -5743,19 +5736,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;
@@ -5797,20 +5788,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",
@@ -5826,9 +5854,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]) }),

package/dist/server.mjs

@@ -108,7 +108,7 @@ import dynamic2 from "next/dynamic";
 // src/components/DeviceAssetSelector.tsx
 import dynamic from "next/dynamic";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var HlsPlayer = dynamic(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
+var HlsPlayer = dynamic(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
 var FORMAT_CLASSES = {
   center: "justify-center",
   left: "justify-start",
@@ -183,7 +183,7 @@ var DeviceAssetSelector_default = DeviceAssetSelector;
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
+var HlsPlayer2 = dynamic2(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
 var getNestedValue = (obj, path) => {
   if (!obj || !path) return void 0;
   return path.split(".").reduce((current, key) => {
@@ -1450,7 +1450,7 @@ var NoDataFound_default = NoDataFound;
 // src/components/pageRenderingEngine/nodes/ImageGalleryNode.tsx
 import dynamic11 from "next/dynamic";
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
-var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-BVS6BVF7.mjs"), { ssr: false });
+var HlsPlayer3 = dynamic11(() => import("./HlsPlayer-ZGFEVSKL.mjs"), { ssr: false });
 var deviceToMediaQuery = (device) => {
   switch (device) {
     case "lg":
@@ -2317,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-SKC472JJ.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.20260914095913",
+  "version": "0.8.1-dev.20260916090938",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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

@@ -19,18 +19,18 @@ import {
   Select_default,
   TimeInput_default
 } from "./chunk-BF4G3ZGG.mjs";
-import {
-  Button_default,
-  ClientButton_default
-} from "./chunk-LSKD5U3S.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/{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";