quirk-ui 0.1.72 → 0.1.73

package/dist/next/blocks/StickyScrollBlock/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index12.css');const s=require("react/jsx-runtime"),a=require("react"),j=require("../../utils/mediaUtils.cjs"),$=require("../../utils/blockRenderers.cjs"),q=require("../../../core/context/ThemeContext.cjs"),C=require("../../hooks/useMediaQuery.cjs"),N=require("../../hooks/useStyleClasses.cjs"),I="_layout_1e5td_1",M="_container_1e5td_7",A="_heading_1e5td_23",B="_title_1e5td_28",E="_text_1e5td_28",U="_scroll_1e5td_43",z="_sidebar_1e5td_48",Q="_number_1e5td_73",O="_link_1e5td_91",P="_active_1e5td_106",V="_content_1e5td_118",D="_flex_1e5td_129",F="_item_1e5td_154",G="_image_1e5td_173",H="_eyebrow_1e5td_199",l={layout:I,container:M,heading:A,title:B,text:E,scroll:U,sidebar:z,number:Q,link:O,active:P,content:V,flex:D,item:F,image:G,eyebrow:H};function J({heading:i,items:r,showNumbers:b,styleOptions:m,id:h,renderImage:y,renderRichText:o}){const[k,v]=a.useState(null),{mode:g}=q.useTheme(),S=C.useMediaQuery("(max-width: 768px)"),p=N.useStyleClasses(m),u=a.useRef(!1),_=a.useRef(null),f=a.useRef([]),w=a.useCallback(e=>t=>{f.current[e]=t},[]);a.useEffect(()=>{const e=new IntersectionObserver(t=>{if(u.current)return;const n=t.filter(c=>c.isIntersecting).sort((c,d)=>d.intersectionRatio-c.intersectionRatio);if(n.length>0){const c=n[0].target.getAttribute("id");c&&v(c)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return f.current.forEach(t=>{t&&e.observe(t)}),()=>{e.disconnect()}},[r]);const x=a.useCallback(e=>{var t;v(e),u.current=!0,_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{u.current=!1},600),(t=document.getElementById(e))==null||t.scrollIntoView({behavior:"smooth",block:"start"})},[]);return s.jsx("section",{id:h,className:`${p} ${l.layout}`,children:s.jsxs("article",{className:l.container,children:[s.jsxs("div",{className:l.heading,children:[s.jsxs("div",{children:[i.eyebrow&&(o==null?void 0:o({blocks:i.eyebrow,className:l.eyebrow})),o==null?void 0:o({blocks:i.title,className:l.title})]}),i.description&&(o==null?void 0:o({blocks:i.description}))]}),s.jsxs("div",{className:l.scroll,children:[s.jsx("nav",{className:l.sidebar,"aria-label":"Section navigation",children:s.jsx("ul",{children:r.map((e,t)=>s.jsx("li",{children:s.jsxs("button",{type:"button",className:`${l.link} ${k===e._key?l.active:""}`,"aria-current":k===e._key?"true":void 0,onClick:()=>x(e._key),children:[b&&s.jsx("div",{className:l.number,"aria-hidden":"true",children:t+1}),e.title&&$.extractText(e.title)]})},e._key))})}),s.jsx("div",{className:l.content,children:r.map((e,t)=>{const n=j.resolveImageUrl(e.image,g),c=j.resolveAltText(e.image,g),d=N.useStyleClasses(m);return s.jsxs("section",{ref:w(t),id:e._key,className:l.item,"aria-labelledby":`${e._key}-heading`,children:[s.jsxs("div",{className:l.text,children:[s.jsxs("div",{className:l.flex,children:[S&&b&&s.jsx("div",{className:l.number,"aria-hidden":"true",children:t+1}),e.title&&(o==null?void 0:o({blocks:e.title,className:l.title}))]}),e.description&&(o==null?void 0:o({blocks:e.description}))]}),e.image&&n&&s.jsx("div",{className:` ${d} ${l.image}`,children:y?y({src:n,alt:c,width:600,height:400,priority:t===0,loading:t===0?"eager":"lazy"}):s.jsx("img",{src:n,alt:c,width:600,height:400,loading:t===0?"eager":"lazy"})})]},e._key)})})]})]})})}exports.StickyScrollBlock=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index12.css');const t=require("react/jsx-runtime"),a=require("react"),f=require("../../utils/mediaUtils.cjs"),$=require("../../utils/blockRenderers.cjs"),q=require("../../../core/context/ThemeContext.cjs"),C=require("../../hooks/useMediaQuery.cjs"),j=require("../../hooks/useStyleClasses.cjs"),I="_layout_1e5td_1",M="_container_1e5td_7",A="_heading_1e5td_23",B="_title_1e5td_28",E="_text_1e5td_28",O="_scroll_1e5td_43",U="_sidebar_1e5td_48",z="_number_1e5td_73",Q="_link_1e5td_91",P="_active_1e5td_106",V="_content_1e5td_118",D="_flex_1e5td_129",F="_item_1e5td_154",G="_image_1e5td_173",H="_eyebrow_1e5td_199",l={layout:I,container:M,heading:A,title:B,text:E,scroll:O,sidebar:U,number:z,link:Q,active:P,content:V,flex:D,item:F,image:G,eyebrow:H};function J({heading:i,items:r,showNumbers:b,styleOptions:N,id:p,renderImage:m,renderRichText:o}){const[y,k]=a.useState(null),{mode:v}=q.useTheme(),h=C.useMediaQuery("(max-width: 768px)"),S=j.useStyleClasses(N),u=a.useRef(!1),_=a.useRef(null),g=a.useRef([]),w=a.useCallback(e=>s=>{g.current[e]=s},[]);a.useEffect(()=>{const e=new IntersectionObserver(s=>{if(u.current)return;const n=s.filter(c=>c.isIntersecting).sort((c,d)=>d.intersectionRatio-c.intersectionRatio);if(n.length>0){const c=n[0].target.getAttribute("id");c&&k(c)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return g.current.forEach(s=>{s&&e.observe(s)}),()=>{e.disconnect()}},[r]);const x=a.useCallback(e=>{var s;k(e),u.current=!0,_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{u.current=!1},600),(s=document.getElementById(e))==null||s.scrollIntoView({behavior:"smooth",block:"start"})},[]);return t.jsx("section",{id:p,className:`${S} ${l.layout}`,children:t.jsxs("article",{className:l.container,children:[t.jsxs("div",{className:l.heading,children:[t.jsxs("div",{children:[i.eyebrow&&(o==null?void 0:o({blocks:i.eyebrow,className:l.eyebrow})),o==null?void 0:o({blocks:i.title,className:l.title})]}),i.description&&(o==null?void 0:o({blocks:i.description}))]}),t.jsxs("div",{className:l.scroll,children:[t.jsx("nav",{className:l.sidebar,"aria-label":"Section navigation",children:t.jsx("ul",{children:r.map((e,s)=>t.jsx("li",{children:t.jsxs("button",{type:"button",className:`${l.link} ${y===e._key?l.active:""}`,"aria-current":y===e._key?"true":void 0,onClick:()=>x(e._key),children:[b&&t.jsx("div",{className:l.number,"aria-hidden":"true",children:s+1}),e.title&&$.extractText(e.title)]})},e._key))})}),t.jsx("div",{className:l.content,children:r.map((e,s)=>{const n=f.resolveImageUrl(e.image,v),c=f.resolveAltText(e.image,v),d=j.useStyleClasses(e.styleOptions);return t.jsxs("section",{ref:w(s),id:e._key,className:l.item,"aria-labelledby":`${e._key}-heading`,children:[t.jsxs("div",{className:l.text,children:[t.jsxs("div",{className:l.flex,children:[h&&b&&t.jsx("div",{className:l.number,"aria-hidden":"true",children:s+1}),e.title&&(o==null?void 0:o({blocks:e.title,className:l.title}))]}),e.description&&(o==null?void 0:o({blocks:e.description}))]}),e.image&&n&&t.jsx("div",{className:` ${d} ${l.image}`,children:m?m({src:n,alt:c,width:600,height:400,priority:s===0,loading:s===0?"eager":"lazy"}):t.jsx("img",{src:n,alt:c,width:600,height:400,loading:s===0?"eager":"lazy"})})]},e._key)})})]})]})})}exports.StickyScrollBlock=J;

package/dist/next/blocks/StickyScrollBlock/index.mjs

@@ -1,21 +1,21 @@
 import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import { useState as A, useRef as d, useCallback as N, useEffect as E } from "react";
+import { useState as A, useRef as d, useCallback as p, useEffect as E } from "react";
 import { resolveImageUrl as M, resolveAltText as j } from "../../utils/mediaUtils.mjs";
 import { extractText as z } from "../../utils/blockRenderers.mjs";
 import { useTheme as B } from "../../../core/context/ThemeContext.mjs";
-import { useMediaQuery as U } from "../../hooks/useMediaQuery.mjs";
-import { useStyleClasses as w } from "../../hooks/useStyleClasses.mjs";
-import '../../../index12.css';const Q = "_layout_1e5td_1", V = "_container_1e5td_7", q = "_heading_1e5td_23", D = "_title_1e5td_28", F = "_text_1e5td_28", G = "_scroll_1e5td_43", H = "_sidebar_1e5td_48", J = "_number_1e5td_73", L = "_link_1e5td_91", O = "_active_1e5td_106", P = "_content_1e5td_118", W = "_flex_1e5td_129", X = "_item_1e5td_154", Y = "_image_1e5td_173", Z = "_eyebrow_1e5td_199", s = {
-  layout: Q,
-  container: V,
-  heading: q,
-  title: D,
-  text: F,
-  scroll: G,
-  sidebar: H,
-  number: J,
-  link: L,
-  active: O,
+import { useMediaQuery as O } from "../../hooks/useMediaQuery.mjs";
+import { useStyleClasses as N } from "../../hooks/useStyleClasses.mjs";
+import '../../../index12.css';const U = "_layout_1e5td_1", Q = "_container_1e5td_7", V = "_heading_1e5td_23", q = "_title_1e5td_28", D = "_text_1e5td_28", F = "_scroll_1e5td_43", G = "_sidebar_1e5td_48", H = "_number_1e5td_73", J = "_link_1e5td_91", L = "_active_1e5td_106", P = "_content_1e5td_118", W = "_flex_1e5td_129", X = "_item_1e5td_154", Y = "_image_1e5td_173", Z = "_eyebrow_1e5td_199", s = {
+  layout: U,
+  container: Q,
+  heading: V,
+  title: q,
+  text: D,
+  scroll: F,
+  sidebar: G,
+  number: H,
+  link: J,
+  active: L,
   content: P,
   flex: W,
   item: X,
@@ -26,14 +26,14 @@ function lt({
   heading: n,
   items: r,
   showNumbers: b,
-  styleOptions: f,
+  styleOptions: w,
   id: h,
-  renderImage: v,
+  renderImage: f,
   renderRichText: l
 }) {
-  const [y, g] = A(null), { mode: k } = B(), I = U("(max-width: 768px)"), $ = w(f), _ = d(!1), m = d(null), p = d([]), S = N(
+  const [y, v] = A(null), { mode: g } = B(), I = O("(max-width: 768px)"), $ = N(w), _ = d(!1), m = d(null), k = d([]), S = p(
     (t) => (e) => {
-      p.current[t] = e;
+      k.current[t] = e;
     },
     []
   );
@@ -44,7 +44,7 @@ function lt({
         const i = e.filter((o) => o.isIntersecting).sort((o, u) => u.intersectionRatio - o.intersectionRatio);
         if (i.length > 0) {
           const o = i[0].target.getAttribute("id");
-          o && g(o);
+          o && v(o);
         }
       },
       {
@@ -52,15 +52,15 @@ function lt({
         threshold: 0.1
       }
     );
-    return p.current.forEach((e) => {
+    return k.current.forEach((e) => {
       e && t.observe(e);
     }), () => {
       t.disconnect();
     };
   }, [r]);
-  const C = N((t) => {
+  const C = p((t) => {
     var e;
-    g(t), _.current = !0, m.current && clearTimeout(m.current), m.current = setTimeout(() => {
+    v(t), _.current = !0, m.current && clearTimeout(m.current), m.current = setTimeout(() => {
       _.current = !1;
     }, 600), (e = document.getElementById(t)) == null || e.scrollIntoView({ behavior: "smooth", block: "start" });
   }, []);
@@ -93,7 +93,7 @@ function lt({
         }
       ) }, t._key)) }) }),
       /* @__PURE__ */ a("div", { className: s.content, children: r.map((t, e) => {
-        const i = M(t.image, k), o = j(t.image, k), u = w(f);
+        const i = M(t.image, g), o = j(t.image, g), u = N(t.styleOptions);
         return /* @__PURE__ */ c(
           "section",
           {
@@ -112,7 +112,7 @@ function lt({
                 ] }),
                 t.description && (l == null ? void 0 : l({ blocks: t.description }))
               ] }),
-              t.image && i && /* @__PURE__ */ a("div", { className: ` ${u} ${s.image}`, children: v ? v({
+              t.image && i && /* @__PURE__ */ a("div", { className: ` ${u} ${s.image}`, children: f ? f({
                 src: i,
                 alt: o,
                 width: 600,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.1.72",
+  "version": "0.1.73",
   "type": "module",
   "exports": {
     ".": {