@deriv-web-design/ui 0.0.28 → 0.0.29

package/dist/index.mjs

@@ -5535,6 +5535,58 @@ var ArticleSection = ({
     ] })
   ] });
 };
+
+// templates/SpotlightHero/SpotlightHero.tsx
+import { jsx as jsx45, jsxs as jsxs41 } from "react/jsx-runtime";
+var ArrowIcon = () => /* @__PURE__ */ jsx45("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx45(
+  "path",
+  {
+    d: "M4 12h15M13 6l6 6-6 6",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var SpotlightHero = ({
+  eyebrow,
+  title,
+  summary,
+  meta,
+  icon,
+  patternSize = 132,
+  patternOpacity = 0.12,
+  tone = "coral",
+  href,
+  onClick,
+  ctaLabel = "Read more",
+  className
+}) => {
+  const Root = href ? "a" : "div";
+  const interactive = Boolean(href || onClick);
+  const tileCount = Math.ceil(1600 / patternSize) * Math.ceil(720 / patternSize);
+  const style = {
+    "--sh-tile": `${patternSize}px`,
+    "--sh-pattern-opacity": String(patternOpacity)
+  };
+  const classes = ["sh-root", `sh-${tone}`, interactive ? "sh-interactive" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs41(Root, { className: classes, href, onClick, style, children: [
+    /* @__PURE__ */ jsx45("span", { className: "sh-glow", "aria-hidden": "true" }),
+    icon && /* @__PURE__ */ jsx45("span", { className: "sh-pattern", "aria-hidden": "true", children: Array.from({ length: tileCount }).map((_, i) => /* @__PURE__ */ jsx45("span", { className: "sh-patternIcon", children: icon }, i)) }),
+    /* @__PURE__ */ jsxs41("div", { className: "sh-content", children: [
+      eyebrow && /* @__PURE__ */ jsxs41("div", { className: "sh-eyebrow", children: [
+        /* @__PURE__ */ jsx45("span", { className: "sh-eyebrowLine", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx45("span", { className: "sh-eyebrowText", children: eyebrow })
+      ] }),
+      /* @__PURE__ */ jsx45("h2", { className: "sh-title", children: title }),
+      summary && /* @__PURE__ */ jsx45("p", { className: "sh-summary", children: summary }),
+      (meta || interactive) && /* @__PURE__ */ jsxs41("div", { className: "sh-footer", children: [
+        /* @__PURE__ */ jsx45("span", { className: "sh-arrow", "aria-label": interactive ? ctaLabel : void 0, children: /* @__PURE__ */ jsx45(ArrowIcon, {}) }),
+        meta && /* @__PURE__ */ jsx45("span", { className: "sh-meta", children: meta })
+      ] })
+    ] })
+  ] });
+};
 export {
   AVATAR_DATA,
   Accordion,
@@ -5572,6 +5624,7 @@ export {
   PeopleGrid,
   STEPS_DATA,
   SearchField,
+  SpotlightHero,
   Stats,
   StatsSimple,
   Steps,