analytica-frontend-lib 1.1.53 → 1.1.54

package/dist/Quiz/index.mjs

@@ -936,7 +936,7 @@ import {
   forwardRef as forwardRef10,
   useEffect as useEffect7,
   useMemo,
-  useId as useId7,
+  useId as useId8,
   useState as useState7,
   useCallback,
   useRef as useRef5
@@ -1660,8 +1660,54 @@ var AlertDialog = forwardRef4(
 AlertDialog.displayName = "AlertDialog";
 
 // src/components/Modal/Modal.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useId as useId3 } from "react";
 import { X } from "phosphor-react";
+
+// src/components/Modal/utils/videoUtils.ts
+var isYouTubeUrl = (url) => {
+  const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
+  return youtubeRegex.test(url);
+};
+var isValidYouTubeHost = (host) => {
+  if (host === "youtu.be") return "youtu.be";
+  const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
+  if (isValidYouTubeCom) return "youtube";
+  const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
+  if (isValidNoCookie) return "nocookie";
+  return null;
+};
+var extractYoutuBeId = (pathname) => {
+  const firstSeg = pathname.split("/").filter(Boolean)[0];
+  return firstSeg || null;
+};
+var extractYouTubeId = (pathname, searchParams) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const [first, second] = parts;
+  if (first === "embed" && second) return second;
+  if (first === "shorts" && second) return second;
+  if (first === "live" && second) return second;
+  const v = searchParams.get("v");
+  if (v) return v;
+  return null;
+};
+var getYouTubeVideoId = (url) => {
+  try {
+    const u = new URL(url);
+    const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
+    if (!hostType) return null;
+    if (hostType === "youtu.be") {
+      return extractYoutuBeId(u.pathname);
+    }
+    return extractYouTubeId(u.pathname, u.searchParams);
+  } catch {
+    return null;
+  }
+};
+var getYouTubeEmbedUrl = (videoId) => {
+  return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
+};
+
+// src/components/Modal/Modal.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIZE_CLASSES5 = {
   xs: "max-w-[360px]",
@@ -1677,11 +1723,17 @@ var Modal = ({
   children,
   size = "md",
   className = "",
-  closeOnBackdropClick = true,
   closeOnEscape = true,
   footer,
-  hideCloseButton = false
+  hideCloseButton = false,
+  variant = "default",
+  description,
+  image,
+  imageAlt,
+  actionLink,
+  actionLabel
 }) => {
+  const titleId = useId3();
   useEffect3(() => {
     if (!isOpen || !closeOnEscape) return;
     const handleEscape = (event) => {
@@ -1703,16 +1755,6 @@ var Modal = ({
       document.body.style.overflow = originalOverflow;
     };
   }, [isOpen]);
-  const handleBackdropClick = (event) => {
-    if (closeOnBackdropClick && event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-  const handleBackdropKeyDown = (event) => {
-    if (closeOnBackdropClick && (event.key === "Enter" || event.key === " ")) {
-      onClose();
-    }
-  };
   if (!isOpen) return null;
   const sizeClasses = SIZE_CLASSES5[size];
   const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
@@ -1723,18 +1765,105 @@ var Modal = ({
     dialogResetClasses,
     className
   );
-  return /* @__PURE__ */ jsx8(
-    "div",
+  const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
+  const handleActionClick = () => {
+    if (actionLink) {
+      window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
+    }
+  };
+  if (variant === "activity") {
+    return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs6(
+      "dialog",
+      {
+        className: modalClasses,
+        "aria-labelledby": titleId,
+        "aria-modal": "true",
+        open: true,
+        children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ jsx8(X, { size: 18 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
+            image && /* @__PURE__ */ jsx8("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx8(
+              "img",
+              {
+                src: image,
+                alt: imageAlt ?? "",
+                className: "w-[122px] h-[122px] object-contain"
+              }
+            ) }),
+            /* @__PURE__ */ jsx8(
+              "h2",
+              {
+                id: titleId,
+                className: "text-lg font-semibold text-text-950 text-center",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx8("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
+            actionLink && /* @__PURE__ */ jsxs6("div", { className: "w-full", children: [
+              (() => {
+                const normalized = normalizeUrl(actionLink);
+                const isYT = isYouTubeUrl(normalized);
+                if (!isYT) return null;
+                const id = getYouTubeVideoId(normalized);
+                if (!id) {
+                  return /* @__PURE__ */ jsx8(
+                    Button_default,
+                    {
+                      variant: "solid",
+                      action: "primary",
+                      size: "large",
+                      className: "w-full",
+                      onClick: handleActionClick,
+                      children: actionLabel || "Iniciar Atividade"
+                    }
+                  );
+                }
+                return /* @__PURE__ */ jsx8(
+                  "iframe",
+                  {
+                    src: getYouTubeEmbedUrl(id),
+                    className: "w-full aspect-video rounded-lg",
+                    allowFullScreen: true,
+                    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                    title: "V\xEDdeo YouTube"
+                  }
+                );
+              })(),
+              !isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ jsx8(
+                Button_default,
+                {
+                  variant: "solid",
+                  action: "primary",
+                  size: "large",
+                  className: "w-full",
+                  onClick: handleActionClick,
+                  children: actionLabel || "Iniciar Atividade"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ jsxs6(
+    "dialog",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
-      onClick: handleBackdropClick,
-      onKeyDown: handleBackdropKeyDown,
-      role: "button",
-      tabIndex: closeOnBackdropClick ? 0 : -1,
-      "aria-label": "Fechar modal clicando no fundo",
-      children: /* @__PURE__ */ jsxs6("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
+      className: modalClasses,
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      open: true,
+      children: [
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-6 py-6", children: [
-          /* @__PURE__ */ jsx8("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
+          /* @__PURE__ */ jsx8("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
           !hideCloseButton && /* @__PURE__ */ jsx8(
             "button",
             {
@@ -1745,11 +1874,11 @@ var Modal = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "px-6 pb-6", children: /* @__PURE__ */ jsx8("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        children && /* @__PURE__ */ jsx8("div", { className: "px-6 pb-6", children: /* @__PURE__ */ jsx8("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
         footer && /* @__PURE__ */ jsx8("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
-      ] })
+      ]
     }
-  );
+  ) });
 };
 var Modal_default = Modal;
 
@@ -1762,7 +1891,7 @@ import {
   isValidElement as isValidElement2,
   Children as Children2,
   cloneElement as cloneElement2,
-  useId as useId3
+  useId as useId4
 } from "react";
 import { CaretDown, Check, WarningCircle } from "phosphor-react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1868,7 +1997,7 @@ var Select = ({
   const store = storeRef.current;
   const selectRef = useRef2(null);
   const { open, setOpen, setValue, selectedLabel } = useStore2(store, (s) => s);
-  const generatedId = useId3();
+  const generatedId = useId4();
   const selectId = id ?? `select-${generatedId}`;
   const findLabelForValue = (children2, targetValue) => {
     let found = null;
@@ -4162,7 +4291,7 @@ import { useEffect as useEffect6, useState as useState5 } from "react";
 // src/components/CheckBox/CheckboxList.tsx
 import {
   forwardRef as forwardRef8,
-  useId as useId5,
+  useId as useId6,
   useEffect as useEffect5,
   useRef as useRef4,
   Children as Children3,
@@ -4175,7 +4304,7 @@ import { create as create4, useStore as useStore3 } from "zustand";
 import {
   forwardRef as forwardRef7,
   useState as useState4,
-  useId as useId4
+  useId as useId5
 } from "react";
 import { Check as Check2, Minus } from "phosphor-react";
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -4254,7 +4383,7 @@ var CheckBox = forwardRef7(
     onChange,
     ...props
   }, ref) => {
-    const generatedId = useId4();
+    const generatedId = useId5();
     const inputId = id ?? `checkbox-${generatedId}`;
     const [internalChecked, setInternalChecked] = useState4(false);
     const isControlled = checkedProp !== void 0;
@@ -4424,7 +4553,7 @@ var CheckboxList = forwardRef8(
     children,
     ...props
   }, ref) => {
-    const generatedId = useId5();
+    const generatedId = useId6();
     const name = propName || `checkbox-list-${generatedId}`;
     const storeRef = useRef4(null);
     storeRef.current ??= createCheckboxListStore(
@@ -4480,7 +4609,7 @@ var CheckboxListItem = forwardRef8(
       disabled: groupDisabled,
       name
     } = useStore3(store);
-    const generatedId = useId5();
+    const generatedId = useId6();
     const inputId = id ?? `checkbox-item-${generatedId}`;
     const isChecked = groupValues.includes(value);
     const isDisabled = groupDisabled || itemDisabled;
@@ -4646,7 +4775,7 @@ var MultipleChoiceList = ({
 import {
   forwardRef as forwardRef9,
   useState as useState6,
-  useId as useId6
+  useId as useId7
 } from "react";
 import { WarningCircle as WarningCircle2 } from "phosphor-react";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -4715,7 +4844,7 @@ var TextArea = forwardRef9(
     placeholder,
     ...props
   }, ref) => {
-    const generatedId = useId6();
+    const generatedId = useId7();
     const inputId = id ?? `textarea-${generatedId}`;
     const [isFocused, setIsFocused] = useState6(false);
     const handleChange = (event) => {
@@ -5426,7 +5555,7 @@ var QuizFill = ({ paddingBottom }) => {
     }
   ];
   const [answers, setAnswers] = useState7({});
-  const baseId = useId7();
+  const baseId = useId8();
   const getAvailableOptionsForSelect = (selectId) => {
     const usedOptions = Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value);
     return options.filter((option) => !usedOptions.includes(option));
@@ -5938,7 +6067,6 @@ var QuizFooter = forwardRef10(
           isOpen: modalResultOpen,
           onClose: () => setModalResultOpen(false),
           title: "",
-          closeOnBackdropClick: false,
           closeOnEscape: false,
           hideCloseButton: true,
           size: "md",