@deriv-web-design/ui 0.1.21 → 0.1.23

package/dist/index.mjs

@@ -8463,6 +8463,7 @@ var ResourceBanner = ({
 import {
   useEffect as useEffect18,
   useId as useId5,
+  useRef as useRef21,
   useState as useState24
 } from "react";
 import { Fragment as Fragment13, jsx as jsx63, jsxs as jsxs59 } from "react/jsx-runtime";
@@ -8662,6 +8663,126 @@ function OptionPanel({
     metadata
   ] });
 }
+function TogglePanel({
+  item,
+  idPrefix,
+  marketsLabel,
+  platformsLabel,
+  playing,
+  setPlaying
+}) {
+  const animations = item.animations;
+  const [activeIndex, setActiveIndex] = useState24(0);
+  const switchRefs = useRef21([]);
+  const safeIndex = Math.min(activeIndex, Math.max(animations.length - 1, 0));
+  useEffect18(() => {
+    setPlaying({});
+  }, [safeIndex, setPlaying]);
+  const hasMarkets = Boolean(item.markets && item.markets.length > 0);
+  const hasPlatforms = Boolean(item.platforms && item.platforms.length > 0);
+  const onSwitchKeyDown = (event) => {
+    const last = animations.length - 1;
+    let next = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      next = safeIndex === last ? 0 : safeIndex + 1;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      next = safeIndex === 0 ? last : safeIndex - 1;
+    } else if (event.key === "Home") {
+      next = 0;
+    } else if (event.key === "End") {
+      next = last;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setActiveIndex(next);
+    switchRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ jsxs59("div", { className: "ot__option ot__option--toggle", children: [
+    /* @__PURE__ */ jsx63("div", { className: "ot__toggle-media", children: animations.map((animation, index) => {
+      const key = `${item.id}-${animation.id ?? index}`;
+      const isActive = index === safeIndex;
+      return /* @__PURE__ */ jsx63(
+        "div",
+        {
+          className: "ot__toggle-pane",
+          id: `${idPrefix}-media-${index}`,
+          role: "tabpanel",
+          "aria-labelledby": `${idPrefix}-switch-${index}`,
+          hidden: !isActive,
+          children: isActive ? /* @__PURE__ */ jsx63(
+            AnimationCard,
+            {
+              animation,
+              itemId: item.id,
+              playing: Boolean(playing[key]),
+              onToggle: () => setPlaying((current) => ({
+                ...current,
+                [key]: !current[key]
+              }))
+            }
+          ) : null
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ jsxs59("div", { className: "ot__toggle-side", children: [
+      animations.length > 1 ? /* @__PURE__ */ jsx63(
+        "div",
+        {
+          className: "ot__toggle-switch",
+          role: "tablist",
+          "aria-label": `${item.title} views`,
+          onKeyDown: onSwitchKeyDown,
+          children: animations.map((animation, index) => {
+            const isActive = index === safeIndex;
+            const iconUrl = safeHref(animation.iconUrl);
+            return /* @__PURE__ */ jsx63(
+              "button",
+              {
+                ref: (node) => {
+                  switchRefs.current[index] = node;
+                },
+                type: "button",
+                role: "tab",
+                id: `${idPrefix}-switch-${index}`,
+                "aria-controls": `${idPrefix}-media-${index}`,
+                "aria-selected": isActive,
+                "aria-label": animation.label,
+                tabIndex: isActive ? 0 : -1,
+                className: `ot__toggle-option${isActive ? " ot__toggle-option--active" : ""}`,
+                onClick: () => setActiveIndex(index),
+                children: iconUrl ? /* @__PURE__ */ jsx63(
+                  "img",
+                  {
+                    className: "ot__toggle-icon",
+                    src: iconUrl,
+                    alt: "",
+                    "aria-hidden": "true",
+                    loading: "lazy",
+                    decoding: "async"
+                  }
+                ) : /* @__PURE__ */ jsx63("span", { className: "ot__toggle-option-label", children: animation.label })
+              },
+              `${item.id}-switch-${animation.id ?? index}`
+            );
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx63("h3", { className: "ot__toggle-title", children: item.title }),
+      /* @__PURE__ */ jsx63("div", { className: "ot__description", children: /* @__PURE__ */ jsx63("p", { children: item.description }) }),
+      hasMarkets || hasPlatforms ? /* @__PURE__ */ jsxs59("div", { className: "ot__metadata", children: [
+        hasMarkets ? /* @__PURE__ */ jsxs59("div", { className: "ot__meta-group", children: [
+          /* @__PURE__ */ jsx63("h4", { children: marketsLabel }),
+          /* @__PURE__ */ jsx63(MetaList, { items: item.markets })
+        ] }) : null,
+        hasPlatforms ? /* @__PURE__ */ jsxs59("div", { className: "ot__meta-group", children: [
+          /* @__PURE__ */ jsx63("h4", { children: platformsLabel }),
+          /* @__PURE__ */ jsx63(MetaList, { items: item.platforms })
+        ] }) : null
+      ] }) : null
+    ] })
+  ] });
+}
 function OptionsTypes({
   variant = "tabs",
   heading = "Section title goes here",
@@ -8735,7 +8856,17 @@ function OptionsTypes({
         },
         item.id
       );
-    }) }) : /* @__PURE__ */ jsx63(
+    }) }) : variant === "toggle" ? /* @__PURE__ */ jsx63(
+      TogglePanel,
+      {
+        item: usableItems[0],
+        idPrefix: tabPrefix,
+        marketsLabel,
+        platformsLabel,
+        playing,
+        setPlaying
+      }
+    ) : /* @__PURE__ */ jsx63(
       OptionPanel,
       {
         item: usableItems[0],
@@ -8976,6 +9107,31 @@ var OPTIONS_TYPES_MULTIPLIERS_CONTENT = {
     }
   ]
 };
+var OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT = {
+  variant: "toggle",
+  heading: "How do multipliers work",
+  items: [
+    {
+      id: "eu-multipliers",
+      title: "Multipliers",
+      description: "Choose a multiplier (up to 30x) and predict if the market price will go up or down compared to the entry price. Your potential payout grows the further the market price moves in your predicted direction, boosted by the multiplier. Losses are limited to the initial amount you put into the contract.",
+      animations: [
+        {
+          id: "up",
+          label: "Up",
+          src: `${WEBFLOW_CDN}/6630e305e7f044e7deae8a90_Web%20Trade%20Clip%20-%20Multipliers%20(Up).lottie`,
+          iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e151_66585fe0e1dc7e70cc75dec1_multipliers-up-sm.svg`
+        },
+        {
+          id: "down",
+          label: "Down",
+          src: `${WEBFLOW_CDN}/6630e3055be526fd74f10190_Web%20Trade%20Clip%20-%20Multipliers%20(Down).lottie`,
+          iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e155_66585fe0e1dc7e70cc75dee8_multipliers-down-sm.svg`
+        }
+      ]
+    }
+  ]
+};
 
 // templates/EntityInfoSection/EntityInfoSection.tsx
 import { jsx as jsx64, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -9221,7 +9377,7 @@ var DocumentChips = ({
 };
 
 // components/LinkModal/LinkModal.tsx
-import { useCallback as useCallback6, useEffect as useEffect19, useId as useId6, useRef as useRef21 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect19, useId as useId6, useRef as useRef22 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx67, jsxs as jsxs63 } from "react/jsx-runtime";
 var XMarkIcon3 = () => /* @__PURE__ */ jsx67(
@@ -9264,8 +9420,8 @@ var LinkModal = ({
   ...props
 }) => {
   const titleId = useId6();
-  const panelRef = useRef21(null);
-  const triggerRef = useRef21(null);
+  const panelRef = useRef22(null);
+  const triggerRef = useRef22(null);
   const getFocusable = useCallback6(() => {
     const panel = panelRef.current;
     if (!panel) return [];
@@ -9669,6 +9825,7 @@ export {
   Navbar,
   OPTIONS_TYPES_ACCUMULATOR_CONTENT,
   OPTIONS_TYPES_DIGITAL_CONTENT,
+  OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_PLACEHOLDER_ITEMS,
   OPTIONS_TYPES_TURBO_CONTENT,