quirk-ui 0.1.151 → 0.1.152

package/dist/core/components/Modal/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),a=require("react"),C=require("react-dom"),F=require("../../../x-Dft9NVe_.cjs"),K="_overlay_1pdac_2",X="_fadeIn_1pdac_1",B="_container_1pdac_19",G="_modal_1pdac_49",H="_slideUp_1pdac_1",J="_closeButton_1pdac_60",Q="_title_1pdac_87",V="_content_1pdac_97",W="_intro_1pdac_114",Y="_trigger_1pdac_121",t={overlay:K,fadeIn:X,container:B,"size-sm":"_size-sm_1pdac_26","size-md":"_size-md_1pdac_30","size-lg":"_size-lg_1pdac_34","size-xl":"_size-xl_1pdac_38","size-full":"_size-full_1pdac_42",modal:G,slideUp:H,closeButton:J,title:Q,content:V,intro:W,trigger:Y},Z=()=>{typeof document<"u"&&(document.body.style.overflow="hidden")},E=()=>{typeof document<"u"&&(document.body.style.overflow="")};function T({content:y,trigger:k,isOpen:p,onOpen:l,onClose:o,size:$="md",closeOnEscape:g=!0,closeOnOverlayClick:w=!0,showCloseButton:N=!0,className:q,overlayClassName:S,style:I,title:f,richTextBlocks:i,renderRichText:b,formData:h,renderForm:z}){const[L,j]=a.useState(!1),m=a.useRef(null),v=p!==void 0,n=v?p:L,M=()=>{v||j(!0),l==null||l()},r=()=>{v||j(!1),o==null||o()},P=()=>n?r():M(),R=()=>{w&&r()};a.useEffect(()=>{if(!g||!n)return;const s=d=>{d.key==="Escape"&&r()};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[n,g]),a.useEffect(()=>(n?Z():E(),()=>E()),[n]),a.useEffect(()=>{if(!n||!m.current)return;const s=m.current,d=s.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),c=d[0],u=d[d.length-1],x=_=>{_.key==="Tab"&&(_.shiftKey?document.activeElement===c&&(_.preventDefault(),u==null||u.focus()):document.activeElement===u&&(_.preventDefault(),c==null||c.focus()))};return s.addEventListener("keydown",x),c==null||c.focus(),()=>s.removeEventListener("keydown",x)},[n]);const U=t[`size-${$}`]??"",D=y!==void 0?y:e.jsxs(e.Fragment,{children:[i!=null&&i.length&&b?e.jsx("div",{className:t.intro,children:b({blocks:i})}):null,h&&z?z(h):null]}),A=n?e.jsx("div",{className:`${t.overlay} ${S??""}`.trim(),onClick:R,role:"dialog","aria-modal":"true","aria-labelledby":f?"modal-title":void 0,children:e.jsxs("div",{className:`${U} ${t.container}`,children:[N&&e.jsx("button",{"aria-label":"Close",className:t.closeButton,onClick:r,type:"button",children:e.jsx(F.X,{size:20})}),e.jsxs("div",{ref:m,className:`${t.modal} ${q??""}`.trim(),style:I,onClick:s=>s.stopPropagation(),children:[f&&e.jsx("div",{className:t.title,id:"modal-title",children:f}),e.jsx("div",{className:t.content,children:D})]})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:t.trigger,onClick:P,children:k}),typeof window<"u"&&C.createPortal(A,document.body)]})}exports.Modal=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index38.css');const e=require("react/jsx-runtime"),d=require("react"),C=require("react-dom"),F=require("../../../x-Dft9NVe_.cjs"),K="_overlay_1u4kf_2",X="_fadeIn_1u4kf_1",B="_container_1u4kf_19",G="_modal_1u4kf_49",H="_slideUp_1u4kf_1",J="_closeButton_1u4kf_60",Q="_title_1u4kf_87",V="_content_1u4kf_97",W="_trigger_1u4kf_117",t={overlay:K,fadeIn:X,container:B,"size-sm":"_size-sm_1u4kf_26","size-md":"_size-md_1u4kf_30","size-lg":"_size-lg_1u4kf_34","size-xl":"_size-xl_1u4kf_38","size-full":"_size-full_1u4kf_42",modal:G,slideUp:H,closeButton:J,title:Q,content:V,trigger:W},Y=()=>{typeof document<"u"&&(document.body.style.overflow="hidden")},E=()=>{typeof document<"u"&&(document.body.style.overflow="")};function Z({content:y,trigger:p,isOpen:k,onOpen:o,onClose:i,size:$="md",closeOnEscape:g=!0,closeOnOverlayClick:w=!0,showCloseButton:N=!0,className:q,overlayClassName:S,style:I,title:_,richTextBlocks:a,renderRichText:b,formData:h,renderForm:z}){const[L,j]=d.useState(!1),m=d.useRef(null),v=k!==void 0,n=v?k:L,M=()=>{v||j(!0),o==null||o()},r=()=>{v||j(!1),i==null||i()},P=()=>n?r():M(),R=()=>{w&&r()};d.useEffect(()=>{if(!g||!n)return;const s=c=>{c.key==="Escape"&&r()};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[n,g]),d.useEffect(()=>(n?Y():E(),()=>E()),[n]),d.useEffect(()=>{if(!n||!m.current)return;const s=m.current,c=s.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),l=c[0],u=c[c.length-1],x=f=>{f.key==="Tab"&&(f.shiftKey?document.activeElement===l&&(f.preventDefault(),u==null||u.focus()):document.activeElement===u&&(f.preventDefault(),l==null||l.focus()))};return s.addEventListener("keydown",x),l==null||l.focus(),()=>s.removeEventListener("keydown",x)},[n]);const U=t[`size-${$}`]??"",D=y!==void 0?y:e.jsxs(e.Fragment,{children:[a!=null&&a.length&&b?e.jsx("div",{className:t.intro,children:b({blocks:a})}):null,h&&z?z(h):null]}),A=n?e.jsx("div",{className:`${t.overlay} ${S??""}`.trim(),onClick:R,role:"dialog","aria-modal":"true","aria-labelledby":_?"modal-title":void 0,children:e.jsxs("div",{className:`${U} ${t.container}`,children:[N&&e.jsx("button",{"aria-label":"Close",className:t.closeButton,onClick:r,type:"button",children:e.jsx(F.X,{size:20})}),e.jsxs("div",{ref:m,className:`${t.modal} ${q??""}`.trim(),style:I,onClick:s=>s.stopPropagation(),children:[_&&e.jsx("div",{className:t.title,id:"modal-title",children:_}),e.jsx("div",{className:t.content,children:D})]})]})}):null;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:t.trigger,onClick:P,children:p}),typeof window<"u"&&C.createPortal(A,document.body)]})}exports.Modal=Z;

package/dist/core/components/Modal/index.mjs

@@ -1,34 +1,33 @@
-import { jsxs as m, Fragment as N, jsx as o } from "react/jsx-runtime";
-import { useState as X, useRef as B, useEffect as v } from "react";
+import { jsxs as f, Fragment as N, jsx as o } from "react/jsx-runtime";
+import { useState as X, useRef as B, useEffect as y } from "react";
 import { createPortal as F } from "react-dom";
 import { X as G } from "../../../x-CnsEH4Ox.js";
-import '../../../index38.css';const H = "_overlay_1pdac_2", J = "_fadeIn_1pdac_1", Q = "_container_1pdac_19", V = "_modal_1pdac_49", W = "_slideUp_1pdac_1", Y = "_closeButton_1pdac_60", Z = "_title_1pdac_87", T = "_content_1pdac_97", O = "_intro_1pdac_114", ee = "_trigger_1pdac_121", e = {
+import '../../../index38.css';const H = "_overlay_1u4kf_2", J = "_fadeIn_1u4kf_1", Q = "_container_1u4kf_19", V = "_modal_1u4kf_49", W = "_slideUp_1u4kf_1", Y = "_closeButton_1u4kf_60", Z = "_title_1u4kf_87", T = "_content_1u4kf_97", O = "_trigger_1u4kf_117", e = {
   overlay: H,
   fadeIn: J,
   container: Q,
-  "size-sm": "_size-sm_1pdac_26",
-  "size-md": "_size-md_1pdac_30",
-  "size-lg": "_size-lg_1pdac_34",
-  "size-xl": "_size-xl_1pdac_38",
-  "size-full": "_size-full_1pdac_42",
+  "size-sm": "_size-sm_1u4kf_26",
+  "size-md": "_size-md_1u4kf_30",
+  "size-lg": "_size-lg_1u4kf_34",
+  "size-xl": "_size-xl_1u4kf_38",
+  "size-full": "_size-full_1u4kf_42",
   modal: V,
   slideUp: W,
   closeButton: Y,
   title: Z,
   content: T,
-  intro: O,
-  trigger: ee
-}, te = () => {
+  trigger: O
+}, ee = () => {
   typeof document < "u" && (document.body.style.overflow = "hidden");
 }, $ = () => {
   typeof document < "u" && (document.body.style.overflow = "");
 };
-function ce({
-  content: y,
+function ie({
+  content: k,
   trigger: I,
   isOpen: g,
-  onOpen: d,
-  onClose: c,
+  onOpen: i,
+  onClose: s,
   size: L = "md",
   closeOnEscape: b = !0,
   closeOnOverlayClick: S = !0,
@@ -36,37 +35,37 @@ function ce({
   className: j,
   overlayClassName: x,
   style: P,
-  title: _,
-  richTextBlocks: i,
+  title: m,
+  richTextBlocks: c,
   renderRichText: h,
-  formData: z,
-  renderForm: k
+  formData: p,
+  renderForm: z
 }) {
-  const [q, E] = X(!1), f = B(null), p = g !== void 0, t = p ? g : q, A = () => {
-    p || E(!0), d == null || d();
-  }, s = () => {
-    p || E(!1), c == null || c();
-  }, C = () => t ? s() : A(), D = () => {
-    S && s();
+  const [q, E] = X(!1), _ = B(null), v = g !== void 0, t = v ? g : q, A = () => {
+    v || E(!0), i == null || i();
+  }, a = () => {
+    v || E(!1), s == null || s();
+  }, C = () => t ? a() : A(), D = () => {
+    S && a();
   };
-  v(() => {
+  y(() => {
     if (!b || !t) return;
-    const n = (a) => {
-      a.key === "Escape" && s();
+    const n = (d) => {
+      d.key === "Escape" && a();
     };
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [t, b]), v(() => (t ? te() : $(), () => $()), [t]), v(() => {
-    if (!t || !f.current) return;
-    const n = f.current, a = n.querySelectorAll(
+  }, [t, b]), y(() => (t ? ee() : $(), () => $()), [t]), y(() => {
+    if (!t || !_.current) return;
+    const n = _.current, d = n.querySelectorAll(
       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ), l = a[0], r = a[a.length - 1], w = (u) => {
+    ), l = d[0], r = d[d.length - 1], w = (u) => {
       u.key === "Tab" && (u.shiftKey ? document.activeElement === l && (u.preventDefault(), r == null || r.focus()) : document.activeElement === r && (u.preventDefault(), l == null || l.focus()));
     };
     return n.addEventListener("keydown", w), l == null || l.focus(), () => n.removeEventListener("keydown", w);
   }, [t]);
-  const K = e[`size-${L}`] ?? "", M = y !== void 0 ? y : /* @__PURE__ */ m(N, { children: [
-    i != null && i.length && h ? /* @__PURE__ */ o("div", { className: e.intro, children: h({ blocks: i }) }) : null,
-    z && k ? k(z) : null
+  const K = e[`size-${L}`] ?? "", M = k !== void 0 ? k : /* @__PURE__ */ f(N, { children: [
+    c != null && c.length && h ? /* @__PURE__ */ o("div", { className: e.intro, children: h({ blocks: c }) }) : null,
+    p && z ? z(p) : null
   ] }), R = t ? /* @__PURE__ */ o(
     "div",
     {
@@ -74,27 +73,27 @@ function ce({
       onClick: D,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": _ ? "modal-title" : void 0,
-      children: /* @__PURE__ */ m("div", { className: `${K} ${e.container}`, children: [
+      "aria-labelledby": m ? "modal-title" : void 0,
+      children: /* @__PURE__ */ f("div", { className: `${K} ${e.container}`, children: [
         U && /* @__PURE__ */ o(
           "button",
           {
             "aria-label": "Close",
             className: e.closeButton,
-            onClick: s,
+            onClick: a,
             type: "button",
             children: /* @__PURE__ */ o(G, { size: 20 })
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ f(
           "div",
           {
-            ref: f,
+            ref: _,
             className: `${e.modal} ${j ?? ""}`.trim(),
             style: P,
             onClick: (n) => n.stopPropagation(),
             children: [
-              _ && /* @__PURE__ */ o("div", { className: e.title, id: "modal-title", children: _ }),
+              m && /* @__PURE__ */ o("div", { className: e.title, id: "modal-title", children: m }),
               /* @__PURE__ */ o("div", { className: e.content, children: M })
             ]
           }
@@ -102,11 +101,11 @@ function ce({
       ] })
     }
   ) : null;
-  return /* @__PURE__ */ m(N, { children: [
+  return /* @__PURE__ */ f(N, { children: [
     /* @__PURE__ */ o("div", { className: e.trigger, onClick: C, children: I }),
     typeof window < "u" && F(R, document.body)
   ] });
 }
 export {
-  ce as Modal
+  ie as Modal
 };

package/dist/index38.css

@@ -1 +1 @@
-._overlay_1pdac_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_1pdac_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_1pdac_19{position:relative;display:flex;flex-direction:column}._size-sm_1pdac_26{width:90%;max-width:400px}._size-md_1pdac_30{width:90%;max-width:600px}._size-lg_1pdac_34{width:90%;max-width:800px}._size-xl_1pdac_38{width:90%;max-width:1200px}._size-full_1pdac_42{width:95%;height:95dvh;max-height:95dvh}._modal_1pdac_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_1pdac_1 .3s ease}._closeButton_1pdac_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_1pdac_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_1pdac_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_1pdac_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_1pdac_97{color:var(--color-text-primary, #333);line-height:var(--line-height-normal, 1.5)}._content_1pdac_97 video,._content_1pdac_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_1pdac_97 video{width:100%}._intro_1pdac_114{margin-bottom:var(--spacing-lg, 1.5rem);padding-bottom:var(--spacing-lg, 1.5rem);border-bottom:1px solid var(--color-border, #e5e7eb)}._trigger_1pdac_121{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_1pdac_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_1pdac_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){._modal_1pdac_49{padding:var(--spacing-lg, 1.5rem);max-height:85dvh}._size-sm_1pdac_26,._size-md_1pdac_30,._size-lg_1pdac_34,._size-xl_1pdac_38{width:95%}._title_1pdac_87{font-size:var(--font-size-lg, 1.25rem);padding-right:var(--spacing-lg, 1.5rem)}}@media (max-width: 480px){._overlay_1pdac_2{padding:var(--spacing-sm, .5rem)}._modal_1pdac_49{padding:var(--spacing-md, 1rem);max-height:90dvh}._title_1pdac_87{font-size:var(--font-size-md, 1rem);margin-bottom:var(--spacing-md, 1rem)}}
+._overlay_1u4kf_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_1u4kf_1 .2s ease;padding:var(--spacing-md, 1rem);overflow-y:auto}._container_1u4kf_19{position:relative;display:flex;flex-direction:column}._size-sm_1u4kf_26{width:90%;max-width:400px}._size-md_1u4kf_30{width:90%;max-width:600px}._size-lg_1u4kf_34{width:90%;max-width:800px}._size-xl_1u4kf_38{width:90%;max-width:1200px}._size-full_1u4kf_42{width:95%;height:95dvh;max-height:95dvh}._modal_1u4kf_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_1u4kf_1 .3s ease}._closeButton_1u4kf_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_1u4kf_60:hover{background-color:var(--color-secondary-10, #f5f5f5);color:var(--color-text-primary, #333)}._closeButton_1u4kf_60:focus-visible{outline:2px solid var(--color-primary-100, #007bff);outline-offset:2px}._title_1u4kf_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_1u4kf_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_1u4kf_97 video,._content_1u4kf_97 img{max-width:100%;height:auto;border-radius:var(--radius-md, .5rem)}._content_1u4kf_97 video{width:100%}._trigger_1u4kf_117{width:auto;display:inline-block;cursor:pointer}@keyframes _fadeIn_1u4kf_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_1u4kf_1{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){._modal_1u4kf_49{padding:var(--spacing-lg, 1.5rem);max-height:85dvh}._size-sm_1u4kf_26,._size-md_1u4kf_30,._size-lg_1u4kf_34,._size-xl_1u4kf_38{width:95%}._title_1u4kf_87{font-size:var(--font-size-lg, 1.25rem);padding-right:var(--spacing-lg, 1.5rem)}}@media (max-width: 480px){._overlay_1u4kf_2{padding:var(--spacing-sm, .5rem)}._modal_1u4kf_49{padding:var(--spacing-md, 1rem);max-height:90dvh}._title_1u4kf_87{font-size:var(--font-size-md, 1rem);margin-bottom:var(--spacing-md, 1rem)}}

package/package.json

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