@unizap/uniui 1.0.54 → 1.0.55

package/dist/uniui.js

@@ -7368,7 +7368,7 @@ const Yi = rr(function({
         {
           ref: c,
           style: { top: i.top, left: i.left },
-          className: "absolute z-50 text-center px-2 max-w-xs py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md pointer-events-none",
+          className: "fixed z-50 text-center px-2 max-w-xs py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md pointer-events-none",
           children: e
         }
       ),

package/dist/uniui.umd.cjs

@@ -173,7 +173,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       ${r}
       ${n==="inset"?o?"pl-4":"pt-4":""}`,children:a.jsxs("div",{className:l,children:[a.jsx("div",{className:s}),a.jsx("span",{children:t}),a.jsx("div",{className:s})]})})}const i=o?"h-px w-full bg-color-gray-300":"w-px h-full bg-color-gray-300";return a.jsx("div",{role:"separator",className:`flex ${o?"w-full items-center":"h-full flex-col justify-center"}
       ${r}
-      ${n==="inset"?o?"pl-4":"pt-4":""} ${i}`})},ki=({name:e,options:n,selectedValue:t,onChange:r,direction:o="column",disabled:i=!1,color:l="blue",className:s="",radioClass:c})=>a.jsx("div",{className:`flex ${o==="row"?"flex-row gap-6":"flex-col gap-3"} ${s}`,children:n.map(({label:d,value:p,disabled:m})=>{var g,x;const u=i||m;return a.jsxs("label",{className:`relative flex items-center cursor-pointer select-none transition ${u?"opacity-50 cursor-not-allowed":"hover:opacity-90"}`,children:[a.jsx("input",{type:"radio",name:e,value:p,disabled:u,checked:t===p,onChange:()=>!u&&(r==null?void 0:r(p)),className:"sr-only peer"}),a.jsx("div",{className:`w-5 h-5 rounded-full border-2 border-color-gray-400 peer-checked:border-[7px] transition-all duration-150 ${(g=ve[l])==null?void 0:g.peer} ${c}`}),a.jsx("span",{className:`ml-2 text-sm ${(x=ve[l])==null?void 0:x.peer}`,children:d})]},p)})}),_i=({label:e,value:n,onChange:t,options:r,className:o="",labelClass:i="",inputClass:l="",disabled:s=!1,size:c="medium",variant:d="outlined",rounded:p="medium",shadow:m=!1})=>{const u={small:"p-2",medium:"p-3",large:"p-4"},g={small:"rounded-md",medium:"rounded-lg",full:"rounded-full"},x={filled:"bg-color-gray-100 border-color-gray-200",outlined:"border-color-gray-300 bg-color-transparent"};return a.jsxs("div",{className:`relative w-full ${o}`,children:[e&&a.jsx("label",{className:`text-sm text-color-gray-500 pointer-events-none block mb-1 ${i}`,children:e}),a.jsxs("div",{className:"relative",children:[a.jsx("select",{disabled:s,value:n,onChange:f=>t(f.target.value),className:`appearance-none focus:ring-1 text-color-gray-800 w-full border outline-none transition-all  ${g[p]}  ${u[c]} ${x[d]} ${s?"!bg-color-gray-50 opacity-60 cursor-not-allowed":""} ${m?"shadow-md shadow-color-zinc-100":""} ${l}`,children:r.map(f=>a.jsx("option",{value:f.value,className:"text-color-gray-900",children:f.label},f.value))}),a.jsx("span",{className:`absolute right-3 text-sm top-1/2 -translate-y-1/2 ${s?"opacity-60":""}`,children:a.jsx("svg",{className:"size-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"})})})]})]})},Ri=({content:e,children:n,position:t="top"})=>{const[r,o]=h.useState(!1),[i,l]=h.useState({top:0,left:0}),s=h.useRef(null),c=h.useRef(null);return h.useEffect(()=>{if(r&&s.current&&c.current){const d=s.current.getBoundingClientRect(),p=c.current.getBoundingClientRect();let m=0,u=0;switch(t){case"top":m=d.top-p.height-8,u=d.left+d.width/2-p.width/2;break;case"bottom":m=d.bottom+8,u=d.left+d.width/2-p.width/2;break;case"left":m=d.top+d.height/2-p.height/2,u=d.left-p.width-8;break;case"right":m=d.top+d.height/2-p.height/2,u=d.right+8;break}l({top:m,left:u})}},[r,t]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:s,className:"inline-block",onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:n}),r&&Ne.createPortal(a.jsx("div",{ref:c,style:{top:i.top,left:i.left},className:"absolute z-50 text-center px-2 max-w-xs py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md pointer-events-none",children:e}),document.body)]})};function Ei(...e){return e.filter(Boolean).join(" ")}const Mi={sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","4xl":"max-w-4xl","6xl":"max-w-6xl"},nr=h.forwardRef(({open:e,onClose:n,shouldClose:t=!0,className:r,title:o,children:i,actions:l,showCloseIcon:s=!0,fullscreen:c=!1,fullWidth:d=!1,maxWidth:p},m)=>{const[u,g]=h.useState(e||!1),[x,f]=h.useState(!1),[b,w]=h.useState(!1);h.useEffect(()=>{e!==void 0&&g(e)},[e]),h.useImperativeHandle(m,()=>({open:()=>g(!0),close:()=>{w(!1),setTimeout(()=>g(!1),300)}})),h.useEffect(()=>{let C;return u?(f(!0),C=setTimeout(()=>w(!0),10)):w(!1),()=>clearTimeout(C)},[u]);const $=()=>{u||f(!1)};return h.useEffect(()=>{const C=k=>{k.key==="Escape"&&(n==null||n())};return u&&document.addEventListener("keydown",C),()=>document.removeEventListener("keydown",C)},[u,n]),h.useEffect(()=>(u?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[u]),x?Ne.createPortal(a.jsxs("div",{className:Ei("fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300",b?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:()=>{t&&(n(),g(!1))}}),a.jsxs("div",{className:`relative flex flex-col z-50 bg-color-white rounded-xl shadow-lg transition-all duration-300 transform p-6 ${b?"opacity-100 scale-100":"opacity-0 scale-95"} ${c?"w-full h-[calc(100%_-_40px)] m-5":`${d?"w-full":"w-auto"} ${p?Mi[p]:""} mx-5`} ${r}`,onTransitionEnd:$,children:[a.jsxs("div",{className:"flex items-center justify-between mb-4",children:[o&&a.jsx("h2",{className:"text-xl font-semibold",children:o}),s&&a.jsx(Se,{color:"gray",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"})}),size:"small",roundedFull:!0,onClick:()=>{t&&(n(),g(!1))},variant:"transparent"})]}),a.jsx("div",{className:"grow lg:max-h-[calc(100vh_-_200px)] max-h-[calc(100vh_-_130px)] overflow-y-auto",children:i}),l&&a.jsx("div",{className:"mt-8",children:l})]})]}),document.body):null});function Pi({items:e,trigger:n,className:t,dropdownItemClass:r,positioning:o="fixed"}){const[i,l]=h.useState(!1),[s,c]=h.useState({top:0,left:0}),[d,p]=h.useState(!1),m=h.useRef(null),u=h.useRef(null),g=f=>{f.stopPropagation(),l(b=>!b),p(!1),i||c(o==="fixed"?{top:f.clientY,left:f.clientX}:{top:f.clientY+window.scrollY,left:f.clientX+window.scrollX})};h.useLayoutEffect(()=>{if(i&&u.current){const f=u.current.getBoundingClientRect(),b=window.innerWidth,w=window.innerHeight;let{left:$,top:C}=s;const k=$,y=C;if(o==="fixed")$+f.width>b&&($=b-f.width-12),$<12&&($=12),C+f.height>w&&(C=y-f.height),C<12&&(C=12);else{const O=window.scrollX,_=window.scrollY;$-O+f.width>b&&($=O+b-f.width-12),$<O+12&&($=O+12),C-_+f.height>w&&(C=y-f.height),C<_+12&&(C=_+12)}($!==k||C!==y)&&c({top:C,left:$}),setTimeout(()=>{p(!0)},150)}},[i,o]),h.useEffect(()=>{const f=b=>{var w;u.current&&!u.current.contains(b.target)&&!((w=m.current)!=null&&w.contains(b.target))&&l(!1)};return i&&document.addEventListener("mousedown",f),()=>{document.removeEventListener("mousedown",f)}},[i]);const x=a.jsx("div",{ref:u,className:`${o} mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${d?"opacity-100 scale-100":"opacity-0 scale-95"} ${t}`,style:{top:s.top,left:s.left},children:e.map((f,b)=>a.jsxs("button",{disabled:f.disabled,onClick:()=>{var w;(w=f.onClick)==null||w.call(f),l(!1)},className:`flex items-center gap-3 w-full text-left px-3 py-2 bg-color-transparent hover:bg-color-gray-100 transition-all cursor-pointer rounded-md text-md text-color-gray-700 ${f.disabled?"opacity-50 hover:bg-color-transparent !cursor-not-allowed":""} ${r} ${f.itemClass}`,children:[f.icon&&a.jsx("span",{children:f.icon}),a.jsx("span",{children:f.label})]},b))});return a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:m,onClick:g,className:"cursor-pointer",children:n}),i&&Ne.createPortal(x,document.body)]})}function Fi(...e){return e.filter(Boolean).join(" ")}const rr=({open:e,onClose:n,className:t,title:r,children:o,childrenClass:i,actions:l,showCloseIcon:s=!0,anchor:c="left"})=>{const[d,p]=h.useState(!1),[m,u]=h.useState(!1);h.useEffect(()=>{let b;return e?(p(!0),b=setTimeout(()=>{u(!0)},10)):u(!1),()=>clearTimeout(b)},[e]);const g=()=>{e||p(!1)};if(h.useEffect(()=>{const b=w=>{w.key==="Escape"&&(n==null||n())};return e&&document.addEventListener("keydown",b),()=>document.removeEventListener("keydown",b)},[e,n]),h.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),!d)return null;const x={left:"left-0 top-0 h-full min-w-96  transition-all duration-300",right:"right-0 top-0 h-full min-w-96  transition-all duration-300",top:"top-0 left-0 w-full min-h-40  transition-all duration-300",bottom:"bottom-0 left-0 w-full min-h-40  transition-all duration-300"},f={left:m?"translate-x-0":"-translate-x-full",right:m?"translate-x-0":"translate-x-full",top:m?"translate-y-0":"-translate-y-full",bottom:m?"translate-y-0":"translate-y-full"};return Ne.createPortal(a.jsxs("div",{className:Fi("fixed inset-0 z-50 transition-opacity duration-300",m?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:n}),a.jsxs("div",{className:`
+      ${n==="inset"?o?"pl-4":"pt-4":""} ${i}`})},ki=({name:e,options:n,selectedValue:t,onChange:r,direction:o="column",disabled:i=!1,color:l="blue",className:s="",radioClass:c})=>a.jsx("div",{className:`flex ${o==="row"?"flex-row gap-6":"flex-col gap-3"} ${s}`,children:n.map(({label:d,value:p,disabled:m})=>{var g,x;const u=i||m;return a.jsxs("label",{className:`relative flex items-center cursor-pointer select-none transition ${u?"opacity-50 cursor-not-allowed":"hover:opacity-90"}`,children:[a.jsx("input",{type:"radio",name:e,value:p,disabled:u,checked:t===p,onChange:()=>!u&&(r==null?void 0:r(p)),className:"sr-only peer"}),a.jsx("div",{className:`w-5 h-5 rounded-full border-2 border-color-gray-400 peer-checked:border-[7px] transition-all duration-150 ${(g=ve[l])==null?void 0:g.peer} ${c}`}),a.jsx("span",{className:`ml-2 text-sm ${(x=ve[l])==null?void 0:x.peer}`,children:d})]},p)})}),_i=({label:e,value:n,onChange:t,options:r,className:o="",labelClass:i="",inputClass:l="",disabled:s=!1,size:c="medium",variant:d="outlined",rounded:p="medium",shadow:m=!1})=>{const u={small:"p-2",medium:"p-3",large:"p-4"},g={small:"rounded-md",medium:"rounded-lg",full:"rounded-full"},x={filled:"bg-color-gray-100 border-color-gray-200",outlined:"border-color-gray-300 bg-color-transparent"};return a.jsxs("div",{className:`relative w-full ${o}`,children:[e&&a.jsx("label",{className:`text-sm text-color-gray-500 pointer-events-none block mb-1 ${i}`,children:e}),a.jsxs("div",{className:"relative",children:[a.jsx("select",{disabled:s,value:n,onChange:f=>t(f.target.value),className:`appearance-none focus:ring-1 text-color-gray-800 w-full border outline-none transition-all  ${g[p]}  ${u[c]} ${x[d]} ${s?"!bg-color-gray-50 opacity-60 cursor-not-allowed":""} ${m?"shadow-md shadow-color-zinc-100":""} ${l}`,children:r.map(f=>a.jsx("option",{value:f.value,className:"text-color-gray-900",children:f.label},f.value))}),a.jsx("span",{className:`absolute right-3 text-sm top-1/2 -translate-y-1/2 ${s?"opacity-60":""}`,children:a.jsx("svg",{className:"size-4",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"})})})]})]})},Ri=({content:e,children:n,position:t="top"})=>{const[r,o]=h.useState(!1),[i,l]=h.useState({top:0,left:0}),s=h.useRef(null),c=h.useRef(null);return h.useEffect(()=>{if(r&&s.current&&c.current){const d=s.current.getBoundingClientRect(),p=c.current.getBoundingClientRect();let m=0,u=0;switch(t){case"top":m=d.top-p.height-8,u=d.left+d.width/2-p.width/2;break;case"bottom":m=d.bottom+8,u=d.left+d.width/2-p.width/2;break;case"left":m=d.top+d.height/2-p.height/2,u=d.left-p.width-8;break;case"right":m=d.top+d.height/2-p.height/2,u=d.right+8;break}l({top:m,left:u})}},[r,t]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:s,className:"inline-block",onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:n}),r&&Ne.createPortal(a.jsx("div",{ref:c,style:{top:i.top,left:i.left},className:"fixed z-50 text-center px-2 max-w-xs py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md pointer-events-none",children:e}),document.body)]})};function Ei(...e){return e.filter(Boolean).join(" ")}const Mi={sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","4xl":"max-w-4xl","6xl":"max-w-6xl"},nr=h.forwardRef(({open:e,onClose:n,shouldClose:t=!0,className:r,title:o,children:i,actions:l,showCloseIcon:s=!0,fullscreen:c=!1,fullWidth:d=!1,maxWidth:p},m)=>{const[u,g]=h.useState(e||!1),[x,f]=h.useState(!1),[b,w]=h.useState(!1);h.useEffect(()=>{e!==void 0&&g(e)},[e]),h.useImperativeHandle(m,()=>({open:()=>g(!0),close:()=>{w(!1),setTimeout(()=>g(!1),300)}})),h.useEffect(()=>{let C;return u?(f(!0),C=setTimeout(()=>w(!0),10)):w(!1),()=>clearTimeout(C)},[u]);const $=()=>{u||f(!1)};return h.useEffect(()=>{const C=k=>{k.key==="Escape"&&(n==null||n())};return u&&document.addEventListener("keydown",C),()=>document.removeEventListener("keydown",C)},[u,n]),h.useEffect(()=>(u?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[u]),x?Ne.createPortal(a.jsxs("div",{className:Ei("fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300",b?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:()=>{t&&(n(),g(!1))}}),a.jsxs("div",{className:`relative flex flex-col z-50 bg-color-white rounded-xl shadow-lg transition-all duration-300 transform p-6 ${b?"opacity-100 scale-100":"opacity-0 scale-95"} ${c?"w-full h-[calc(100%_-_40px)] m-5":`${d?"w-full":"w-auto"} ${p?Mi[p]:""} mx-5`} ${r}`,onTransitionEnd:$,children:[a.jsxs("div",{className:"flex items-center justify-between mb-4",children:[o&&a.jsx("h2",{className:"text-xl font-semibold",children:o}),s&&a.jsx(Se,{color:"gray",icon:a.jsx("svg",{className:"size-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",children:a.jsx("path",{d:"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"})}),size:"small",roundedFull:!0,onClick:()=>{t&&(n(),g(!1))},variant:"transparent"})]}),a.jsx("div",{className:"grow lg:max-h-[calc(100vh_-_200px)] max-h-[calc(100vh_-_130px)] overflow-y-auto",children:i}),l&&a.jsx("div",{className:"mt-8",children:l})]})]}),document.body):null});function Pi({items:e,trigger:n,className:t,dropdownItemClass:r,positioning:o="fixed"}){const[i,l]=h.useState(!1),[s,c]=h.useState({top:0,left:0}),[d,p]=h.useState(!1),m=h.useRef(null),u=h.useRef(null),g=f=>{f.stopPropagation(),l(b=>!b),p(!1),i||c(o==="fixed"?{top:f.clientY,left:f.clientX}:{top:f.clientY+window.scrollY,left:f.clientX+window.scrollX})};h.useLayoutEffect(()=>{if(i&&u.current){const f=u.current.getBoundingClientRect(),b=window.innerWidth,w=window.innerHeight;let{left:$,top:C}=s;const k=$,y=C;if(o==="fixed")$+f.width>b&&($=b-f.width-12),$<12&&($=12),C+f.height>w&&(C=y-f.height),C<12&&(C=12);else{const O=window.scrollX,_=window.scrollY;$-O+f.width>b&&($=O+b-f.width-12),$<O+12&&($=O+12),C-_+f.height>w&&(C=y-f.height),C<_+12&&(C=_+12)}($!==k||C!==y)&&c({top:C,left:$}),setTimeout(()=>{p(!0)},150)}},[i,o]),h.useEffect(()=>{const f=b=>{var w;u.current&&!u.current.contains(b.target)&&!((w=m.current)!=null&&w.contains(b.target))&&l(!1)};return i&&document.addEventListener("mousedown",f),()=>{document.removeEventListener("mousedown",f)}},[i]);const x=a.jsx("div",{ref:u,className:`${o} mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${d?"opacity-100 scale-100":"opacity-0 scale-95"} ${t}`,style:{top:s.top,left:s.left},children:e.map((f,b)=>a.jsxs("button",{disabled:f.disabled,onClick:()=>{var w;(w=f.onClick)==null||w.call(f),l(!1)},className:`flex items-center gap-3 w-full text-left px-3 py-2 bg-color-transparent hover:bg-color-gray-100 transition-all cursor-pointer rounded-md text-md text-color-gray-700 ${f.disabled?"opacity-50 hover:bg-color-transparent !cursor-not-allowed":""} ${r} ${f.itemClass}`,children:[f.icon&&a.jsx("span",{children:f.icon}),a.jsx("span",{children:f.label})]},b))});return a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:m,onClick:g,className:"cursor-pointer",children:n}),i&&Ne.createPortal(x,document.body)]})}function Fi(...e){return e.filter(Boolean).join(" ")}const rr=({open:e,onClose:n,className:t,title:r,children:o,childrenClass:i,actions:l,showCloseIcon:s=!0,anchor:c="left"})=>{const[d,p]=h.useState(!1),[m,u]=h.useState(!1);h.useEffect(()=>{let b;return e?(p(!0),b=setTimeout(()=>{u(!0)},10)):u(!1),()=>clearTimeout(b)},[e]);const g=()=>{e||p(!1)};if(h.useEffect(()=>{const b=w=>{w.key==="Escape"&&(n==null||n())};return e&&document.addEventListener("keydown",b),()=>document.removeEventListener("keydown",b)},[e,n]),h.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),!d)return null;const x={left:"left-0 top-0 h-full min-w-96  transition-all duration-300",right:"right-0 top-0 h-full min-w-96  transition-all duration-300",top:"top-0 left-0 w-full min-h-40  transition-all duration-300",bottom:"bottom-0 left-0 w-full min-h-40  transition-all duration-300"},f={left:m?"translate-x-0":"-translate-x-full",right:m?"translate-x-0":"translate-x-full",top:m?"translate-y-0":"-translate-y-full",bottom:m?"translate-y-0":"translate-y-full"};return Ne.createPortal(a.jsxs("div",{className:Fi("fixed inset-0 z-50 transition-opacity duration-300",m?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:n}),a.jsxs("div",{className:`
           fixed bg-color-white shadow-lg z-50 p-6 flex flex-col
           ${x[c]}
           ${f[c]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unizap/uniui",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "description": "UniUi helps developers and designers build beautiful, responsive UIs faster with ready-made, customizable components. Simplify your workflow and create stunning user interfaces effortlessly.",
   "type": "module",
   "files": [