quirk-ui 0.0.605 → 0.0.606

package/dist/main.d.ts

@@ -1260,7 +1260,7 @@ declare const statusClassMap: {
     readonly busy: string;
 };
 
-export declare function StickyScrollBlock({ heading, items, showNumbers, id, }: StickyScrollBlockProps_2): JSX.Element;
+export declare function StickyScrollBlock({ heading, items, showNumbers, styleOptions, id, }: StickyScrollBlockProps_2): JSX.Element;
 
 export { StickyScrollBlockProps }
 

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index5.css');const t=require("react/jsx-runtime"),r=require("react"),N=require("next/image"),a=require("../../ui/PortableTextRenderer/index.cjs");require("react-dom");const R=require("../../contexts/ThemeContext.cjs"),q=require("../../utils/portableTextToPlainText.cjs"),S="_layout_59elj_1",U="_container_59elj_7",w="_heading_59elj_19",P="_title_59elj_24",$="_text_59elj_24",A="_scroll_59elj_39",B="_sidebar_59elj_44",C="_number_59elj_69",E="_link_59elj_84",M="_active_59elj_98",O="_content_59elj_110",V="_item_59elj_114",z="_image_59elj_138",s={layout:S,container:U,heading:w,title:P,text:$,scroll:A,sidebar:B,number:C,link:E,active:M,content:O,item:V,image:z};function D({heading:o,items:_,showNumbers:f,id:y}){const[T,u]=r.useState(null),{mode:d}=R.useTheme(),p=r.useRef(null),m=r.useRef([]);return r.useEffect(()=>{const e=new IntersectionObserver(c=>{const i=c.filter(n=>n.isIntersecting).sort((n,l)=>l.intersectionRatio-n.intersectionRatio);if(i.length>0){const n=i[0].target.getAttribute("id");n&&u(n)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return m.current.forEach(c=>{c&&e.observe(c)}),p.current=e,()=>{e.disconnect()}},[]),t.jsx("section",{id:y,className:s.layout,children:t.jsxs("article",{className:s.container,children:[t.jsxs("div",{className:s.heading,children:[t.jsx(a.RichText,{className:s.title,blocks:o.title}),o.description&&t.jsx(a.RichText,{blocks:o.description})]}),t.jsxs("div",{className:s.scroll,children:[t.jsx("nav",{className:s.sidebar,children:t.jsx("ul",{children:_.map((e,c)=>t.jsx("li",{children:t.jsxs("button",{type:"button",className:`${s.link} ${T===e._key?s.active:""}`,onClick:()=>{u(e._key);const i=document.getElementById(e._key);i==null||i.scrollIntoView({behavior:"smooth",block:"start"})},children:[f&&t.jsx("div",{className:s.number,children:c+1}),e.title&&q.portableTextToPlainText(e.title)]})},e._key))})}),t.jsx("div",{className:s.content,children:_.map((e,c)=>{var l,x,g,j,h,b,k,v;let i;(l=e.image)!=null&&l.imageUrls&&(i=d==="dark"&&((x=e.image.imageUrls.dark)==null?void 0:x.medium)||e.image.imageUrls.default.medium);let n=((h=(j=(g=e.image)==null?void 0:g[d==="dark"?"darkImage":"defaultImage"])==null?void 0:j.asset)==null?void 0:h.altText)||((v=(k=(b=e.image)==null?void 0:b[d==="dark"?"darkImage":"defaultImage"])==null?void 0:k.asset)==null?void 0:v.description)||"Card image";return t.jsxs("section",{ref:I=>{m.current[c]=I},id:e._key,className:s.item,children:[t.jsxs("div",{className:s.text,children:[e.title&&t.jsx(a.RichText,{className:s.title,blocks:e.title}),e.description&&t.jsx(a.RichText,{blocks:e.description})]}),e.image&&i&&t.jsx("div",{className:s.image,children:t.jsx(N,{src:i,alt:n,width:600,height:400,priority:!0})})]},e._key)})})]})]})})}exports.StickyScrollBlock=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index5.css');const t=require("react/jsx-runtime"),r=require("react"),q=require("next/image"),a=require("../../ui/PortableTextRenderer/index.cjs");require("react-dom");const S=require("../../contexts/ThemeContext.cjs"),$=require("../../utils/portableTextToPlainText.cjs"),C=require("../../hooks/useStyleClasses.cjs"),U="_layout_59elj_1",w="_container_59elj_7",P="_heading_59elj_19",A="_title_59elj_24",B="_text_59elj_24",E="_scroll_59elj_39",M="_sidebar_59elj_44",O="_number_59elj_69",V="_link_59elj_84",z="_active_59elj_98",D="_content_59elj_110",F="_item_59elj_114",G="_image_59elj_138",s={layout:U,container:w,heading:P,title:A,text:B,scroll:E,sidebar:M,number:O,link:V,active:z,content:D,item:F,image:G};function H({heading:o,items:_,showNumbers:y,styleOptions:f,id:T}){const[p,u]=r.useState(null),{mode:d}=S.useTheme(),N=C.useStyleClasses(f),I=r.useRef(null),m=r.useRef([]);return r.useEffect(()=>{const e=new IntersectionObserver(c=>{const i=c.filter(l=>l.isIntersecting).sort((l,n)=>n.intersectionRatio-l.intersectionRatio);if(i.length>0){const l=i[0].target.getAttribute("id");l&&u(l)}},{rootMargin:"-45% 0px -45% 0px",threshold:.1});return m.current.forEach(c=>{c&&e.observe(c)}),I.current=e,()=>{e.disconnect()}},[]),t.jsx("section",{id:T,className:`${N} ${s.layout}`,children:t.jsxs("article",{className:s.container,children:[t.jsxs("div",{className:s.heading,children:[t.jsx(a.RichText,{className:s.title,blocks:o.title}),o.description&&t.jsx(a.RichText,{blocks:o.description})]}),t.jsxs("div",{className:s.scroll,children:[t.jsx("nav",{className:s.sidebar,children:t.jsx("ul",{children:_.map((e,c)=>t.jsx("li",{children:t.jsxs("button",{type:"button",className:`${s.link} ${p===e._key?s.active:""}`,onClick:()=>{u(e._key);const i=document.getElementById(e._key);i==null||i.scrollIntoView({behavior:"smooth",block:"start"})},children:[y&&t.jsx("div",{className:s.number,children:c+1}),e.title&&$.portableTextToPlainText(e.title)]})},e._key))})}),t.jsx("div",{className:s.content,children:_.map((e,c)=>{var n,x,g,j,h,b,k,v;let i;(n=e.image)!=null&&n.imageUrls&&(i=d==="dark"&&((x=e.image.imageUrls.dark)==null?void 0:x.medium)||e.image.imageUrls.default.medium);let l=((h=(j=(g=e.image)==null?void 0:g[d==="dark"?"darkImage":"defaultImage"])==null?void 0:j.asset)==null?void 0:h.altText)||((v=(k=(b=e.image)==null?void 0:b[d==="dark"?"darkImage":"defaultImage"])==null?void 0:k.asset)==null?void 0:v.description)||"Card image";return t.jsxs("section",{ref:R=>{m.current[c]=R},id:e._key,className:s.item,children:[t.jsxs("div",{className:s.text,children:[e.title&&t.jsx(a.RichText,{className:s.title,blocks:e.title}),e.description&&t.jsx(a.RichText,{blocks:e.description})]}),e.image&&i&&t.jsx("div",{className:s.image,children:t.jsx(q,{src:i,alt:l,width:600,height:400,priority:!0})})]},e._key)})})]})]})})}exports.StickyScrollBlock=H;

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

@@ -1,38 +1,40 @@
 import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import { useState as R, useRef as j, useEffect as U } from "react";
-import w from "next/image";
-import { RichText as a } from "../../ui/PortableTextRenderer/index.mjs";
+import { useState as w, useRef as y, useEffect as S } from "react";
+import $ from "next/image";
+import { RichText as n } from "../../ui/PortableTextRenderer/index.mjs";
 import "react-dom";
 import { useTheme as A } from "../../contexts/ThemeContext.mjs";
-import { portableTextToPlainText as E } from "../../utils/portableTextToPlainText.mjs";
-import '../../../assets/index5.css';const S = "_layout_59elj_1", B = "_container_59elj_7", C = "_heading_59elj_19", $ = "_title_59elj_24", M = "_text_59elj_24", O = "_scroll_59elj_39", P = "_sidebar_59elj_44", V = "_number_59elj_69", q = "_link_59elj_84", z = "_active_59elj_98", D = "_content_59elj_110", F = "_item_59elj_114", G = "_image_59elj_138", t = {
-  layout: S,
-  container: B,
-  heading: C,
-  title: $,
-  text: M,
-  scroll: O,
-  sidebar: P,
-  number: V,
-  link: q,
-  active: z,
-  content: D,
-  item: F,
-  image: G
+import { portableTextToPlainText as C } from "../../utils/portableTextToPlainText.mjs";
+import { useStyleClasses as E } from "../../hooks/useStyleClasses.mjs";
+import '../../../assets/index5.css';const B = "_layout_59elj_1", M = "_container_59elj_7", O = "_heading_59elj_19", P = "_title_59elj_24", V = "_text_59elj_24", q = "_scroll_59elj_39", z = "_sidebar_59elj_44", D = "_number_59elj_69", F = "_link_59elj_84", G = "_active_59elj_98", H = "_content_59elj_110", J = "_item_59elj_114", K = "_image_59elj_138", t = {
+  layout: B,
+  container: M,
+  heading: O,
+  title: P,
+  text: V,
+  scroll: q,
+  sidebar: z,
+  number: D,
+  link: F,
+  active: G,
+  content: H,
+  item: J,
+  image: K
 };
-function Y({
+function ie({
   heading: o,
   items: m,
-  showNumbers: y,
-  id: x
+  showNumbers: j,
+  styleOptions: x,
+  id: N
 }) {
-  const [I, _] = R(null), { mode: d } = A(), N = j(null), u = j([]);
-  return U(() => {
+  const [I, _] = w(null), { mode: d } = A(), T = E(x), R = y(null), u = y([]);
+  return S(() => {
     const e = new IntersectionObserver(
-      (s) => {
-        const l = s.filter((c) => c.isIntersecting).sort((c, n) => n.intersectionRatio - c.intersectionRatio);
-        if (l.length > 0) {
-          const c = l[0].target.getAttribute("id");
+      (l) => {
+        const s = l.filter((c) => c.isIntersecting).sort((c, a) => a.intersectionRatio - c.intersectionRatio);
+        if (s.length > 0) {
+          const c = s[0].target.getAttribute("id");
           c && _(c);
         }
       },
@@ -41,58 +43,58 @@ function Y({
         threshold: 0.1
       }
     );
-    return u.current.forEach((s) => {
-      s && e.observe(s);
-    }), N.current = e, () => {
+    return u.current.forEach((l) => {
+      l && e.observe(l);
+    }), R.current = e, () => {
       e.disconnect();
     };
-  }, []), /* @__PURE__ */ i("section", { id: x, className: t.layout, children: /* @__PURE__ */ r("article", { className: t.container, children: [
+  }, []), /* @__PURE__ */ i("section", { id: N, className: `${T} ${t.layout}`, children: /* @__PURE__ */ r("article", { className: t.container, children: [
     /* @__PURE__ */ r("div", { className: t.heading, children: [
-      /* @__PURE__ */ i(a, { className: t.title, blocks: o.title }),
-      o.description && /* @__PURE__ */ i(a, { blocks: o.description })
+      /* @__PURE__ */ i(n, { className: t.title, blocks: o.title }),
+      o.description && /* @__PURE__ */ i(n, { blocks: o.description })
     ] }),
     /* @__PURE__ */ r("div", { className: t.scroll, children: [
-      /* @__PURE__ */ i("nav", { className: t.sidebar, children: /* @__PURE__ */ i("ul", { children: m.map((e, s) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ r(
+      /* @__PURE__ */ i("nav", { className: t.sidebar, children: /* @__PURE__ */ i("ul", { children: m.map((e, l) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: `${t.link} ${I === e._key ? t.active : ""}`,
           onClick: () => {
             _(e._key);
-            const l = document.getElementById(e._key);
-            l == null || l.scrollIntoView({
+            const s = document.getElementById(e._key);
+            s == null || s.scrollIntoView({
               behavior: "smooth",
               block: "start"
             });
           },
           children: [
-            y && /* @__PURE__ */ i("div", { className: t.number, children: s + 1 }),
-            e.title && E(e.title)
+            j && /* @__PURE__ */ i("div", { className: t.number, children: l + 1 }),
+            e.title && C(e.title)
           ]
         }
       ) }, e._key)) }) }),
-      /* @__PURE__ */ i("div", { className: t.content, children: m.map((e, s) => {
-        var n, g, h, k, b, f, v, p;
-        let l;
-        (n = e.image) != null && n.imageUrls && (l = d === "dark" && ((g = e.image.imageUrls.dark) == null ? void 0 : g.medium) || e.image.imageUrls.default.medium);
-        let c = ((b = (k = (h = e.image) == null ? void 0 : h[d === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : k.asset) == null ? void 0 : b.altText) || ((p = (v = (f = e.image) == null ? void 0 : f[d === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : v.asset) == null ? void 0 : p.description) || "Card image";
+      /* @__PURE__ */ i("div", { className: t.content, children: m.map((e, l) => {
+        var a, g, h, k, b, f, p, v;
+        let s;
+        (a = e.image) != null && a.imageUrls && (s = d === "dark" && ((g = e.image.imageUrls.dark) == null ? void 0 : g.medium) || e.image.imageUrls.default.medium);
+        let c = ((b = (k = (h = e.image) == null ? void 0 : h[d === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : k.asset) == null ? void 0 : b.altText) || ((v = (p = (f = e.image) == null ? void 0 : f[d === "dark" ? "darkImage" : "defaultImage"]) == null ? void 0 : p.asset) == null ? void 0 : v.description) || "Card image";
         return /* @__PURE__ */ r(
           "section",
           {
-            ref: (T) => {
-              u.current[s] = T;
+            ref: (U) => {
+              u.current[l] = U;
             },
             id: e._key,
             className: t.item,
             children: [
               /* @__PURE__ */ r("div", { className: t.text, children: [
-                e.title && /* @__PURE__ */ i(a, { className: t.title, blocks: e.title }),
-                e.description && /* @__PURE__ */ i(a, { blocks: e.description })
+                e.title && /* @__PURE__ */ i(n, { className: t.title, blocks: e.title }),
+                e.description && /* @__PURE__ */ i(n, { blocks: e.description })
               ] }),
-              e.image && l && /* @__PURE__ */ i("div", { className: t.image, children: /* @__PURE__ */ i(
-                w,
+              e.image && s && /* @__PURE__ */ i("div", { className: t.image, children: /* @__PURE__ */ i(
+                $,
                 {
-                  src: l,
+                  src: s,
                   alt: c,
                   width: 600,
                   height: 400,
@@ -108,5 +110,5 @@ function Y({
   ] }) });
 }
 export {
-  Y as StickyScrollBlock
+  ie as StickyScrollBlock
 };

package/dist/next.d.ts

@@ -151,7 +151,7 @@ declare interface SpotlightCardProps {
 
 export { SpotlightProps }
 
-export declare function StickyScrollBlock({ heading, items, showNumbers, id, }: StickyScrollBlockProps_2): JSX.Element;
+export declare function StickyScrollBlock({ heading, items, showNumbers, styleOptions, id, }: StickyScrollBlockProps_2): JSX.Element;
 
 export { StickyScrollBlockProps }
 

package/package.json

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