quirk-ui 0.1.203 → 0.1.204
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),d=require("react"),Y=require("react-dom"),L=require("../../../x-Dft9NVe_.cjs"),R="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),d=require("react"),Y=require("react-dom"),L=require("../../../x-Dft9NVe_.cjs"),R="_overlay_1cxzg_2",P="_fadeIn_1cxzg_1",D="_container_1cxzg_19",A="_modal_1cxzg_49",C="_slideUp_1cxzg_1",F="_closeButton_1cxzg_60",K="_title_1cxzg_87",X="_content_1cxzg_97",G="_intro_1cxzg_116",H="_trigger_1cxzg_123",J="_slideUpSheet_1cxzg_1",s={overlay:R,fadeIn:P,container:D,"size-sm":"_size-sm_1cxzg_26","size-md":"_size-md_1cxzg_30","size-lg":"_size-lg_1cxzg_34","size-xl":"_size-xl_1cxzg_38","size-full":"_size-full_1cxzg_42",modal:A,slideUp:C,closeButton:F,title:K,content:X,intro:G,trigger:H,slideUpSheet:J},Q=()=>{if(typeof document>"u")return;const o=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.width="100%",document.body.style.overflowY="scroll"},b=()=>{if(typeof document>"u")return;const o=Math.abs(parseInt(document.body.style.top||"0",10));document.body.style.position="",document.body.style.top="",document.body.style.width="",document.body.style.overflowY="",o&&window.scrollTo(0,o)};function V({content:o,trigger:p,isOpen:y,onOpen:l,onClose:i,size:w="md",closeOnEscape:g=!0,closeOnOverlayClick:k=!0,showCloseButton:E=!0,className:j,overlayClassName:$,style:S,formData:x,renderForm:z}){const[q,v]=d.useState(!1),f=d.useRef(null),m=y!==void 0,t=m?y:q,I=()=>{m||v(!0),l==null||l()},a=()=>{m||v(!1),i==null||i()},N=()=>t?a():I(),U=()=>{k&&a()};d.useEffect(()=>{if(!g||!t)return;const n=r=>{r.key==="Escape"&&a()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t,g]),d.useEffect(()=>(t?Q():b(),()=>b()),[t]),d.useEffect(()=>{if(!t||!f.current)return;const n=f.current,r=n.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),c=r[0],u=r[r.length-1],h=_=>{_.key==="Tab"&&(_.shiftKey?document.activeElement===c&&(_.preventDefault(),u==null||u.focus()):document.activeElement===u&&(_.preventDefault(),c==null||c.focus()))};return n.addEventListener("keydown",h),c==null||c.focus(),()=>n.removeEventListener("keydown",h)},[t]);const B=s[`size-${w}`]??"",M=o!==void 0?o:e.jsx(e.Fragment,{children:x&&z?z(x):null}),T=t?e.jsx("div",{className:`${s.overlay} ${$??""}`.trim(),onClick:U,role:"dialog","aria-modal":"true",children:e.jsxs("div",{className:`${B} ${s.container}`,children:[E&&e.jsx("button",{"aria-label":"Close",className:s.closeButton,onClick:a,type:"button",children:e.jsx(L.X,{size:20})}),e.jsx("div",{ref:f,className:`${s.modal} ${j??""}`.trim(),style:S,onClick:n=>n.stopPropagation(),children:e.jsx("div",{className:s.content,children:M})})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.trigger,onClick:N,children:p}),typeof window<"u"&&Y.createPortal(T,document.body)]})}exports.Modal=V;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as R, useRef as q, useEffect as
|
|
1
|
+
import { jsx as c, Fragment as p, jsxs as b } from "react/jsx-runtime";
|
|
2
|
+
import { useState as R, useRef as q, useEffect as f } from "react";
|
|
3
3
|
import { createPortal as A } from "react-dom";
|
|
4
4
|
import { X as C } from "../../../x-CnsEH4Ox.js";
|
|
5
|
-
import '../../../index38.css';const D = "
|
|
5
|
+
import '../../../index38.css';const D = "_overlay_1cxzg_2", K = "_fadeIn_1cxzg_1", X = "_container_1cxzg_19", F = "_modal_1cxzg_49", G = "_slideUp_1cxzg_1", H = "_closeButton_1cxzg_60", J = "_title_1cxzg_87", Q = "_content_1cxzg_97", V = "_intro_1cxzg_116", W = "_trigger_1cxzg_123", Z = "_slideUpSheet_1cxzg_1", l = {
|
|
6
6
|
overlay: D,
|
|
7
7
|
fadeIn: K,
|
|
8
8
|
container: X,
|
|
9
|
-
"size-sm": "_size-
|
|
10
|
-
"size-md": "_size-
|
|
11
|
-
"size-lg": "_size-
|
|
12
|
-
"size-xl": "_size-
|
|
13
|
-
"size-full": "_size-
|
|
9
|
+
"size-sm": "_size-sm_1cxzg_26",
|
|
10
|
+
"size-md": "_size-md_1cxzg_30",
|
|
11
|
+
"size-lg": "_size-lg_1cxzg_34",
|
|
12
|
+
"size-xl": "_size-xl_1cxzg_38",
|
|
13
|
+
"size-full": "_size-full_1cxzg_42",
|
|
14
14
|
modal: F,
|
|
15
15
|
slideUp: G,
|
|
16
16
|
closeButton: H,
|
|
@@ -23,19 +23,19 @@ import '../../../index38.css';const D = "_overlay_76ty7_2", K = "_fadeIn_76ty7_1
|
|
|
23
23
|
if (typeof document > "u") return;
|
|
24
24
|
const o = window.scrollY;
|
|
25
25
|
document.body.style.position = "fixed", document.body.style.top = `-${o}px`, document.body.style.width = "100%", document.body.style.overflowY = "scroll";
|
|
26
|
-
},
|
|
26
|
+
}, w = () => {
|
|
27
27
|
if (typeof document > "u") return;
|
|
28
28
|
const o = Math.abs(parseInt(document.body.style.top || "0", 10));
|
|
29
29
|
document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", document.body.style.overflowY = "", o && window.scrollTo(0, o);
|
|
30
30
|
};
|
|
31
|
-
function
|
|
31
|
+
function ce({
|
|
32
32
|
content: o,
|
|
33
|
-
trigger:
|
|
34
|
-
isOpen:
|
|
35
|
-
onOpen:
|
|
33
|
+
trigger: k,
|
|
34
|
+
isOpen: y,
|
|
35
|
+
onOpen: s,
|
|
36
36
|
onClose: i,
|
|
37
37
|
size: E = "md",
|
|
38
|
-
closeOnEscape:
|
|
38
|
+
closeOnEscape: g = !0,
|
|
39
39
|
closeOnOverlayClick: $ = !0,
|
|
40
40
|
showCloseButton: S = !0,
|
|
41
41
|
className: I,
|
|
@@ -44,67 +44,67 @@ function le({
|
|
|
44
44
|
// title,
|
|
45
45
|
// richTextBlocks,
|
|
46
46
|
// renderRichText,
|
|
47
|
-
formData:
|
|
48
|
-
renderForm:
|
|
47
|
+
formData: z,
|
|
48
|
+
renderForm: x
|
|
49
49
|
}) {
|
|
50
|
-
const [B,
|
|
51
|
-
|
|
50
|
+
const [B, v] = R(!1), m = q(null), _ = y !== void 0, e = _ ? y : B, Y = () => {
|
|
51
|
+
_ || v(!0), s == null || s();
|
|
52
52
|
}, r = () => {
|
|
53
|
-
|
|
53
|
+
_ || v(!1), i == null || i();
|
|
54
54
|
}, L = () => e ? r() : Y(), T = () => {
|
|
55
55
|
$ && r();
|
|
56
56
|
};
|
|
57
|
-
|
|
58
|
-
if (!
|
|
57
|
+
f(() => {
|
|
58
|
+
if (!g || !e) return;
|
|
59
59
|
const t = (d) => {
|
|
60
60
|
d.key === "Escape" && r();
|
|
61
61
|
};
|
|
62
62
|
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
63
|
-
}, [e,
|
|
64
|
-
if (!e || !
|
|
65
|
-
const t =
|
|
63
|
+
}, [e, g]), f(() => (e ? O() : w(), () => w()), [e]), f(() => {
|
|
64
|
+
if (!e || !m.current) return;
|
|
65
|
+
const t = m.current, d = t.querySelectorAll(
|
|
66
66
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
67
|
-
), n = d[0], a = d[d.length - 1],
|
|
67
|
+
), n = d[0], a = d[d.length - 1], h = (u) => {
|
|
68
68
|
u.key === "Tab" && (u.shiftKey ? document.activeElement === n && (u.preventDefault(), a == null || a.focus()) : document.activeElement === a && (u.preventDefault(), n == null || n.focus()));
|
|
69
69
|
};
|
|
70
|
-
return t.addEventListener("keydown",
|
|
70
|
+
return t.addEventListener("keydown", h), n == null || n.focus(), () => t.removeEventListener("keydown", h);
|
|
71
71
|
}, [e]);
|
|
72
|
-
const j =
|
|
72
|
+
const j = l[`size-${E}`] ?? "", M = o !== void 0 ? o : /* @__PURE__ */ c(p, { children: z && x ? x(z) : null }), P = e ? /* @__PURE__ */ c(
|
|
73
73
|
"div",
|
|
74
74
|
{
|
|
75
|
-
className: `${
|
|
75
|
+
className: `${l.overlay} ${N ?? ""}`.trim(),
|
|
76
76
|
onClick: T,
|
|
77
77
|
role: "dialog",
|
|
78
78
|
"aria-modal": "true",
|
|
79
|
-
children: /* @__PURE__ */
|
|
80
|
-
S && /* @__PURE__ */
|
|
79
|
+
children: /* @__PURE__ */ b("div", { className: `${j} ${l.container}`, children: [
|
|
80
|
+
S && /* @__PURE__ */ c(
|
|
81
81
|
"button",
|
|
82
82
|
{
|
|
83
83
|
"aria-label": "Close",
|
|
84
|
-
className:
|
|
84
|
+
className: l.closeButton,
|
|
85
85
|
onClick: r,
|
|
86
86
|
type: "button",
|
|
87
|
-
children: /* @__PURE__ */
|
|
87
|
+
children: /* @__PURE__ */ c(C, { size: 20 })
|
|
88
88
|
}
|
|
89
89
|
),
|
|
90
|
-
/* @__PURE__ */
|
|
90
|
+
/* @__PURE__ */ c(
|
|
91
91
|
"div",
|
|
92
92
|
{
|
|
93
|
-
ref:
|
|
94
|
-
className: `${
|
|
93
|
+
ref: m,
|
|
94
|
+
className: `${l.modal} ${I ?? ""}`.trim(),
|
|
95
95
|
style: U,
|
|
96
96
|
onClick: (t) => t.stopPropagation(),
|
|
97
|
-
children: /* @__PURE__ */
|
|
97
|
+
children: /* @__PURE__ */ c("div", { className: l.content, children: M })
|
|
98
98
|
}
|
|
99
99
|
)
|
|
100
100
|
] })
|
|
101
101
|
}
|
|
102
102
|
) : null;
|
|
103
|
-
return /* @__PURE__ */
|
|
104
|
-
/* @__PURE__ */
|
|
103
|
+
return /* @__PURE__ */ b(p, { children: [
|
|
104
|
+
/* @__PURE__ */ c("div", { className: l.trigger, onClick: L, children: k }),
|
|
105
105
|
typeof window < "u" && A(P, document.body)
|
|
106
106
|
] });
|
|
107
107
|
}
|
|
108
108
|
export {
|
|
109
|
-
|
|
109
|
+
ce as Modal
|
|
110
110
|
};
|
package/dist/index38.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._overlay_1cxzg_2{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:_fadeIn_1cxzg_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_1cxzg_19{position:relative;display:flex;flex-direction:column}._size-sm_1cxzg_26{width:90%;max-width:400px}._size-md_1cxzg_30{width:90%;max-width:600px}._size-lg_1cxzg_34{width:90%;max-width:800px}._size-xl_1cxzg_38{width:90%;max-width:1200px}._size-full_1cxzg_42{width:95%;height:95dvh;max-height:95dvh}._modal_1cxzg_49{position:relative;background-color:var(--color-background, #fff);border-radius:var(--radius-lg, .5rem);padding:var(--spacing-xl, 2rem);max-height:90dvh;overflow-y:auto;animation:_slideUp_1cxzg_1 .3s ease}._closeButton_1cxzg_60{background:none;border:none;cursor:pointer;padding:var(--spacing-xs, .25rem);margin-bottom:var(--spacing-xs);border-radius:var(--radius-sm, .25rem);color:#fff;transition:all .2s ease;display:flex;align-items:center;justify-content:center;align-self:flex-end;z-index:1}._closeButton_1cxzg_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_1cxzg_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_1cxzg_87{font-size:var(--font-size-xl, 1.5rem);font-weight:var(--font-weight-bold, 700);color:var(--color-heading, #111);margin-bottom:var(--spacing-lg, 1.5rem);padding-right:var(--spacing-xl, 2rem);line-height:var(--line-height-heading, 1.2)}._content_1cxzg_97{color:var(--color-text-primary, #333);line-height:var(--line-height-normal, 1.5);display:flex;flex-direction:column;gap:var(--spacing-xl)}._content_1cxzg_97 video,._content_1cxzg_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_1cxzg_97 video{width:100%}._intro_1cxzg_116{margin-bottom:var(--spacing-lg, 1.5rem);padding-bottom:var(--spacing-lg, 1.5rem);border-bottom:1px solid var(--color-border, #e5e7eb)}._trigger_1cxzg_123{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_1cxzg_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_1cxzg_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 767px){._overlay_1cxzg_2{align-items:flex-end;justify-content:stretch;padding:0;overflow:hidden}._container_1cxzg_19{width:100%;max-width:100%;max-height:92dvh;display:flex;flex-direction:column;border-radius:var(--radius-lg, .5rem) var(--radius-lg, .5rem) 0 0;background-color:var(--color-background, #fff);animation:_slideUpSheet_1cxzg_1 .3s ease}._size-sm_1cxzg_26,._size-md_1cxzg_30,._size-lg_1cxzg_34,._size-xl_1cxzg_38,._size-full_1cxzg_42{width:100%;max-width:100%;height:100%;max-height:92dvh}._closeButton_1cxzg_60{color:var(--color-text-primary, #333);align-self:flex-end;margin:var(--spacing-sm)}._modal_1cxzg_49{border-radius:var(--radius-lg, .5rem) var(--radius-lg, .5rem) 0 0;padding:2.5rem var(--spacing-lg) var(--spacing-lg, 1.5rem);flex:1 1;overflow-y:scroll;-webkit-overflow-scrolling:touch;max-height:none;animation:none;overscroll-behavior:contain;position:absolute;height:100%}._content_1cxzg_97{height:unset}._title_1cxzg_87{font-size:var(--font-size-lg, 1.25rem);padding-right:0}}@keyframes _slideUpSheet_1cxzg_1{0%{transform:translateY(150%);opacity:.75}to{transform:translateY(0);opacity:1}}
|
package/dist/index38.css.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
|
-
readonly "
|
|
3
|
-
readonly "
|
|
4
|
-
readonly "
|
|
5
|
-
readonly "
|
|
6
|
-
readonly "
|
|
7
|
-
readonly "
|
|
8
|
-
readonly "
|
|
9
|
-
readonly "_size-
|
|
10
|
-
readonly "_size-
|
|
11
|
-
readonly "_size-
|
|
12
|
-
readonly "_size-
|
|
13
|
-
readonly "_size-
|
|
14
|
-
readonly "
|
|
15
|
-
readonly "
|
|
16
|
-
readonly "
|
|
17
|
-
readonly "
|
|
2
|
+
readonly "_closeButton_1cxzg_60": string;
|
|
3
|
+
readonly "_container_1cxzg_19": string;
|
|
4
|
+
readonly "_content_1cxzg_97": string;
|
|
5
|
+
readonly "_fadeIn_1cxzg_1": string;
|
|
6
|
+
readonly "_intro_1cxzg_116": string;
|
|
7
|
+
readonly "_modal_1cxzg_49": string;
|
|
8
|
+
readonly "_overlay_1cxzg_2": string;
|
|
9
|
+
readonly "_size-full_1cxzg_42": string;
|
|
10
|
+
readonly "_size-lg_1cxzg_34": string;
|
|
11
|
+
readonly "_size-md_1cxzg_30": string;
|
|
12
|
+
readonly "_size-sm_1cxzg_26": string;
|
|
13
|
+
readonly "_size-xl_1cxzg_38": string;
|
|
14
|
+
readonly "_slideUpSheet_1cxzg_1": string;
|
|
15
|
+
readonly "_slideUp_1cxzg_1": string;
|
|
16
|
+
readonly "_title_1cxzg_87": string;
|
|
17
|
+
readonly "_trigger_1cxzg_123": string;
|
|
18
18
|
};
|
|
19
19
|
export = styles;
|
|
20
20
|
|