@anoki/fse-ui 2.3.0-RC10 → 2.3.0-RC12

package/dist/index.es242.js

@@ -1,54 +1,54 @@
-import { j as s } from "./index.es264.js";
-import E, { useState as I, useEffect as f, useCallback as S } from "react";
+import { j as o } from "./index.es264.js";
+import d, { useState as E, useEffect as h, useCallback as I } from "react";
 import './components/ui/TableOfContents/TableOfContents.css';/* empty css            */
-import { useMediaQueryV2 as T } from "./index.es308.js";
-import { clsx as u } from "./index.es266.js";
-import { Row as C } from "./index.es214.js";
-import { ArrowDown as H } from "./index.es19.js";
-import { ScrollArea as R } from "./index.es486.js";
+import { useMediaQueryV2 as R } from "./index.es307.js";
+import { clsx as x } from "./index.es266.js";
+import { Row as k } from "./index.es214.js";
+import { ArrowDown as C } from "./index.es19.js";
+import { ScrollArea as A } from "./index.es486.js";
 const O = ({
-  title: h = "Indice",
-  headings: r,
-  titleTag: p = "h1",
-  modeAuthenticated: x = !1,
-  isOpen: i,
-  onToggle: n = () => {
+  title: w = "Indice",
+  headings: l,
+  titleTag: v = "h1",
+  modeAuthenticated: b = !1,
+  isOpen: m,
+  onToggle: u = () => {
   }
 }) => {
-  const [w, l] = E.useState(""), [b, v] = I(0), a = T("(min-width: 768px)", !1), g = a || i;
-  f(() => {
-    const e = () => {
-      const o = window.scrollY, t = document.documentElement.scrollHeight - window.innerHeight, c = t > 0 ? Math.min(o / t * 100, 100) : 0;
-      v(c);
+  const [g, f] = d.useState(""), [j, S] = E(0), p = R("(min-width: 768px)", !1), T = p || m, n = d.useRef(!1), i = d.useRef(null);
+  h(() => {
+    const t = () => {
+      const r = window.scrollY, e = document.documentElement.scrollHeight - window.innerHeight, s = e > 0 ? Math.min(r / e * 100, 100) : 0;
+      S(s);
     };
-    return window.addEventListener("scroll", e), e(), () => window.removeEventListener("scroll", e);
+    return window.addEventListener("scroll", t), t(), () => window.removeEventListener("scroll", t);
   }, []);
-  const d = S(
-    (e) => {
+  const a = I(
+    (t) => {
       if (window.innerWidth < 768) return;
-      const o = document.querySelector(
-        `a[href="#${e}"]`
-      ), t = document.querySelector(
+      const r = document.querySelector(
+        `a[href="#${t}"]`
+      ), e = document.querySelector(
         ".toc-scroll"
       );
-      if (o && t) {
-        const c = t.getBoundingClientRect(), m = o.getBoundingClientRect();
-        if (!(m.top >= c.top && m.bottom <= c.bottom)) {
-          const j = o.offsetTop, N = t.clientHeight, k = o.offsetHeight, y = j - N / 2 + k / 2;
-          t.scrollTo({
+      if (r && e) {
+        const s = e.getBoundingClientRect(), c = r.getBoundingClientRect();
+        if (!(c.top >= s.top && c.bottom <= s.bottom)) {
+          const N = c.top - s.top, y = e.scrollTop + N - s.height / 2 + c.height / 2;
+          e.scrollTo({
             top: y,
             behavior: "smooth"
           });
         }
       }
     },
-    [a]
+    [p]
   );
-  return f(() => {
-    const e = new IntersectionObserver(
-      (o) => {
-        o.forEach((t) => {
-          t.isIntersecting && (l(t.target.id), d(t.target.id));
+  return h(() => {
+    const t = new IntersectionObserver(
+      (r) => {
+        n.current || r.forEach((e) => {
+          e.isIntersecting && (f(e.target.id), a(e.target.id));
         });
       },
       {
@@ -56,62 +56,64 @@ const O = ({
         threshold: 0
       }
     );
-    return r.forEach(({ id: o }) => {
-      const t = document.getElementById(o);
-      t && e.observe(t);
-    }), () => e.disconnect();
-  }, [r]), /* @__PURE__ */ s.jsxs(
+    return l.forEach(({ id: r }) => {
+      const e = document.getElementById(r);
+      e && t.observe(e);
+    }), () => t.disconnect();
+  }, [l, a]), /* @__PURE__ */ o.jsxs(
     "div",
     {
-      className: u("toc-container", {
-        "toc-container-authenticated": x
+      className: x("toc-container", {
+        "toc-container-authenticated": b
       }),
       children: [
-        /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ o.jsx(
           "button",
           {
             className: "ui-button-accordion-toc",
-            onClick: n,
+            onClick: u,
             type: "button",
-            children: /* @__PURE__ */ s.jsxs(C, { className: "ui-header-table-of-contents", children: [
-              /* @__PURE__ */ s.jsx(p, { className: "text-slate-20 fw-semibold fs-7", children: h }),
-              /* @__PURE__ */ s.jsx(
-                H,
+            children: /* @__PURE__ */ o.jsxs(k, { className: "ui-header-table-of-contents", children: [
+              /* @__PURE__ */ o.jsx(v, { className: "text-slate-20 fw-semibold fs-7", children: w }),
+              /* @__PURE__ */ o.jsx(
+                C,
                 {
                   color: "primary",
-                  className: u("ui-arrow-toc", { "ui-expanded-toc": i })
+                  className: x("ui-arrow-toc", { "ui-expanded-toc": m })
                 }
               )
             ] })
           }
         ),
-        /* @__PURE__ */ s.jsx("div", { className: "scroll-progress-bar", children: /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ o.jsx("div", { className: "scroll-progress-bar", children: /* @__PURE__ */ o.jsx(
           "div",
           {
             className: "scroll-progress",
-            style: { width: `${b}%` }
+            style: { width: `${j}%` }
           }
         ) }),
-        g && /* @__PURE__ */ s.jsx(
-          R,
+        T && /* @__PURE__ */ o.jsx(
+          A,
           {
             type: "always",
             scrollbars: "vertical",
             className: "toc-scroll fw-semibold fs-6",
-            children: /* @__PURE__ */ s.jsx("div", { className: "toc-list base-col", children: r.map((e) => /* @__PURE__ */ s.jsx("div", { className: "toc-item", children: /* @__PURE__ */ s.jsx(
+            children: /* @__PURE__ */ o.jsx("div", { className: "toc-list base-col", children: l.map((t) => /* @__PURE__ */ o.jsx("div", { className: "toc-item", children: /* @__PURE__ */ o.jsx(
               "a",
               {
-                href: `#${e.id}`,
-                className: `toc-link ${w === e.id ? "active text-primary" : "text-slate-28"}`,
-                onClick: (o) => {
-                  var t;
-                  o.preventDefault(), l(e.id), setTimeout(() => {
-                    d(e.id);
-                  }, 100), (t = document.getElementById(e.id)) == null || t.scrollIntoView({ behavior: "smooth" }), n();
+                href: `#${t.id}`,
+                className: `toc-link ${g === t.id ? "active text-primary" : "text-slate-28"}`,
+                onClick: (r) => {
+                  var e;
+                  r.preventDefault(), f(t.id), n.current = !0, i.current && clearTimeout(i.current), i.current = setTimeout(() => {
+                    n.current = !1;
+                  }, 1e3), setTimeout(() => {
+                    a(t.id);
+                  }, 100), (e = document.getElementById(t.id)) == null || e.scrollIntoView({ behavior: "smooth" }), u();
                 },
-                children: e.text
+                children: t.text
               }
-            ) }, e.id)) })
+            ) }, t.id)) })
           }
         )
       ]

package/dist/index.es242.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es242.js","sources":["../src/components/ui/TableOfContents/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ScrollArea } from \"@radix-ui/themes\";\nimport \"./TableOfContents.scss\";\nimport { Row } from \"@/components\";\nimport { useMediaQueryV2 } from \"@/hooks/useMediaQuery.ts\";\nimport { ArrowDown } from \"@/icons\";\nimport clsx from \"clsx\";\nimport { HeadingLevel } from \"@/types/headings\";\n\ntype Heading = {\n  id: string;\n  text: string;\n};\n\ntype TableOfContentsProps = {\n  title: string;\n  headings: Heading[];\n  titleTag?: HeadingLevel;\n  modeAuthenticated?: boolean;\n  isOpen?: boolean;\n  onToggle?: () => void;\n};\n\nexport const TableOfContents = ({\n  title = \"Indice\",\n  headings,\n  titleTag: TitleTag = \"h1\",\n  modeAuthenticated = false,\n  isOpen,\n  onToggle = () => {},\n}: TableOfContentsProps) => {\n  const [activeId, setActiveId] = React.useState(\"\");\n  const [scrollProgress, setScrollProgress] = useState(0);\n  const isDesktop = useMediaQueryV2(\"(min-width: 768px)\", false);\n  const showScrollArea = isDesktop || isOpen;\n\n  useEffect(() => {\n    const updateScrollProgress = () => {\n      const scrollTop = window.scrollY;\n      const docHeight =\n        document.documentElement.scrollHeight - window.innerHeight;\n      const scrollPercent =\n        docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;\n      setScrollProgress(scrollPercent);\n    };\n\n    window.addEventListener(\"scroll\", updateScrollProgress);\n    updateScrollProgress();\n\n    return () => window.removeEventListener(\"scroll\", updateScrollProgress);\n  }, []);\n\n  const scrollToActiveItem = useCallback(\n    (activeId: string) => {\n      if (window.innerWidth < 768) return;\n\n      const activeLink = document.querySelector(\n        `a[href=\"#${activeId}\"]`,\n      ) as HTMLElement;\n      const scrollContainer = document.querySelector(\n        \".toc-scroll\",\n      ) as HTMLElement;\n\n      if (activeLink && scrollContainer) {\n        const containerRect = scrollContainer.getBoundingClientRect();\n        const linkRect = activeLink.getBoundingClientRect();\n\n        const isVisible =\n          linkRect.top >= containerRect.top &&\n          linkRect.bottom <= containerRect.bottom;\n\n        if (!isVisible) {\n          const linkOffsetTop = activeLink.offsetTop;\n          const containerHeight = scrollContainer.clientHeight;\n          const linkHeight = activeLink.offsetHeight;\n\n          const scrollTop =\n            linkOffsetTop - containerHeight / 2 + linkHeight / 2;\n\n          scrollContainer.scrollTo({\n            top: scrollTop,\n            behavior: \"smooth\",\n          });\n        }\n      }\n    },\n    [isDesktop],\n  );\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            setActiveId(entry.target.id);\n            scrollToActiveItem(entry.target.id);\n          }\n        });\n      },\n      {\n        rootMargin: \"-90px 0px -70% 0px\",\n        threshold: 0,\n      },\n    );\n\n    headings.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) observer.observe(element);\n    });\n\n    return () => observer.disconnect();\n  }, [headings]);\n\n  return (\n    <div\n      className={clsx(\"toc-container\", {\n        \"toc-container-authenticated\": modeAuthenticated,\n      })}\n    >\n      <button\n        className={\"ui-button-accordion-toc\"}\n        onClick={onToggle}\n        type=\"button\"\n      >\n        <Row className={\"ui-header-table-of-contents\"}>\n          <TitleTag className=\"text-slate-20 fw-semibold fs-7\">\n            {title}\n          </TitleTag>\n          <ArrowDown\n            color={\"primary\"}\n            className={clsx(\"ui-arrow-toc\", { \"ui-expanded-toc\": isOpen })}\n          />\n        </Row>\n      </button>\n\n      <div className=\"scroll-progress-bar\">\n        <div\n          className=\"scroll-progress\"\n          style={{ width: `${scrollProgress}%` }}\n        />\n      </div>\n\n      {showScrollArea && (\n        <ScrollArea\n          type=\"always\"\n          scrollbars=\"vertical\"\n          className=\"toc-scroll fw-semibold fs-6\"\n        >\n          <div className=\"toc-list base-col\">\n            {headings.map((item) => (\n              <div key={item.id} className=\"toc-item\">\n                <a\n                  href={`#${item.id}`}\n                  className={`toc-link ${activeId === item.id ? \"active text-primary\" : \"text-slate-28\"}`}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    setActiveId(item.id);\n\n                    setTimeout(() => {\n                      scrollToActiveItem(item.id);\n                    }, 100);\n\n                    document\n                      .getElementById(item.id)\n                      ?.scrollIntoView({ behavior: \"smooth\" });\n                    onToggle();\n                  }}\n                >\n                  {item.text}\n                </a>\n              </div>\n            ))}\n          </div>\n        </ScrollArea>\n      )}\n    </div>\n  );\n};\n"],"names":["TableOfContents","title","headings","TitleTag","modeAuthenticated","isOpen","onToggle","activeId","setActiveId","React","scrollProgress","setScrollProgress","useState","isDesktop","useMediaQueryV2","showScrollArea","useEffect","updateScrollProgress","scrollTop","docHeight","scrollPercent","scrollToActiveItem","useCallback","activeLink","scrollContainer","containerRect","linkRect","linkOffsetTop","containerHeight","linkHeight","observer","entries","entry","id","element","jsxs","clsx","jsx","Row","ArrowDown","ScrollArea","item","e","_a"],"mappings":"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"}
+{"version":3,"file":"index.es242.js","sources":["../src/components/ui/TableOfContents/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { ScrollArea } from \"@radix-ui/themes\";\nimport \"./TableOfContents.scss\";\nimport { Row } from \"@/components\";\nimport { useMediaQueryV2 } from \"@/hooks/useMediaQuery.ts\";\nimport { ArrowDown } from \"@/icons\";\nimport clsx from \"clsx\";\nimport { HeadingLevel } from \"@/types/headings\";\n\ntype Heading = {\n  id: string;\n  text: string;\n};\n\ntype TableOfContentsProps = {\n  title: string;\n  headings: Heading[];\n  titleTag?: HeadingLevel;\n  modeAuthenticated?: boolean;\n  isOpen?: boolean;\n  onToggle?: () => void;\n};\n\nexport const TableOfContents = ({\n  title = \"Indice\",\n  headings,\n  titleTag: TitleTag = \"h1\",\n  modeAuthenticated = false,\n  isOpen,\n  onToggle = () => {},\n}: TableOfContentsProps) => {\n  const [activeId, setActiveId] = React.useState(\"\");\n  const [scrollProgress, setScrollProgress] = useState(0);\n  const isDesktop = useMediaQueryV2(\"(min-width: 768px)\", false);\n  const showScrollArea = isDesktop || isOpen;\n  \n  // Utilizziamo un ref per bloccare le \"intersezioni di passaggio\"\n  // durante lo smooth scroll avviato da un click.\n  const isClickScrolling = React.useRef(false);\n  const scrollTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    const updateScrollProgress = () => {\n      const scrollTop = window.scrollY;\n      const docHeight =\n        document.documentElement.scrollHeight - window.innerHeight;\n      const scrollPercent =\n        docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;\n      setScrollProgress(scrollPercent);\n    };\n\n    window.addEventListener(\"scroll\", updateScrollProgress);\n    updateScrollProgress();\n\n    return () => window.removeEventListener(\"scroll\", updateScrollProgress);\n  }, []);\n\n  const scrollToActiveItem = useCallback(\n    (activeId: string) => {\n      if (window.innerWidth < 768) return;\n\n      const activeLink = document.querySelector(\n        `a[href=\"#${activeId}\"]`,\n      ) as HTMLElement;\n      const scrollContainer = document.querySelector(\n        \".toc-scroll\",\n      ) as HTMLElement;\n\n      if (activeLink && scrollContainer) {\n        const containerRect = scrollContainer.getBoundingClientRect();\n        const linkRect = activeLink.getBoundingClientRect();\n\n        const isVisible =\n          linkRect.top >= containerRect.top &&\n          linkRect.bottom <= containerRect.bottom;\n\n        if (!isVisible) {\n          // Calcoliamo la distanza relativa tra link e top del container a schermo\n          const relativeTop = linkRect.top - containerRect.top;\n          // Sommiamo lo scroll attuale per ottenere il target esatto \"assoluto\" del container\n          const targetScrollTop = scrollContainer.scrollTop + relativeTop;\n\n          // Centriamo il link all'interno del container\n          const centerScrollPos =\n            targetScrollTop - containerRect.height / 2 + linkRect.height / 2;\n\n          scrollContainer.scrollTo({\n            top: centerScrollPos,\n            behavior: \"smooth\",\n          });\n        }\n      }\n    },\n    [isDesktop],\n  );\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        // Se l'utente sta navigando tramite click, ignoriamo i cambiamenti per evitare salti\n        if (isClickScrolling.current) return;\n\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            setActiveId(entry.target.id);\n            scrollToActiveItem(entry.target.id);\n          }\n        });\n      },\n      {\n        rootMargin: \"-90px 0px -70% 0px\",\n        threshold: 0,\n      },\n    );\n\n    headings.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) observer.observe(element);\n    });\n\n    return () => observer.disconnect();\n  }, [headings, scrollToActiveItem]);\n\n  return (\n    <div\n      className={clsx(\"toc-container\", {\n        \"toc-container-authenticated\": modeAuthenticated,\n      })}\n    >\n      <button\n        className={\"ui-button-accordion-toc\"}\n        onClick={onToggle}\n        type=\"button\"\n      >\n        <Row className={\"ui-header-table-of-contents\"}>\n          <TitleTag className=\"text-slate-20 fw-semibold fs-7\">\n            {title}\n          </TitleTag>\n          <ArrowDown\n            color={\"primary\"}\n            className={clsx(\"ui-arrow-toc\", { \"ui-expanded-toc\": isOpen })}\n          />\n        </Row>\n      </button>\n\n      <div className=\"scroll-progress-bar\">\n        <div\n          className=\"scroll-progress\"\n          style={{ width: `${scrollProgress}%` }}\n        />\n      </div>\n\n      {showScrollArea && (\n        <ScrollArea\n          type=\"always\"\n          scrollbars=\"vertical\"\n          className=\"toc-scroll fw-semibold fs-6\"\n        >\n          <div className=\"toc-list base-col\">\n            {headings.map((item) => (\n              <div key={item.id} className=\"toc-item\">\n                <a\n                  href={`#${item.id}`}\n                  className={`toc-link ${activeId === item.id ? \"active text-primary\" : \"text-slate-28\"}`}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    \n                    // Attiviamo subito il link desiderato\n                    setActiveId(item.id);\n\n                    // Blocchiamo l'Observer per 1 secondo (tempo sufficiente allo smooth scroll nativo)\n                    isClickScrolling.current = true;\n                    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n                    scrollTimeout.current = setTimeout(() => {\n                      isClickScrolling.current = false;\n                    }, 1000);\n\n                    setTimeout(() => {\n                      scrollToActiveItem(item.id);\n                    }, 100);\n\n                    document\n                      .getElementById(item.id)\n                      ?.scrollIntoView({ behavior: \"smooth\" });\n                    onToggle();\n                  }}\n                >\n                  {item.text}\n                </a>\n              </div>\n            ))}\n          </div>\n        </ScrollArea>\n      )}\n    </div>\n  );\n};\n"],"names":["TableOfContents","title","headings","TitleTag","modeAuthenticated","isOpen","onToggle","activeId","setActiveId","React","scrollProgress","setScrollProgress","useState","isDesktop","useMediaQueryV2","showScrollArea","isClickScrolling","scrollTimeout","useEffect","updateScrollProgress","scrollTop","docHeight","scrollPercent","scrollToActiveItem","useCallback","activeLink","scrollContainer","containerRect","linkRect","relativeTop","centerScrollPos","observer","entries","entry","id","element","jsxs","clsx","jsx","Row","ArrowDown","ScrollArea","item","e","_a"],"mappings":"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"}

package/dist/index.es250.js

@@ -1,6 +1,6 @@
 import { j as a } from "./index.es264.js";
 import { clsx as h } from "./index.es266.js";
-import { createColorClasses as m } from "./index.es300.js";
+import { createColorClasses as m } from "./index.es339.js";
 const p = ({
   width: o = 32,
   height: s = 32,

package/dist/index.es252.js

@@ -1,6 +1,6 @@
 import { j as o } from "./index.es264.js";
 import { clsx as m } from "./index.es266.js";
-import { createColorClasses as c } from "./index.es300.js";
+import { createColorClasses as c } from "./index.es339.js";
 const f = ({
   width: s = 13,
   height: e = 9,

package/dist/index.es253.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es264.js";
 import { clsx as m } from "./index.es266.js";
-import { createColorClasses as p } from "./index.es300.js";
+import { createColorClasses as p } from "./index.es339.js";
 const g = ({
   width: o = 13,
   height: e = 9,

package/dist/index.es255.js

@@ -1,5 +1,5 @@
 import { j as C } from "./index.es264.js";
-import { createColorClasses as a } from "./index.es300.js";
+import { createColorClasses as a } from "./index.es339.js";
 import { clsx as p } from "./index.es266.js";
 const x = ({
   width: e = 24,

package/dist/index.es259.js

@@ -1,6 +1,6 @@
 import { j as s } from "./index.es264.js";
 import { clsx as m } from "./index.es266.js";
-import { createColorClasses as n } from "./index.es300.js";
+import { createColorClasses as n } from "./index.es339.js";
 const x = ({
   width: e = 24,
   height: o = 24,

package/dist/index.es26.js

@@ -2,9 +2,9 @@ import { j as i } from "./index.es264.js";
 import { useMemo as s } from "react";
 import { AuthorBlock as U } from "./index.es25.js";
 import './components/ui/AuthorWithImage/AuthorWithImage.css';/* empty css            */
-import { fromISODateToDateFormatted as A } from "./index.es337.js";
-import { useCopyToClipboardCurrentPage as $ } from "./index.es338.js";
-import { getFullNameInitials as E } from "./index.es339.js";
+import { fromISODateToDateFormatted as A } from "./index.es336.js";
+import { useCopyToClipboardCurrentPage as $ } from "./index.es337.js";
+import { getFullNameInitials as E } from "./index.es338.js";
 import { Row as S } from "./index.es214.js";
 import { splitInTwo as F } from "./index.es282.js";
 import { ActionIconText as M } from "./index.es9.js";

package/dist/index.es263.js

@@ -1,6 +1,6 @@
 import { j as c } from "./index.es264.js";
 import { clsx as e } from "./index.es266.js";
-import { createColorClasses as z } from "./index.es300.js";
+import { createColorClasses as z } from "./index.es339.js";
 const M = ({
   width: r = 24,
   height: s = 24,

package/dist/index.es267.js

@@ -1,4 +1,4 @@
-import { __require as r } from "./index.es501.js";
+import { __require as r } from "./index.es499.js";
 var a = r();
 export {
   a as l

package/dist/index.es275.js

@@ -1,5 +1,5 @@
-import r from "./index.es499.js";
-import t from "./index.es500.js";
+import r from "./index.es502.js";
+import t from "./index.es503.js";
 const i = (a, e) => typeof window > "u" ? t(a, {
   allowedTags: t.defaults.allowedTags.concat([
     "img",

package/dist/index.es28.js

@@ -1,5 +1,5 @@
 import { j as s } from "./index.es264.js";
-import { createColorClasses as l } from "./index.es300.js";
+import { createColorClasses as l } from "./index.es339.js";
 import { clsx as x } from "./index.es266.js";
 const p = ({
   initials: e,

package/dist/{index.es302.js → index.es301.js}

@@ -22,4 +22,4 @@ const i = ({
 export {
   i as BreadcrumbItem
 };
-//# sourceMappingURL=index.es302.js.map
+//# sourceMappingURL=index.es301.js.map

package/dist/{index.es302.js.map → index.es301.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.es302.js","sources":["../src/components/navigations/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import \"./Breadcrumb.scss\";\nimport clsx from \"clsx\";\nimport { ComponentType } from \"react\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href?: string;\n  isClickable?: boolean;\n  asLink?: \"a\" | ComponentType<any>;\n};\n\nexport const BreadcrumbItem = ({\n  label,\n  href,\n  isClickable,\n  asLink = \"a\",\n}: BreadcrumbItemProps) => {\n  const LinkComponent = asLink;\n  return (\n    <span\n      className={clsx(\"ui-breadcrumb-item\", {\n        \"active text-slate-20 fw-semibold\": isClickable,\n        \"text-slate-28\": !isClickable,\n      })}\n    >\n      {href && isClickable ? (\n        <LinkComponent href={href}>{label}</LinkComponent>\n      ) : (\n        label\n      )}\n    </span>\n  );\n};\n"],"names":["BreadcrumbItem","label","href","isClickable","asLink","LinkComponent","jsx","clsx"],"mappings":";;;AAWO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAA2B;AACzB,QAAMC,IAAgBD;AACtB,SACEE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,sBAAsB;AAAA,QACpC,oCAAoCJ;AAAA,QACpC,iBAAiB,CAACA;AAAA,MAAA,CACnB;AAAA,MAEA,eAAQA,IACPG,gBAAAA,MAACD,GAAA,EAAc,MAAAH,GAAa,aAAM,IAElCD;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"index.es301.js","sources":["../src/components/navigations/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import \"./Breadcrumb.scss\";\nimport clsx from \"clsx\";\nimport { ComponentType } from \"react\";\n\nexport type BreadcrumbItemProps = {\n  label: string;\n  href?: string;\n  isClickable?: boolean;\n  asLink?: \"a\" | ComponentType<any>;\n};\n\nexport const BreadcrumbItem = ({\n  label,\n  href,\n  isClickable,\n  asLink = \"a\",\n}: BreadcrumbItemProps) => {\n  const LinkComponent = asLink;\n  return (\n    <span\n      className={clsx(\"ui-breadcrumb-item\", {\n        \"active text-slate-20 fw-semibold\": isClickable,\n        \"text-slate-28\": !isClickable,\n      })}\n    >\n      {href && isClickable ? (\n        <LinkComponent href={href}>{label}</LinkComponent>\n      ) : (\n        label\n      )}\n    </span>\n  );\n};\n"],"names":["BreadcrumbItem","label","href","isClickable","asLink","LinkComponent","jsx","clsx"],"mappings":";;;AAWO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AACX,MAA2B;AACzB,QAAMC,IAAgBD;AACtB,SACEE,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,sBAAsB;AAAA,QACpC,oCAAoCJ;AAAA,QACpC,iBAAiB,CAACA;AAAA,MAAA,CACnB;AAAA,MAEA,eAAQA,IACPG,gBAAAA,MAACD,GAAA,EAAc,MAAAH,GAAa,aAAM,IAElCD;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/index.es305.js

@@ -0,0 +1,151 @@
+import { j as e } from "./index.es264.js";
+import { Button as u } from "./index.es36.js";
+import { HeaderTopBanner as y } from "./index.es165.js";
+import { useState as w, useRef as C, useCallback as N, useEffect as h } from "react";
+import { clsx as s } from "./index.es266.js";
+import { useFocusTrap as k } from "./index.es521.js";
+import { Container as L } from "./index.es91.js";
+import './components/navigations/HeaderMobile/HeaderMobile.css';/* empty css            */
+import { Col as E } from "./index.es82.js";
+import { Hamburguer as z } from "./index.es160.js";
+import { Row as M } from "./index.es214.js";
+import { Close as R } from "./index.es80.js";
+const J = ({
+  shortTitle: p,
+  menuTitle: f = "Menù",
+  region: x,
+  asLink: l = "a",
+  navigatonItems: b,
+  labels: t,
+  loginLink: v = "/",
+  variant: d = "default"
+}) => {
+  const j = l, [i, c] = w(!1), a = "main-navigation", m = C(null);
+  k(m, i);
+  const o = N(() => {
+    c(!i);
+  }, [i]);
+  h(() => (i ? document.body.classList.add("ui-body-overflow-hidden") : document.body.classList.remove("ui-body-overflow-hidden"), () => {
+    document.body.classList.remove("ui-body-overflow-hidden");
+  }), [i]), h(() => {
+    const n = (r) => {
+      r.key === "Escape" && i && o();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [i, o]);
+  const g = () => {
+    c(!1);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "sticky-header shadow", children: [
+    /* @__PURE__ */ e.jsx(
+      y,
+      {
+        asLink: l,
+        shortTitle: p,
+        region: x,
+        variant: d
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      L,
+      {
+        className: s(
+          d === "operator" ? "bg-radial" : "bg-slate-20 ",
+          "min-h-x64 base-row align-items-center justify-content-end"
+        ),
+        as: "header",
+        py: "x8",
+        children: [
+          /* @__PURE__ */ e.jsxs(M, { gap: "x24", alignItems: "center", justifyContent: "end", children: [
+            /* @__PURE__ */ e.jsxs(
+              u,
+              {
+                size: "3",
+                bg: "white",
+                textColor: "primary",
+                href: v,
+                asLink: "a",
+                className: "ui-login-button-header-mobile",
+                children: [
+                  t.login,
+                  /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: " Accedi con Cohesion" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                "aria-expanded": i,
+                "aria-label": "Apri menu di navigazione",
+                onClick: o,
+                className: "ui-mobile-menu-toggle",
+                "aria-controls": a,
+                children: /* @__PURE__ */ e.jsx(z, { width: 40, height: 40, color: "white" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsxs(
+            "nav",
+            {
+              id: a,
+              "aria-label": "Menu di navigazione",
+              className: s(i ? "ui-mobile-nav-panel" : "visually-hidden"),
+              ref: m,
+              children: [
+                /* @__PURE__ */ e.jsxs(E, { className: "ui-mobile-nav-header", children: [
+                  /* @__PURE__ */ e.jsxs(
+                    u,
+                    {
+                      size: "4",
+                      textColor: "primary",
+                      bg: "transparent",
+                      onClick: o,
+                      "aria-label": "Chiudi menu di navigazione",
+                      "aria-controls": a,
+                      children: [
+                        t.closeMenu,
+                        /* @__PURE__ */ e.jsx(R, {})
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx("h2", { className: "fs-3 text-slate-20", children: f })
+                ] }),
+                /* @__PURE__ */ e.jsx("ul", { className: "list-style-none p-x16", role: "list", children: b.map((n, r) => /* @__PURE__ */ e.jsx(
+                  "li",
+                  {
+                    className: s(
+                      "ui-mobile-nav-item",
+                      n.active && "active"
+                    ),
+                    children: /* @__PURE__ */ e.jsxs(
+                      j,
+                      {
+                        href: n.href,
+                        className: s(
+                          "text-decoration-none text-primary fs-5",
+                          n.active ? "fw-bold" : "fw-normal"
+                        ),
+                        onClick: g,
+                        target: n.isNewTab ? "_blank" : void 0,
+                        rel: n.isNewTab ? "noopener noreferrer" : void 0,
+                        children: [
+                          n.label,
+                          n.active && /* @__PURE__ */ e.jsx("span", { className: "visually-hidden", children: "Attivo" })
+                        ]
+                      }
+                    )
+                  },
+                  r
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  J as HeaderMobile
+};
+//# sourceMappingURL=index.es305.js.map

package/dist/index.es305.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es305.js","sources":["../src/components/navigations/HeaderMobile/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@/components/ui/Button\";\nimport { Region } from \"../Header\";\nimport { HeaderTopBanner, HeaderTopBannerProps } from \"../HeaderTopBanner\";\nimport { Close, Hamburguer } from \"@/icons\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { useFocusTrap } from \"@/hooks/useFocusTrap\";\nimport { Container } from \"@/components/ui/Container\";\nimport \"./HeaderMobile.scss\";\nimport { Col } from \"@/components/ui/Col\";\nimport { Row } from \"@/components\";\nimport { WithVariant } from \"@/types/variant\";\n\ntype NavigationItem = {\n  label: string;\n  href: string;\n  active?: boolean;\n  isNewTab?: boolean;\n};\n\ntype NavigationLabels = {\n  closeMenu: string;\n  login: string;\n};\n\nexport type HeaderMobileProps = HeaderTopBannerProps &\n  WithVariant<{\n    shortTitle: React.ReactNode;\n    menuTitle?: string;\n    region: Region;\n    navigatonItems: NavigationItem[];\n    labels: NavigationLabels;\n    loginLink?: string;\n  }>;\n\nexport const HeaderMobile = ({\n  shortTitle,\n  menuTitle = \"Menù\",\n  region,\n  asLink = \"a\",\n  navigatonItems,\n  labels,\n  loginLink = \"/\",\n  variant = \"default\",\n}: HeaderMobileProps) => {\n  const LinkComponent = asLink;\n  const [isOpen, setIsOpen] = useState(false);\n  const navId = \"main-navigation\";\n  const navRef = useRef<HTMLElement>(null);\n\n  useFocusTrap(navRef, isOpen);\n\n  const toggleMenu = useCallback(() => {\n    setIsOpen(!isOpen);\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add(\"ui-body-overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"ui-body-overflow-hidden\");\n    }\n\n    return () => {\n      document.body.classList.remove(\"ui-body-overflow-hidden\");\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\" && isOpen) {\n        toggleMenu();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen, toggleMenu]);\n\n  const handleLinkClick = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <div className=\"sticky-header shadow\">\n      <HeaderTopBanner\n        asLink={asLink}\n        shortTitle={shortTitle}\n        region={region}\n        variant={variant}\n      />\n\n      <Container\n        className={clsx(\n          variant === \"operator\" ? \"bg-radial\" : \"bg-slate-20 \",\n          \"min-h-x64 base-row align-items-center justify-content-end\",\n        )}\n        as=\"header\"\n        py=\"x8\"\n      >\n        <Row gap={\"x24\"} alignItems={\"center\"} justifyContent={\"end\"}>\n          <Button\n            size=\"3\"\n            bg=\"white\"\n            textColor=\"primary\"\n            href={loginLink}\n            asLink=\"a\"\n            className={\"ui-login-button-header-mobile\"}\n          >\n            {labels.login}\n            <span className=\"visually-hidden\"> Accedi con Cohesion</span>\n          </Button>\n          <button\n            aria-expanded={isOpen}\n            aria-label=\"Apri menu di navigazione\"\n            onClick={toggleMenu}\n            className=\"ui-mobile-menu-toggle\"\n            aria-controls={navId}\n          >\n            <Hamburguer width={40} height={40} color=\"white\" />\n          </button>\n        </Row>\n\n        <nav\n          id={navId}\n          aria-label=\"Menu di navigazione\"\n          className={clsx(isOpen ? \"ui-mobile-nav-panel\" : \"visually-hidden\")}\n          ref={navRef}\n        >\n          <Col className=\"ui-mobile-nav-header\">\n            <Button\n              size=\"4\"\n              textColor=\"primary\"\n              bg=\"transparent\"\n              onClick={toggleMenu}\n              aria-label=\"Chiudi menu di navigazione\"\n              aria-controls={navId}\n            >\n              {labels.closeMenu}\n              <Close />\n            </Button>\n            <h2 className=\"fs-3 text-slate-20\">{menuTitle}</h2>\n          </Col>\n\n          <ul className=\"list-style-none p-x16\" role=\"list\">\n            {navigatonItems.map((item, index) => {\n              return (\n                <li\n                  key={index}\n                  className={clsx(\n                    \"ui-mobile-nav-item\",\n                    item.active && \"active\",\n                  )}\n                >\n                  <LinkComponent\n                    href={item.href}\n                    className={clsx(\n                      \"text-decoration-none text-primary fs-5\",\n                      item.active ? \"fw-bold\" : \"fw-normal\",\n                    )}\n                    onClick={handleLinkClick}\n                    target={item.isNewTab ? \"_blank\" : undefined}\n                    rel={item.isNewTab ? \"noopener noreferrer\" : undefined}\n                  >\n                    {item.label}\n                    {item.active && (\n                      <span className=\"visually-hidden\">Attivo</span>\n                    )}\n                  </LinkComponent>\n                </li>\n              );\n            })}\n          </ul>\n        </nav>\n      </Container>\n    </div>\n  );\n};\n"],"names":["HeaderMobile","shortTitle","menuTitle","region","asLink","navigatonItems","labels","loginLink","variant","LinkComponent","isOpen","setIsOpen","useState","navId","navRef","useRef","useFocusTrap","toggleMenu","useCallback","useEffect","handleEscape","e","handleLinkClick","jsxs","jsx","HeaderTopBanner","Container","clsx","Row","Button","Hamburguer","Col","Close","item","index"],"mappings":"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"}