quirk-ui 0.1.27 → 0.1.29
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/core.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { default as default_2 } from 'react';
|
|
3
3
|
import { FormEvent } from 'react';
|
|
4
|
+
import { ImageAdapter } from './core/types/adapters';
|
|
4
5
|
import { JSX } from 'react/jsx-runtime';
|
|
6
|
+
import { LinkAdapter } from './core/types/adapters';
|
|
5
7
|
import { ReactNode } from 'react';
|
|
6
8
|
|
|
7
9
|
export declare function Accordion({ items, multiple, className, defaultOpenItems, onItemToggle, }: AccordionProps): JSX.Element;
|
|
@@ -845,6 +847,8 @@ declare const iconAlignClassMap: {
|
|
|
845
847
|
|
|
846
848
|
declare type IconAlignment = keyof typeof iconAlignClassMap;
|
|
847
849
|
|
|
850
|
+
export { ImageAdapter }
|
|
851
|
+
|
|
848
852
|
export declare function Input({ label, id, className, error, helperText, required, disabled, readOnly, size, variant, fullWidth, leftIcon, rightIcon, style, ...restProps }: InputProps): JSX.Element;
|
|
849
853
|
|
|
850
854
|
declare type InputProps = {
|
|
@@ -903,6 +907,8 @@ declare type LabelProps = {
|
|
|
903
907
|
className?: string;
|
|
904
908
|
} & default_2.LabelHTMLAttributes<HTMLLabelElement>;
|
|
905
909
|
|
|
910
|
+
export { LinkAdapter }
|
|
911
|
+
|
|
906
912
|
export declare function List({ items, ordered, variant, size, hoverable, striped, className, style, onItemClick, ...restProps }: ListProps): JSX.Element;
|
|
907
913
|
|
|
908
914
|
export declare type ListItem = {
|
package/dist/main.d.ts
CHANGED
|
@@ -18,11 +18,13 @@ import { FeaturedDocumentsBlockProps as FeaturedDocumentsBlockProps_2 } from './
|
|
|
18
18
|
import { FormEvent } from 'react';
|
|
19
19
|
import { HeroBlockProps } from './next/blocks/HeroBlock/HeroBlock.types';
|
|
20
20
|
import { HeroBlockProps as HeroBlockProps_2 } from './HeroBlock.types';
|
|
21
|
+
import { ImageAdapter } from './core/types/adapters';
|
|
21
22
|
import { ItemType } from './sanity/types/item';
|
|
22
23
|
import { JSX } from 'react/jsx-runtime';
|
|
23
24
|
import { Link } from './sanity/types/link';
|
|
24
25
|
import { Link as Link_2 } from '../../../sanity/types/link';
|
|
25
26
|
import { Link as Link_3 } from '../../sanity/types/link';
|
|
27
|
+
import { LinkAdapter } from './core/types/adapters';
|
|
26
28
|
import { LinkProps } from 'next/link';
|
|
27
29
|
import { MetricType } from './sanity/types/metric';
|
|
28
30
|
import { NavigationData } from './sanity/types/navigation';
|
|
@@ -949,6 +951,8 @@ declare const iconAlignClassMap: {
|
|
|
949
951
|
|
|
950
952
|
declare type IconAlignment = keyof typeof iconAlignClassMap;
|
|
951
953
|
|
|
954
|
+
export { ImageAdapter }
|
|
955
|
+
|
|
952
956
|
export declare function Input({ label, id, className, error, helperText, required, disabled, readOnly, size, variant, fullWidth, leftIcon, rightIcon, style, ...restProps }: InputProps): JSX.Element;
|
|
953
957
|
|
|
954
958
|
declare type InputProps = {
|
|
@@ -1011,6 +1015,8 @@ declare type LabelProps = {
|
|
|
1011
1015
|
|
|
1012
1016
|
export { Link }
|
|
1013
1017
|
|
|
1018
|
+
export { LinkAdapter }
|
|
1019
|
+
|
|
1014
1020
|
export declare function List({ items, ordered, variant, size, hoverable, striped, className, style, onItemClick, ...restProps }: ListProps): JSX.Element;
|
|
1015
1021
|
|
|
1016
1022
|
export declare type ListItem = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index27.css');const s=require("react/jsx-runtime"),p=require("../../../core/components/Modal/index.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../assets/index27.css');const s=require("react/jsx-runtime"),p=require("../../../core/components/Modal/index.cjs"),q=require("../../utils/resolveLinkUrl.cjs"),S=require("../../hooks/useMediaQuery.cjs"),$=require("../../hooks/useStyleClasses.cjs"),U=require("../../../core/context/ThemeContext.cjs"),d=require("../../utils/mediaUtils.cjs"),P=require("../../../play-CQBnZgNa.cjs"),F=require("../../../arrow-right-DO6S4vfx.cjs"),W="_cardLink_16ew5_1",z="_card_16ew5_1",G="_container_16ew5_21",D="_content_16ew5_31",E="_icon_16ew5_38",Q="_modalTrigger_16ew5_60",Y="_callToAction_16ew5_65",H="_label_16ew5_66",J="_cardIcon_16ew5_71",K="_title_16ew5_78",X="_description_16ew5_101",Z="_imageWrapper_16ew5_116",V="_metric_16ew5_205",R="_outerCircle_16ew5_222",A="_innerCircle_16ew5_227",T="_metricLabel_16ew5_233",ee="_textOnly_16ew5_241",se="_imageOnly_16ew5_278",te="_fullBleed_16ew5_303",ae="_imageTop_16ew5_344",ne="_imageBottom_16ew5_363",re="_imageLeft_16ew5_391",oe="_imageRight_16ew5_401",le="_containImage_16ew5_459",ie="_fullBleedImage_16ew5_467",ce="_image_16ew5_116",_e="_eyebrow_16ew5_563",me="_cta_16ew5_575",de="_secondary_16ew5_576",e={cardLink:W,card:z,container:G,content:D,icon:E,modalTrigger:Q,callToAction:Y,label:H,cardIcon:J,title:K,description:X,imageWrapper:Z,metric:V,outerCircle:R,innerCircle:A,metricLabel:T,textOnly:ee,imageOnly:se,fullBleed:te,imageTop:ae,imageBottom:ne,imageLeft:re,imageRight:oe,containImage:le,fullBleedImage:ie,image:ce,eyebrow:_e,cta:me,secondary:de},b={"full-bleed":e.fullBleed,text:e.textOnly,metric:e.metric,"image-left":e.imageLeft,"image-right":e.imageRight,"image-top":e.imageTop,"image-bottom":e.imageBottom,"image-only":e.imageOnly};function ge({value:t}){if(!t.includes("%"))return s.jsx("div",{className:e.metric});const a=125,n=(a-10)/2,r=2*Math.PI*n,i=r-parseFloat(t)/100*r;return s.jsxs("svg",{width:a,height:a,viewBox:`0 0 ${a} ${a}`,children:[s.jsx("circle",{className:e.outerCircle,cx:a/2,cy:a/2,r:n,fill:"none"}),s.jsx("circle",{className:e.innerCircle,cx:a/2,cy:a/2,r:n,fill:"none",strokeDasharray:r,strokeDashoffset:i,strokeLinecap:"round",transform:`rotate(-90 ${a/2} ${a/2})`}),s.jsx("text",{className:e.metricLabel,x:"50%",y:"52%",dominantBaseline:"middle",textAnchor:"middle",children:t})]})}function ue({callToAction:t,resolvedUrl:a,children:n}){var r,i;switch(t==null?void 0:t.type){case"link":return s.jsx("a",{className:e.cardLink,"aria-label":t.ariaLabel||t.label,href:a,target:((r=t.linkOptions)==null?void 0:r.linkType)==="external"?"_blank":"_self",rel:((i=t.linkOptions)==null?void 0:i.linkType)==="external"?"noopener noreferrer":"",children:n});case"modal":return s.jsx(p.Modal,{className:e.modalTrigger,trigger:n,content:t.modalContent});case"video":return s.jsx(p.Modal,{className:e.modalTrigger,trigger:n,content:s.jsx("video",{src:t.videoUrl,controls:!0,autoPlay:!0})});case"download":return s.jsx("a",{className:e.cardLink,"aria-label":t.ariaLabel||t.label,href:a,download:!0,target:"_blank",rel:"noopener noreferrer",children:n});default:return s.jsx(s.Fragment,{children:n})}}function we({style:t,variant:a="noImage",metricValue:n,eyebrow:r,title:i,description:_,image:c,icon:g,callToAction:o,onHover:h,onLeave:v,gridArea:u,styleOptions:N,renderImage:w,renderRichText:l}){const{mode:x}=U.useTheme(),y=S.useMediaQuery("(max-width: 767px)"),k=$.useStyleClasses(N),L=q.resolveLinkURL(o),m=d.resolveImageUrl(c,x),f=d.resolveAltText(c,x),j=d.resolveImageStyle(c,y),C=(c==null?void 0:c.layout)==="cover",B=b[t??"image-top"]??b["image-top"],I=c&&m?s.jsx("div",{className:e.imageWrapper,children:w?w({src:m,alt:f,width:600,height:658,style:j}):s.jsx("img",{src:m,alt:f,width:600,height:658,style:j})}):null,M=!n&&!r&&!i&&!_,O=s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:`${e.container} ${C?e.fullBleedImage:e.containImage}`,children:[a!=="image"&&!M&&s.jsxs("div",{className:e.content,children:[g&&s.jsx("div",{className:e.icon,children:s.jsx("i",{className:g})}),n&&s.jsx(ge,{value:n}),r&&(l==null?void 0:l({blocks:r,className:e.eyebrow})),i&&(l==null?void 0:l({blocks:i,className:e.title})),_&&(l==null?void 0:l({blocks:_,className:e.description}))]}),I]}),(o==null?void 0:o.videoUrl)&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(P.Play,{size:45})})]}),(o==null?void 0:o.type)==="link"&&s.jsxs("div",{className:e.callToAction,children:[s.jsx("div",{className:e.label,children:o.label}),s.jsx("div",{className:e.cardIcon,children:s.jsx(F.ArrowRight,{size:45})})]})]});return s.jsx("div",{className:[k,e.card,B,e[a]??""].filter(Boolean).join(" "),onMouseEnter:h,onMouseLeave:v,style:u&&!y?{gridArea:u}:{},children:s.jsx(ue,{callToAction:o,resolvedUrl:L,children:O})})}exports.GridCard=we;
|
|
@@ -4,11 +4,10 @@ import { resolveLinkURL as P } from "../../utils/resolveLinkUrl.mjs";
|
|
|
4
4
|
import { useMediaQuery as U } from "../../hooks/useMediaQuery.mjs";
|
|
5
5
|
import { useStyleClasses as W } from "../../hooks/useStyleClasses.mjs";
|
|
6
6
|
import { useTheme as j } from "../../../core/context/ThemeContext.mjs";
|
|
7
|
-
import "@fortawesome/fontawesome-free/css/all.min.css";
|
|
8
7
|
import { resolveImageUrl as z, resolveAltText as F, resolveImageStyle as D } from "../../utils/mediaUtils.mjs";
|
|
9
8
|
import { P as E } from "../../../play-DYgKiSaf.js";
|
|
10
9
|
import { A as G } from "../../../arrow-right-QEwnX3Sk.js";
|
|
11
|
-
import '../../../assets/index27.css';const Q = "_cardLink_16ew5_1", Y = "_card_16ew5_1", q = "_container_16ew5_21", H = "_content_16ew5_31", J = "_icon_16ew5_38", K = "_modalTrigger_16ew5_60", X = "_callToAction_16ew5_65", Z = "_label_16ew5_66", V = "_cardIcon_16ew5_71", R = "_title_16ew5_78", A = "_description_16ew5_101", T = "_imageWrapper_16ew5_116", ee = "_metric_16ew5_205", te = "_outerCircle_16ew5_222", ae = "_innerCircle_16ew5_227", se = "_metricLabel_16ew5_233", re = "_textOnly_16ew5_241", ne = "_imageOnly_16ew5_278", oe = "_fullBleed_16ew5_303",
|
|
10
|
+
import '../../../assets/index27.css';const Q = "_cardLink_16ew5_1", Y = "_card_16ew5_1", q = "_container_16ew5_21", H = "_content_16ew5_31", J = "_icon_16ew5_38", K = "_modalTrigger_16ew5_60", X = "_callToAction_16ew5_65", Z = "_label_16ew5_66", V = "_cardIcon_16ew5_71", R = "_title_16ew5_78", A = "_description_16ew5_101", T = "_imageWrapper_16ew5_116", ee = "_metric_16ew5_205", te = "_outerCircle_16ew5_222", ae = "_innerCircle_16ew5_227", se = "_metricLabel_16ew5_233", re = "_textOnly_16ew5_241", ne = "_imageOnly_16ew5_278", oe = "_fullBleed_16ew5_303", le = "_imageTop_16ew5_344", ie = "_imageBottom_16ew5_363", ce = "_imageLeft_16ew5_391", me = "_imageRight_16ew5_401", _e = "_containImage_16ew5_459", de = "_fullBleedImage_16ew5_467", ge = "_image_16ew5_116", fe = "_eyebrow_16ew5_563", we = "_cta_16ew5_575", ue = "_secondary_16ew5_576", e = {
|
|
12
11
|
cardLink: Q,
|
|
13
12
|
card: Y,
|
|
14
13
|
container: q,
|
|
@@ -28,8 +27,8 @@ import '../../../assets/index27.css';const Q = "_cardLink_16ew5_1", Y = "_card_1
|
|
|
28
27
|
textOnly: re,
|
|
29
28
|
imageOnly: ne,
|
|
30
29
|
fullBleed: oe,
|
|
31
|
-
imageTop:
|
|
32
|
-
imageBottom:
|
|
30
|
+
imageTop: le,
|
|
31
|
+
imageBottom: ie,
|
|
33
32
|
imageLeft: ce,
|
|
34
33
|
imageRight: me,
|
|
35
34
|
containImage: _e,
|
|
@@ -37,7 +36,7 @@ import '../../../assets/index27.css';const Q = "_cardLink_16ew5_1", Y = "_card_1
|
|
|
37
36
|
image: ge,
|
|
38
37
|
eyebrow: fe,
|
|
39
38
|
cta: we,
|
|
40
|
-
secondary:
|
|
39
|
+
secondary: ue
|
|
41
40
|
}, v = {
|
|
42
41
|
"full-bleed": e.fullBleed,
|
|
43
42
|
text: e.textOnly,
|
|
@@ -48,9 +47,9 @@ import '../../../assets/index27.css';const Q = "_cardLink_16ew5_1", Y = "_card_1
|
|
|
48
47
|
"image-bottom": e.imageBottom,
|
|
49
48
|
"image-only": e.imageOnly
|
|
50
49
|
};
|
|
51
|
-
function
|
|
50
|
+
function pe({ value: a }) {
|
|
52
51
|
if (!a.includes("%")) return /* @__PURE__ */ t("div", { className: e.metric });
|
|
53
|
-
const s = 125, r = (s - 10) / 2, n = 2 * Math.PI * r,
|
|
52
|
+
const s = 125, r = (s - 10) / 2, n = 2 * Math.PI * r, i = n - parseFloat(a) / 100 * n;
|
|
54
53
|
return /* @__PURE__ */ m("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, children: [
|
|
55
54
|
/* @__PURE__ */ t(
|
|
56
55
|
"circle",
|
|
@@ -71,7 +70,7 @@ function ue({ value: a }) {
|
|
|
71
70
|
r,
|
|
72
71
|
fill: "none",
|
|
73
72
|
strokeDasharray: n,
|
|
74
|
-
strokeDashoffset:
|
|
73
|
+
strokeDashoffset: i,
|
|
75
74
|
strokeLinecap: "round",
|
|
76
75
|
transform: `rotate(-90 ${s / 2} ${s / 2})`
|
|
77
76
|
}
|
|
@@ -94,7 +93,7 @@ function ye({
|
|
|
94
93
|
resolvedUrl: s,
|
|
95
94
|
children: r
|
|
96
95
|
}) {
|
|
97
|
-
var n,
|
|
96
|
+
var n, i;
|
|
98
97
|
switch (a == null ? void 0 : a.type) {
|
|
99
98
|
case "link":
|
|
100
99
|
return /* @__PURE__ */ t(
|
|
@@ -104,7 +103,7 @@ function ye({
|
|
|
104
103
|
"aria-label": a.ariaLabel || a.label,
|
|
105
104
|
href: s,
|
|
106
105
|
target: ((n = a.linkOptions) == null ? void 0 : n.linkType) === "external" ? "_blank" : "_self",
|
|
107
|
-
rel: ((
|
|
106
|
+
rel: ((i = a.linkOptions) == null ? void 0 : i.linkType) === "external" ? "noopener noreferrer" : "",
|
|
108
107
|
children: r
|
|
109
108
|
}
|
|
110
109
|
);
|
|
@@ -143,12 +142,12 @@ function ye({
|
|
|
143
142
|
return /* @__PURE__ */ t(h, { children: r });
|
|
144
143
|
}
|
|
145
144
|
}
|
|
146
|
-
function
|
|
145
|
+
function Oe({
|
|
147
146
|
style: a,
|
|
148
147
|
variant: s = "noImage",
|
|
149
148
|
metricValue: r,
|
|
150
149
|
eyebrow: n,
|
|
151
|
-
title:
|
|
150
|
+
title: i,
|
|
152
151
|
description: _,
|
|
153
152
|
image: c,
|
|
154
153
|
icon: g,
|
|
@@ -158,9 +157,9 @@ function Me({
|
|
|
158
157
|
gridArea: f,
|
|
159
158
|
styleOptions: B,
|
|
160
159
|
renderImage: w,
|
|
161
|
-
renderRichText:
|
|
160
|
+
renderRichText: l
|
|
162
161
|
}) {
|
|
163
|
-
const { mode:
|
|
162
|
+
const { mode: u } = j(), p = U("(max-width: 767px)"), I = W(B), C = P(o), d = z(c, u), y = F(c, u), b = D(c, p), O = (c == null ? void 0 : c.layout) === "cover", M = v[a ?? "image-top"] ?? v["image-top"], x = c && d ? /* @__PURE__ */ t("div", { className: e.imageWrapper, children: w ? w({
|
|
164
163
|
src: d,
|
|
165
164
|
alt: y,
|
|
166
165
|
width: 600,
|
|
@@ -175,7 +174,7 @@ function Me({
|
|
|
175
174
|
height: 658,
|
|
176
175
|
style: b
|
|
177
176
|
}
|
|
178
|
-
) }) : null, S = !r && !n && !
|
|
177
|
+
) }) : null, S = !r && !n && !i && !_, $ = /* @__PURE__ */ m(h, { children: [
|
|
179
178
|
/* @__PURE__ */ m(
|
|
180
179
|
"div",
|
|
181
180
|
{
|
|
@@ -183,10 +182,10 @@ function Me({
|
|
|
183
182
|
children: [
|
|
184
183
|
s !== "image" && !S && /* @__PURE__ */ m("div", { className: e.content, children: [
|
|
185
184
|
g && /* @__PURE__ */ t("div", { className: e.icon, children: /* @__PURE__ */ t("i", { className: g }) }),
|
|
186
|
-
r && /* @__PURE__ */ t(
|
|
187
|
-
n && (
|
|
188
|
-
|
|
189
|
-
_ && (
|
|
185
|
+
r && /* @__PURE__ */ t(pe, { value: r }),
|
|
186
|
+
n && (l == null ? void 0 : l({ blocks: n, className: e.eyebrow })),
|
|
187
|
+
i && (l == null ? void 0 : l({ blocks: i, className: e.title })),
|
|
188
|
+
_ && (l == null ? void 0 : l({
|
|
190
189
|
blocks: _,
|
|
191
190
|
className: e.description
|
|
192
191
|
}))
|
|
@@ -215,11 +214,11 @@ function Me({
|
|
|
215
214
|
].filter(Boolean).join(" "),
|
|
216
215
|
onMouseEnter: k,
|
|
217
216
|
onMouseLeave: L,
|
|
218
|
-
style: f && !
|
|
217
|
+
style: f && !p ? { gridArea: f } : {},
|
|
219
218
|
children: /* @__PURE__ */ t(ye, { callToAction: o, resolvedUrl: C, children: $ })
|
|
220
219
|
}
|
|
221
220
|
);
|
|
222
221
|
}
|
|
223
222
|
export {
|
|
224
|
-
|
|
223
|
+
Oe as GridCard
|
|
225
224
|
};
|