@unizap/uniui 1.0.48 → 1.0.49

package/dist/uniui.js

@@ -7378,7 +7378,7 @@ function Qi({ items: e, trigger: n, className: t, dropdownItemClass: r }) {
     "div",
     {
       ref: m,
-      className: `absolute mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${c ? "opacity-100 scale-100" : "opacity-0 scale-95"} ${t}`,
+      className: `fixed mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${c ? "opacity-100 scale-100" : "opacity-0 scale-95"} ${t}`,
       style: {
         top: l.top,
         left: l.left

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}`})},yi=({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:u,value:d,disabled:m})=>{var f,x;const p=i||m;return a.jsxs("label",{className:`relative flex items-center cursor-pointer select-none transition ${p?"opacity-50 cursor-not-allowed":"hover:opacity-90"}`,children:[a.jsx("input",{type:"radio",name:e,value:d,disabled:p,checked:t===d,onChange:()=>!p&&(r==null?void 0:r(d)),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 ${(f=ge[l])==null?void 0:f.peer} ${c}`}),a.jsx("span",{className:`ml-2 text-sm ${(x=ge[l])==null?void 0:x.peer}`,children:u})]},d)})}),Ci=({label:e,value:n,onChange:t,options:r,className:o="",labelClass:i="",inputClass:l="",disabled:s=!1,size:c="medium",variant:u="outlined",rounded:d="medium",shadow:m=!1})=>{const p={small:"p-2",medium:"p-3",large:"p-4"},f={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:g=>t(g.target.value),className:`appearance-none focus:ring-1 text-color-gray-800 w-full border outline-none transition-all  ${f[d]}  ${p[c]} ${x[u]} ${s?"!bg-color-gray-50 opacity-60 cursor-not-allowed":""} ${m?"shadow-md shadow-color-zinc-100":""} ${l}`,children:r.map(g=>a.jsx("option",{value:g.value,className:"text-color-gray-900",children:g.label},g.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"})})})]})]})},Si=({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 u=s.current.getBoundingClientRect(),d=c.current.getBoundingClientRect();let m=0,p=0;switch(t){case"top":m=u.top-d.height-8,p=u.left+u.width/2-d.width/2;break;case"bottom":m=u.bottom+8,p=u.left+u.width/2-d.width/2;break;case"left":m=u.top+u.height/2-d.height/2,p=u.left-d.width-8;break;case"right":m=u.top+u.height/2-d.height/2,p=u.right+8;break}l({top:m,left:p})}},[r,t]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:s,className:"inline-block",onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:n}),r&&Fe.createPortal(a.jsx("div",{ref:c,style:{top:i.top,left:i.left},className:"fixed z-50 px-2 py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md whitespace-nowrap pointer-events-none",children:e}),document.body)]})};function ji(...e){return e.filter(Boolean).join(" ")}const ki={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"},er=h.forwardRef(({open:e,onClose:n,className:t,title:r,children:o,actions:i,showCloseIcon:l=!0,fullscreen:s=!1,fullWidth:c=!1,maxWidth:u},d)=>{const[m,p]=h.useState(e||!1),[f,x]=h.useState(!1),[g,b]=h.useState(!1);h.useEffect(()=>{e!==void 0&&p(e)},[e]),h.useImperativeHandle(d,()=>({open:()=>p(!0),close:()=>{b(!1),setTimeout(()=>p(!1),300)}})),h.useEffect(()=>{let $;return m?(x(!0),$=setTimeout(()=>b(!0),10)):b(!1),()=>clearTimeout($)},[m]);const w=()=>{m||x(!1)};return h.useEffect(()=>{const $=S=>{S.key==="Escape"&&(n==null||n())};return m&&document.addEventListener("keydown",$),()=>document.removeEventListener("keydown",$)},[m,n]),h.useEffect(()=>(m?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[m]),f?Fe.createPortal(a.jsxs("div",{className:ji("fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300",g?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:()=>{n==null||n(),p(!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 ${g?"opacity-100 scale-100":"opacity-0 scale-95"} ${s?"w-full h-[calc(100%_-_40px)] m-5":`${c?"w-full":"w-auto"} ${u?ki[u]:""} mx-5`} ${t}`,onTransitionEnd:w,children:[a.jsxs("div",{className:"flex items-center justify-between mb-4",children:[r&&a.jsx("h2",{className:"text-xl font-semibold",children:r}),l&&a.jsx(ye,{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:()=>{n==null||n(),p(!1)},variant:"transparent"})]}),a.jsx("div",{className:"grow lg:max-h-[calc(100vh_-_200px)] max-h-[calc(100vh_-_130px)] overflow-y-auto",children:o}),i&&a.jsx("div",{className:"mt-8",children:i})]})]}),document.body):null});function $i({items:e,trigger:n,className:t,dropdownItemClass:r}){const[o,i]=h.useState(!1),[l,s]=h.useState({top:0,left:0}),[c,u]=h.useState(!1),d=h.useRef(null),m=h.useRef(null),p=x=>{x.stopPropagation(),i(g=>!g),u(!1)};h.useLayoutEffect(()=>{if(o&&d.current&&m.current){const x=d.current.getBoundingClientRect(),g=m.current.getBoundingClientRect(),b=window.innerWidth,w=window.innerHeight;let $=x.left+window.scrollX,S=x.bottom+window.scrollY;x.right+g.width>b&&($=x.right+window.scrollX-g.width),$+g.width>b&&($=b-g.width-12),S+g.height>w&&(S=x.top+window.scrollY-g.height),s({top:S,left:$}),setTimeout(()=>{u(!0)},150)}},[o]),h.useEffect(()=>{const x=g=>{var b;m.current&&!m.current.contains(g.target)&&!((b=d.current)!=null&&b.contains(g.target))&&i(!1)};return o&&document.addEventListener("mousedown",x),()=>{document.removeEventListener("mousedown",x)}},[o]);const f=a.jsx("div",{ref:m,className:`absolute mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${c?"opacity-100 scale-100":"opacity-0 scale-95"} ${t}`,style:{top:l.top,left:l.left},children:e.map((x,g)=>a.jsxs("button",{disabled:x.disabled,onClick:()=>{var b;(b=x.onClick)==null||b.call(x),i(!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 ${x.disabled?"opacity-50 hover:bg-color-transparent !cursor-not-allowed":""} ${r} ${x.itemClass}`,children:[x.icon&&a.jsx("span",{children:x.icon}),a.jsx("span",{children:x.label})]},g))});return a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:d,onClick:p,className:"cursor-pointer",children:n}),o&&Fe.createPortal(f,document.body)]})}function _i(...e){return e.filter(Boolean).join(" ")}const tr=({open:e,onClose:n,className:t,title:r,children:o,childrenClass:i,actions:l,showCloseIcon:s=!0,anchor:c="left"})=>{const[u,d]=h.useState(!1),[m,p]=h.useState(!1);h.useEffect(()=>{let b;return e?(d(!0),b=setTimeout(()=>{p(!0)},10)):p(!1),()=>clearTimeout(b)},[e]);const f=()=>{e||d(!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]),!u)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"},g={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 Fe.createPortal(a.jsxs("div",{className:_i("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}`})},yi=({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:u,value:d,disabled:m})=>{var f,x;const p=i||m;return a.jsxs("label",{className:`relative flex items-center cursor-pointer select-none transition ${p?"opacity-50 cursor-not-allowed":"hover:opacity-90"}`,children:[a.jsx("input",{type:"radio",name:e,value:d,disabled:p,checked:t===d,onChange:()=>!p&&(r==null?void 0:r(d)),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 ${(f=ge[l])==null?void 0:f.peer} ${c}`}),a.jsx("span",{className:`ml-2 text-sm ${(x=ge[l])==null?void 0:x.peer}`,children:u})]},d)})}),Ci=({label:e,value:n,onChange:t,options:r,className:o="",labelClass:i="",inputClass:l="",disabled:s=!1,size:c="medium",variant:u="outlined",rounded:d="medium",shadow:m=!1})=>{const p={small:"p-2",medium:"p-3",large:"p-4"},f={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:g=>t(g.target.value),className:`appearance-none focus:ring-1 text-color-gray-800 w-full border outline-none transition-all  ${f[d]}  ${p[c]} ${x[u]} ${s?"!bg-color-gray-50 opacity-60 cursor-not-allowed":""} ${m?"shadow-md shadow-color-zinc-100":""} ${l}`,children:r.map(g=>a.jsx("option",{value:g.value,className:"text-color-gray-900",children:g.label},g.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"})})})]})]})},Si=({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 u=s.current.getBoundingClientRect(),d=c.current.getBoundingClientRect();let m=0,p=0;switch(t){case"top":m=u.top-d.height-8,p=u.left+u.width/2-d.width/2;break;case"bottom":m=u.bottom+8,p=u.left+u.width/2-d.width/2;break;case"left":m=u.top+u.height/2-d.height/2,p=u.left-d.width-8;break;case"right":m=u.top+u.height/2-d.height/2,p=u.right+8;break}l({top:m,left:p})}},[r,t]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:s,className:"inline-block",onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),children:n}),r&&Fe.createPortal(a.jsx("div",{ref:c,style:{top:i.top,left:i.left},className:"fixed z-50 px-2 py-1 text-sm text-color-white bg-color-gray-800 rounded shadow-md whitespace-nowrap pointer-events-none",children:e}),document.body)]})};function ji(...e){return e.filter(Boolean).join(" ")}const ki={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"},er=h.forwardRef(({open:e,onClose:n,className:t,title:r,children:o,actions:i,showCloseIcon:l=!0,fullscreen:s=!1,fullWidth:c=!1,maxWidth:u},d)=>{const[m,p]=h.useState(e||!1),[f,x]=h.useState(!1),[g,b]=h.useState(!1);h.useEffect(()=>{e!==void 0&&p(e)},[e]),h.useImperativeHandle(d,()=>({open:()=>p(!0),close:()=>{b(!1),setTimeout(()=>p(!1),300)}})),h.useEffect(()=>{let $;return m?(x(!0),$=setTimeout(()=>b(!0),10)):b(!1),()=>clearTimeout($)},[m]);const w=()=>{m||x(!1)};return h.useEffect(()=>{const $=S=>{S.key==="Escape"&&(n==null||n())};return m&&document.addEventListener("keydown",$),()=>document.removeEventListener("keydown",$)},[m,n]),h.useEffect(()=>(m?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[m]),f?Fe.createPortal(a.jsxs("div",{className:ji("fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300",g?"opacity-100":"opacity-0 pointer-events-none"),children:[a.jsx("div",{className:"fixed inset-0 bg-color-black/50",onClick:()=>{n==null||n(),p(!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 ${g?"opacity-100 scale-100":"opacity-0 scale-95"} ${s?"w-full h-[calc(100%_-_40px)] m-5":`${c?"w-full":"w-auto"} ${u?ki[u]:""} mx-5`} ${t}`,onTransitionEnd:w,children:[a.jsxs("div",{className:"flex items-center justify-between mb-4",children:[r&&a.jsx("h2",{className:"text-xl font-semibold",children:r}),l&&a.jsx(ye,{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:()=>{n==null||n(),p(!1)},variant:"transparent"})]}),a.jsx("div",{className:"grow lg:max-h-[calc(100vh_-_200px)] max-h-[calc(100vh_-_130px)] overflow-y-auto",children:o}),i&&a.jsx("div",{className:"mt-8",children:i})]})]}),document.body):null});function $i({items:e,trigger:n,className:t,dropdownItemClass:r}){const[o,i]=h.useState(!1),[l,s]=h.useState({top:0,left:0}),[c,u]=h.useState(!1),d=h.useRef(null),m=h.useRef(null),p=x=>{x.stopPropagation(),i(g=>!g),u(!1)};h.useLayoutEffect(()=>{if(o&&d.current&&m.current){const x=d.current.getBoundingClientRect(),g=m.current.getBoundingClientRect(),b=window.innerWidth,w=window.innerHeight;let $=x.left+window.scrollX,S=x.bottom+window.scrollY;x.right+g.width>b&&($=x.right+window.scrollX-g.width),$+g.width>b&&($=b-g.width-12),S+g.height>w&&(S=x.top+window.scrollY-g.height),s({top:S,left:$}),setTimeout(()=>{u(!0)},150)}},[o]),h.useEffect(()=>{const x=g=>{var b;m.current&&!m.current.contains(g.target)&&!((b=d.current)!=null&&b.contains(g.target))&&i(!1)};return o&&document.addEventListener("mousedown",x),()=>{document.removeEventListener("mousedown",x)}},[o]);const f=a.jsx("div",{ref:m,className:`fixed mt-2 z-50 rounded-xl bg-color-white shadow-xl p-2 min-w-[160px] transition-all duration-200 transform ${c?"opacity-100 scale-100":"opacity-0 scale-95"} ${t}`,style:{top:l.top,left:l.left},children:e.map((x,g)=>a.jsxs("button",{disabled:x.disabled,onClick:()=>{var b;(b=x.onClick)==null||b.call(x),i(!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 ${x.disabled?"opacity-50 hover:bg-color-transparent !cursor-not-allowed":""} ${r} ${x.itemClass}`,children:[x.icon&&a.jsx("span",{children:x.icon}),a.jsx("span",{children:x.label})]},g))});return a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:d,onClick:p,className:"cursor-pointer",children:n}),o&&Fe.createPortal(f,document.body)]})}function _i(...e){return e.filter(Boolean).join(" ")}const tr=({open:e,onClose:n,className:t,title:r,children:o,childrenClass:i,actions:l,showCloseIcon:s=!0,anchor:c="left"})=>{const[u,d]=h.useState(!1),[m,p]=h.useState(!1);h.useEffect(()=>{let b;return e?(d(!0),b=setTimeout(()=>{p(!0)},10)):p(!1),()=>clearTimeout(b)},[e]);const f=()=>{e||d(!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]),!u)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"},g={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 Fe.createPortal(a.jsxs("div",{className:_i("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]}
           ${g[c]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@unizap/uniui",
-    "version": "1.0.48",
+    "version": "1.0.49",
     "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": [