quirk-ui 0.1.71 → 0.1.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index12.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._layout_1e5td_1{width:100%;padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}._container_1e5td_7{display:flex;flex-direction:column;width:100%;max-width:var(--layout-width);margin:0 auto;gap:var(--spacing-md);position:relative;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}@media (max-width: 767px){._container_1e5td_7{gap:var(--spacing-xl)}}._heading_1e5td_23{display:flex;flex-direction:column;gap:var(--spacing-md)}._heading_1e5td_23:has(._title_1e5td_28+._cta_1e5td_28):not(:has(._text_1e5td_28)){gap:var(--spacing-lg)}._heading_1e5td_23 h1,._heading_1e5td_23 h2,._heading_1e5td_23 h3,._heading_1e5td_23 h4,._heading_1e5td_23 h5,._heading_1e5td_23 h6{width:100%;margin-bottom:0}._scroll_1e5td_43{display:flex;gap:var(--spacing-xl)}._sidebar_1e5td_48{flex:.4;position:sticky;top:30%;align-self:flex-start;min-height:40vh;display:flex;align-items:center;padding:0 var(--spacing-xl)}@media (max-width: 767px){._sidebar_1e5td_48{display:none}}._sidebar_1e5td_48 ul{list-style:none;padding:0;margin:0;columns:1;display:flex;flex-direction:column;gap:var(--spacing-lg)}._sidebar_1e5td_48 ul li ._number_1e5td_73{border-radius:var(--radius-full);background-color:var(--color-secondary-25);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg);font-family:var(--font-family-primary, "inherit");width:35px;height:35px;flex:1 0 35px;display:flex;align-items:center;justify-content:center;transition:color .3s ease-in-out,background-color .3s ease-in-out}._sidebar_1e5td_48 ul li ._link_1e5td_91{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-sm);text-align:left;font-size:var(--font-size-md);font-family:var(--font-family-primary, "inherit");font-weight:var(--font-weight-semibold);text-decoration:none;color:var(--color-text-primary);background-color:transparent;border:none;transition:color .3s ease-in-out}._sidebar_1e5td_48 ul li ._link_1e5td_91._active_1e5td_106{color:var(--color-primary-100)}._sidebar_1e5td_48 ul li ._link_1e5td_91._active_1e5td_106 ._number_1e5td_73{background-color:var(--color-primary-100);color:#fff}._content_1e5td_118{flex:1;display:flex;flex-direction:column;gap:40rem}@media (max-width: 767px){._content_1e5td_118{gap:10rem}}._flex_1e5td_129{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--spacing-md)}._flex_1e5td_129 ._number_1e5td_73{border-radius:var(--radius-full);background-color:var(--color-secondary-25);color:var(--color-text-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg);width:35px;height:35px;flex:1 0 35px;display:flex;align-items:center;justify-content:center;transition:color .3s ease-in-out,background-color .3s ease-in-out}._item_1e5td_154{scroll-margin-top:18rem;height:40vh;display:flex;align-items:center;gap:2rem}._item_1e5td_154 ._text_1e5td_28{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}._item_1e5td_154 ._title_1e5td_28{margin-block-end:0}._item_1e5td_154 ._image_1e5td_173{flex:1 0;display:flex;align-items:center;justify-content:center}._item_1e5td_154 ._image_1e5td_173 img{width:100%;max-width:600px;height:auto}@media (max-width: 767px){._item_1e5td_154{flex-direction:column-reverse;height:auto}._item_1e5td_154 ._image_1e5td_173{flex:1;width:100%;align-self:center}}._eyebrow_1e5td_199{font-weight:var(--font-weight-bold)}._image_1e5td_173.imageRadius-sm img{border-radius:var(--radius-sm)}._image_1e5td_173.imageRadius-md img{border-radius:var(--radius-md)}._image_1e5td_173.imageRadius-lg img{border-radius:var(--radius-lg)}._image_1e5td_173.imageRadius-full img{border-radius:var(--radius-full)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index12.css');const t=require("react/jsx-runtime"),a=require("react"),
|
|
1
|
+
"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;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx as a, jsxs as c } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { resolveImageUrl as
|
|
4
|
-
import { extractText as
|
|
5
|
-
import { useTheme as
|
|
6
|
-
import { useMediaQuery as
|
|
7
|
-
import { useStyleClasses as
|
|
8
|
-
import '../../../index12.css';const U = "
|
|
2
|
+
import { useState as A, useRef as d, useCallback as p, useEffect as E } from "react";
|
|
3
|
+
import { resolveImageUrl as M, resolveAltText as j } from "../../utils/mediaUtils.mjs";
|
|
4
|
+
import { extractText as z } from "../../utils/blockRenderers.mjs";
|
|
5
|
+
import { useTheme as B } from "../../../core/context/ThemeContext.mjs";
|
|
6
|
+
import { useMediaQuery as O } from "../../hooks/useMediaQuery.mjs";
|
|
7
|
+
import { useStyleClasses as N } from "../../hooks/useStyleClasses.mjs";
|
|
8
|
+
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 = {
|
|
9
9
|
layout: U,
|
|
10
|
-
container:
|
|
11
|
-
heading:
|
|
12
|
-
title:
|
|
10
|
+
container: Q,
|
|
11
|
+
heading: V,
|
|
12
|
+
title: q,
|
|
13
13
|
text: D,
|
|
14
14
|
scroll: F,
|
|
15
15
|
sidebar: G,
|
|
@@ -25,23 +25,23 @@ import '../../../index12.css';const U = "_layout_11dq8_1", O = "_container_11dq8
|
|
|
25
25
|
function lt({
|
|
26
26
|
heading: n,
|
|
27
27
|
items: r,
|
|
28
|
-
showNumbers:
|
|
29
|
-
styleOptions:
|
|
30
|
-
id:
|
|
31
|
-
renderImage:
|
|
28
|
+
showNumbers: b,
|
|
29
|
+
styleOptions: w,
|
|
30
|
+
id: h,
|
|
31
|
+
renderImage: f,
|
|
32
32
|
renderRichText: l
|
|
33
33
|
}) {
|
|
34
|
-
const [
|
|
35
|
-
(t) => (
|
|
36
|
-
|
|
34
|
+
const [y, v] = A(null), { mode: g } = B(), I = O("(max-width: 768px)"), $ = N(w), _ = d(!1), m = d(null), k = d([]), S = p(
|
|
35
|
+
(t) => (e) => {
|
|
36
|
+
k.current[t] = e;
|
|
37
37
|
},
|
|
38
38
|
[]
|
|
39
39
|
);
|
|
40
|
-
|
|
40
|
+
E(() => {
|
|
41
41
|
const t = new IntersectionObserver(
|
|
42
|
-
(
|
|
42
|
+
(e) => {
|
|
43
43
|
if (_.current) return;
|
|
44
|
-
const i =
|
|
44
|
+
const i = e.filter((o) => o.isIntersecting).sort((o, u) => u.intersectionRatio - o.intersectionRatio);
|
|
45
45
|
if (i.length > 0) {
|
|
46
46
|
const o = i[0].target.getAttribute("id");
|
|
47
47
|
o && v(o);
|
|
@@ -52,74 +52,74 @@ function lt({
|
|
|
52
52
|
threshold: 0.1
|
|
53
53
|
}
|
|
54
54
|
);
|
|
55
|
-
return
|
|
56
|
-
|
|
55
|
+
return k.current.forEach((e) => {
|
|
56
|
+
e && t.observe(e);
|
|
57
57
|
}), () => {
|
|
58
58
|
t.disconnect();
|
|
59
59
|
};
|
|
60
60
|
}, [r]);
|
|
61
|
-
const
|
|
62
|
-
var
|
|
61
|
+
const C = p((t) => {
|
|
62
|
+
var e;
|
|
63
63
|
v(t), _.current = !0, m.current && clearTimeout(m.current), m.current = setTimeout(() => {
|
|
64
64
|
_.current = !1;
|
|
65
|
-
}, 600), (
|
|
65
|
+
}, 600), (e = document.getElementById(t)) == null || e.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
66
66
|
}, []);
|
|
67
|
-
return /* @__PURE__ */ a("section", { id:
|
|
68
|
-
/* @__PURE__ */ c("div", { className:
|
|
67
|
+
return /* @__PURE__ */ a("section", { id: h, className: `${$} ${s.layout}`, children: /* @__PURE__ */ c("article", { className: s.container, children: [
|
|
68
|
+
/* @__PURE__ */ c("div", { className: s.heading, children: [
|
|
69
69
|
/* @__PURE__ */ c("div", { children: [
|
|
70
70
|
n.eyebrow && (l == null ? void 0 : l({
|
|
71
71
|
blocks: n.eyebrow,
|
|
72
|
-
className:
|
|
72
|
+
className: s.eyebrow
|
|
73
73
|
})),
|
|
74
74
|
l == null ? void 0 : l({
|
|
75
75
|
blocks: n.title,
|
|
76
|
-
className:
|
|
76
|
+
className: s.title
|
|
77
77
|
})
|
|
78
78
|
] }),
|
|
79
79
|
n.description && (l == null ? void 0 : l({ blocks: n.description }))
|
|
80
80
|
] }),
|
|
81
|
-
/* @__PURE__ */ c("div", { className:
|
|
82
|
-
/* @__PURE__ */ a("nav", { className:
|
|
81
|
+
/* @__PURE__ */ c("div", { className: s.scroll, children: [
|
|
82
|
+
/* @__PURE__ */ a("nav", { className: s.sidebar, "aria-label": "Section navigation", children: /* @__PURE__ */ a("ul", { children: r.map((t, e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ c(
|
|
83
83
|
"button",
|
|
84
84
|
{
|
|
85
85
|
type: "button",
|
|
86
|
-
className: `${
|
|
87
|
-
"aria-current":
|
|
88
|
-
onClick: () =>
|
|
86
|
+
className: `${s.link} ${y === t._key ? s.active : ""}`,
|
|
87
|
+
"aria-current": y === t._key ? "true" : void 0,
|
|
88
|
+
onClick: () => C(t._key),
|
|
89
89
|
children: [
|
|
90
|
-
|
|
91
|
-
t.title &&
|
|
90
|
+
b && /* @__PURE__ */ a("div", { className: s.number, "aria-hidden": "true", children: e + 1 }),
|
|
91
|
+
t.title && z(t.title)
|
|
92
92
|
]
|
|
93
93
|
}
|
|
94
94
|
) }, t._key)) }) }),
|
|
95
|
-
/* @__PURE__ */ a("div", { className:
|
|
96
|
-
const i =
|
|
95
|
+
/* @__PURE__ */ a("div", { className: s.content, children: r.map((t, e) => {
|
|
96
|
+
const i = M(t.image, g), o = j(t.image, g), u = N(t.styleOptions);
|
|
97
97
|
return /* @__PURE__ */ c(
|
|
98
98
|
"section",
|
|
99
99
|
{
|
|
100
|
-
ref:
|
|
100
|
+
ref: S(e),
|
|
101
101
|
id: t._key,
|
|
102
|
-
className:
|
|
102
|
+
className: s.item,
|
|
103
103
|
"aria-labelledby": `${t._key}-heading`,
|
|
104
104
|
children: [
|
|
105
|
-
/* @__PURE__ */ c("div", { className:
|
|
106
|
-
/* @__PURE__ */ c("div", { className:
|
|
107
|
-
|
|
105
|
+
/* @__PURE__ */ c("div", { className: s.text, children: [
|
|
106
|
+
/* @__PURE__ */ c("div", { className: s.flex, children: [
|
|
107
|
+
I && b && /* @__PURE__ */ a("div", { className: s.number, "aria-hidden": "true", children: e + 1 }),
|
|
108
108
|
t.title && (l == null ? void 0 : l({
|
|
109
109
|
blocks: t.title,
|
|
110
|
-
className:
|
|
110
|
+
className: s.title
|
|
111
111
|
}))
|
|
112
112
|
] }),
|
|
113
113
|
t.description && (l == null ? void 0 : l({ blocks: t.description }))
|
|
114
114
|
] }),
|
|
115
|
-
t.image && i && /* @__PURE__ */ a("div", { className:
|
|
115
|
+
t.image && i && /* @__PURE__ */ a("div", { className: ` ${u} ${s.image}`, children: f ? f({
|
|
116
116
|
src: i,
|
|
117
117
|
alt: o,
|
|
118
118
|
width: 600,
|
|
119
119
|
height: 400,
|
|
120
120
|
// Only the first image is above-the-fold.
|
|
121
|
-
priority:
|
|
122
|
-
loading:
|
|
121
|
+
priority: e === 0,
|
|
122
|
+
loading: e === 0 ? "eager" : "lazy"
|
|
123
123
|
}) : /* @__PURE__ */ a(
|
|
124
124
|
"img",
|
|
125
125
|
{
|
|
@@ -127,7 +127,7 @@ function lt({
|
|
|
127
127
|
alt: o,
|
|
128
128
|
width: 600,
|
|
129
129
|
height: 400,
|
|
130
|
-
loading:
|
|
130
|
+
loading: e === 0 ? "eager" : "lazy"
|
|
131
131
|
}
|
|
132
132
|
) })
|
|
133
133
|
]
|