diditui 1.0.6 → 1.0.7

package/dist/diditui.cjs

@@ -84,4 +84,4 @@ doc.body (`+e+`):
   `+o:"")+`
 
 The above lifecycles should be removed. Learn more about this warning here:
-https://fb.me/react-async-component-lifecycle-hooks`)}if(typeof e.getDerivedStateFromProps=="function"&&(t.componentWillMount=$n,t.componentWillReceiveProps=Un),typeof t.getSnapshotBeforeUpdate=="function"){if(typeof t.componentDidUpdate!="function")throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=zn;var i=t.componentDidUpdate;t.componentDidUpdate=function(d,f,g){var p=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:g;i.call(this,d,f,p)}}return e}const yl=Object.freeze(Object.defineProperty({__proto__:null,polyfill:vl},Symbol.toStringTag,{value:"Module"})),Cl=ln.getAugmentedNamespace(yl);Object.defineProperty(He,"__esModule",{value:!0});He.bodyOpenClassName=He.portalClassName=void 0;var rn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},bl=function(){function e(t,r){for(var n=0;n<r.length;n++){var o=r[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),qn=A,Rt=vt(qn),wl=mo,_t=vt(wl),El=In,D=vt(El),xl=ml,nn=vt(xl),kl=Se,Sl=_l(kl),Pe=xe,on=vt(Pe),Rl=Cl;function _l(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function vt(e){return e&&e.__esModule?e:{default:e}}function Ml(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function an(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t&&(typeof t=="object"||typeof t=="function")?t:e}function Tl(e,t){if(typeof t!="function"&&t!==null)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var Ll=He.portalClassName="ReactModalPortal",Ol=He.bodyOpenClassName="ReactModal__Body--open",Fe=Pe.canUseDOM&&_t.default.createPortal!==void 0,dr=function(t){return document.createElement(t)},sn=function(){return Fe?_t.default.createPortal:_t.default.unstable_renderSubtreeIntoContainer};function Et(e){return e()}var nt=function(e){Tl(t,e);function t(){var r,n,o,a;Ml(this,t);for(var s=arguments.length,i=Array(s),l=0;l<s;l++)i[l]=arguments[l];return a=(n=(o=an(this,(r=t.__proto__||Object.getPrototypeOf(t)).call.apply(r,[this].concat(i))),o),o.removePortal=function(){!Fe&&_t.default.unmountComponentAtNode(o.node);var d=Et(o.props.parentSelector);d&&d.contains(o.node)?d.removeChild(o.node):console.warn('React-Modal: "parentSelector" prop did not returned any DOM element. Make sure that the parent element is unmounted to avoid any memory leaks.')},o.portalRef=function(d){o.portal=d},o.renderPortal=function(d){var f=sn(),g=f(o,Rt.default.createElement(nn.default,rn({defaultStyles:t.defaultStyles},d)),o.node);o.portalRef(g)},n),an(o,a)}return bl(t,[{key:"componentDidMount",value:function(){if(Pe.canUseDOM){Fe||(this.node=dr("div")),this.node.className=this.props.portalClassName;var n=Et(this.props.parentSelector);n.appendChild(this.node),!Fe&&this.renderPortal(this.props)}}},{key:"getSnapshotBeforeUpdate",value:function(n){var o=Et(n.parentSelector),a=Et(this.props.parentSelector);return{prevParent:o,nextParent:a}}},{key:"componentDidUpdate",value:function(n,o,a){if(Pe.canUseDOM){var s=this.props,i=s.isOpen,l=s.portalClassName;n.portalClassName!==l&&(this.node.className=l);var d=a.prevParent,f=a.nextParent;f!==d&&(d.removeChild(this.node),f.appendChild(this.node)),!(!n.isOpen&&!i)&&!Fe&&this.renderPortal(this.props)}}},{key:"componentWillUnmount",value:function(){if(!(!Pe.canUseDOM||!this.node||!this.portal)){var n=this.portal.state,o=Date.now(),a=n.isOpen&&this.props.closeTimeoutMS&&(n.closesAt||o+this.props.closeTimeoutMS);a?(n.beforeClose||this.portal.closeWithTimeout(),setTimeout(this.removePortal,a-o)):this.removePortal()}}},{key:"render",value:function(){if(!Pe.canUseDOM||!Fe)return null;!this.node&&Fe&&(this.node=dr("div"));var n=sn();return n(Rt.default.createElement(nn.default,rn({ref:this.portalRef,defaultStyles:t.defaultStyles},this.props)),this.node)}}],[{key:"setAppElement",value:function(n){Sl.setElement(n)}}]),t}(qn.Component);nt.propTypes={isOpen:D.default.bool.isRequired,style:D.default.shape({content:D.default.object,overlay:D.default.object}),portalClassName:D.default.string,bodyOpenClassName:D.default.string,htmlOpenClassName:D.default.string,className:D.default.oneOfType([D.default.string,D.default.shape({base:D.default.string.isRequired,afterOpen:D.default.string.isRequired,beforeClose:D.default.string.isRequired})]),overlayClassName:D.default.oneOfType([D.default.string,D.default.shape({base:D.default.string.isRequired,afterOpen:D.default.string.isRequired,beforeClose:D.default.string.isRequired})]),appElement:D.default.oneOfType([D.default.instanceOf(on.default),D.default.instanceOf(Pe.SafeHTMLCollection),D.default.instanceOf(Pe.SafeNodeList),D.default.arrayOf(D.default.instanceOf(on.default))]),onAfterOpen:D.default.func,onRequestClose:D.default.func,closeTimeoutMS:D.default.number,ariaHideApp:D.default.bool,shouldFocusAfterRender:D.default.bool,shouldCloseOnOverlayClick:D.default.bool,shouldReturnFocusAfterClose:D.default.bool,preventScroll:D.default.bool,parentSelector:D.default.func,aria:D.default.object,data:D.default.object,role:D.default.string,contentLabel:D.default.string,shouldCloseOnEsc:D.default.bool,overlayRef:D.default.func,contentRef:D.default.func,id:D.default.string,overlayElement:D.default.func,contentElement:D.default.func};nt.defaultProps={isOpen:!1,portalClassName:Ll,bodyOpenClassName:Ol,role:"dialog",ariaHideApp:!0,closeTimeoutMS:0,shouldFocusAfterRender:!0,shouldCloseOnEsc:!0,shouldCloseOnOverlayClick:!0,shouldReturnFocusAfterClose:!0,preventScroll:!1,parentSelector:function(){return document.body},overlayElement:function(t,r){return Rt.default.createElement("div",t,r)},contentElement:function(t,r){return Rt.default.createElement("div",t,r)}};nt.defaultStyles={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255, 255, 255, 0.75)"},content:{position:"absolute",top:"40px",left:"40px",right:"40px",bottom:"40px",border:"1px solid #ccc",background:"#fff",overflow:"auto",WebkitOverflowScrolling:"touch",borderRadius:"4px",outline:"none",padding:"20px"}};(0,Rl.polyfill)(nt);process.env.NODE_ENV!=="production"&&(nt.setCreateHTMLElement=function(e){return dr=e});He.default=nt;(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r=He,n=o(r);function o(a){return a&&a.__esModule?a:{default:a}}t.default=n.default,e.exports=t.default})(ar,ar.exports);var Nl=ar.exports;const Pl=ln.getDefaultExportFromCjs(Nl);function Al({children:e,contentLabel:t="modal",overlayClassName:r,className:n,withBorder:o=!1,onRequestClose:a,...s}){const i=Q(["fixed right-0 left-0 bottom-0 z-[1000] h-screen overflow-y-auto","overflow-x-hidden md:inset-0 md:h-full bg-foreground/5 backdrop-blur-md",r]),l=Q(["font-inter size-full flex items-end justify-center md:items-center overflow-visible"]),d=Q(["relative max-h-[90%] overflow-hidden rounded-t-[32px]","bg-background animate-slide-in shadow-card opacity-0 pt-6","md:rounded-[32px] md:max-w-[90%]",{"border border-surface-lo":o},n]);return M.jsx(Pl,{closeTimeoutMS:300,className:l,overlayClassName:i,contentLabel:t,onRequestClose:a,...s,children:M.jsxs("div",{className:d,children:[M.jsx(yn,{className:"absolute right-6 top-6",icon:"close",size:"xs",onClick:a}),e]})})}function jl({name:e,label:t,avatar:r,radius:n="full",className:o,...a}){const s=Q("w-[36px] h-[36px] overflow-hidden",{"rounded-none":n==="none","rounded-full":n==="full","rounded-md":n==="md","rounded-sm":n==="sm"});return M.jsxs("div",{className:Q("flex items-center gap-3",o),...a,children:[M.jsx("div",{className:s,children:r?M.jsx("img",{src:r,alt:"avatar",className:"size-full object-cover"}):M.jsx(Te,{type:"didit",className:"size-full object-cover"})}),M.jsxs("div",{className:"flex flex-col gap-1",children:[M.jsx(ve,{className:"text-foreground",as:"h6",variant:"H6",children:e}),t&&M.jsx(ve,{className:"text-surface-md",as:"span",variant:"Label3",children:t})]})]})}function Bl({label:e,placeholder:t,value:r,disabled:n,className:o,error:a,onValueChange:s=()=>{},...i}){const l=Q(["w-full min-h-[68px] bg-surface-lo pt-[20px] pl-[20px] pr-14","rounded-3xl placeholder:text-sm placeholder:font-normal border-transparent","placeholder:leading-[140%] placeholder:tracking-tight","placeholder:text-surface-mdlo text-sm font-normal leading-[140%] tracking-tight","focus:ring-0 focus:bg-transparent focus:border-foreground",o],{"opacity-80":n,"border-error focus:border-error bg-error/5":a}),d=Q(["flex justify-center align-items-center absolute right-3 top-[26px]","z-20 hover:opacity-80"],{invisible:!r});return M.jsxs("div",{className:"w-full relative",children:[M.jsx(ve,{variant:"StyledLabel",as:"label",className:"absolute left-[22px] top-[12px] text-surface-md truncate w-[85%]",children:e}),M.jsx("input",{className:l,value:r,type:"email",onChange:f=>s(f.target.value),placeholder:t,disabled:n,...i}),M.jsx("button",{className:d,onClick:()=>s(""),children:M.jsx(ve,{variant:"StyledLabel",as:"span",className:"text-[9px] text-surface-md m-0",children:"CLEAR"})}),M.jsx(ve,{variant:"P3",as:"span",className:"text-error mt-1 pl-1 w-full block",children:a})]})}const Il=Ae(["border border-foreground","rounded-3xl","p-2","bg-transparent","flex items-center justify-center"],{variants:{variant:{primary:"bg-primary/10 border-primary/20 text-primary",accent:"bg-accent/10 border-accent/20 text-accent",success:"bg-success/10 border-success/20 text-success",warning:"bg-warning/10 border-warning/20 text-warning",error:"bg-error/10 border-error/20 text-error"}},defaultVariants:{variant:"primary"}});function Fl({label:e,variant:t,className:r,...n}){return M.jsx("div",{className:Q(Il({variant:t,className:r})),...n,children:M.jsx(ve,{className:"text-inherit text-[9px]",variant:"StyledLabel",as:"span",children:e})})}function fr({label:e,children:t,direction:r="top",className:n}){const[o,a]=A.useState(!1),s=A.useRef(null),i=A.useRef(null),l=A.useCallback(()=>{let g=0,p=0;if(s.current&&i.current&&o){const m=s.current.getBoundingClientRect(),x=i.current.getBoundingClientRect();return r==="top"&&(g=(x.height+12)*-1,p=m.width/2-x.width/2),r==="bottom"&&(g=m.height+12,p=m.width/2-x.width/2),r==="left"&&(g=m.height/2-x.height/2,p=(x.width+12)*-1),r==="right"&&(g=m.height/2-x.height/2,p=m.width+12),{top:g,left:p}}return{top:g,left:p}},[r,o]);A.useEffect(()=>{if(s.current&&i.current){const{top:g,left:p}=l();i.current.style.top=`${g}px`,i.current.style.left=`${p}px`}},[l]);const d=Q("absolute z-10 px-3 py-2","bg-surface-hi rounded-xl shadow-sm","transition-opacity duration-300","text-background text-sm",{hidden:!o}),f=Q(["absolute w-3 h-3 bg-surface-hi","transform rotate-45",{hidden:!o,"left-1/2 -translate-x-1/2":r==="top","left-1/2 -translate-x-1/2 -top-1/2 translate-y-full":r==="bottom","translate-y-full -translate-x-1/2 top-0 left-full":r==="left","translate-y-full translate-x-1/2 top-0 right-full":r==="right"}]);return M.jsxs("div",{className:Q("relative inline-flex",n),ref:s,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),children:[t,M.jsxs("div",{ref:i,role:"tooltip",className:d,children:[e,M.jsx("div",{className:f})]})]})}const Dl=Ae(["flex items-center justify-center gap-3 group","bg-surface-ulo py-2 px-3 rounded-3xl text-surface-md"],{variants:{isSecret:{true:"backdrop-blur-md"}},defaultVariants:{isSecret:!1}});function Wl({label:e,value:t,isSecret:r,className:n,onCopy:o,...a}){const[s,i]=A.useState(r),l=A.useCallback(()=>{navigator.clipboard.writeText(t),o==null||o()},[t,o]),d=Q("text-inherit group-hover:text-foreground truncate",{blur:s});return M.jsxs("div",{className:Q(Dl({isSecret:r,className:n})),...a,children:[e&&M.jsx(ve,{className:"text-inherit text-nowrap",variant:"StyledLabel",as:"span",children:e}),M.jsx(ve,{className:d,variant:"P3",as:"p",children:t}),r&&M.jsx(fr,{label:s?"Show":"Hide",children:M.jsx("button",{onClick:()=>i(f=>!f),children:M.jsx(Te,{className:"text-inherit group-hover:text-foreground",type:s?"eye":"eyeSlash",size:"sm"})})}),M.jsx(fr,{label:"Copy",children:M.jsx("button",{onClick:l,children:M.jsx(Te,{className:"text-inherit group-hover:text-foreground",type:"copy",size:"sm"})})})]})}function Vl({onToggle:e=()=>{},id:t,label:r,checked:n,className:o,...a}){const s=Q(["inline-flex items-center gap-4 cursor-pointer"],o),i=A.useCallback(l=>{e(l.target.checked)},[e]);return M.jsxs("label",{className:s,children:[M.jsx("input",{type:"checkbox",checked:n,onChange:i,id:t,className:"sr-only peer",...a}),M.jsx("div",{className:"relative w-11 h-6 bg-surface-lo peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-background after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border-background after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"}),r&&M.jsx(ve,{as:"span",variant:"P3",className:"text-inheret",children:r})]})}function Hl({label:e,placeholder:t,value:r,disabled:n,className:o,error:a,onValueChange:s=()=>{},...i}){const l=A.useRef(null),[d,f]=A.useState(!1),g=Q(["w-full overflow-hidden min-h-[68px] py-2 pr-2 cursor-pointer","flex items-center gap-2 border-b-[1.5px] border-transparent","focus:bg-transparent focus:border-foreground transition-all duration-300"],{"opacity-80":n,"border-foreground":d,"border-error":a},o),p=Q([" placeholder:text-sm placeholder:font-normal placeholder:leading-[140%]","placeholder:text-surface-mdlo text-sm font-normal leading-[140%]","placeholder:tracking-tight tracking-tight","focus:ring-0 active:border-none bg-transparent border-none transition-all duration-300","p-0 m-0"]),m=Q(["flex justify-center align-items-center z-20 hover:opacity-80 p-[2px]"],{invisible:!r}),x=Q(["rounded-full bg-surface-ulo p-[9px] opacity-70","cursor-pointer hover:opacity-100"],{"opacity-100":d,"bg-error/5":a&&d});return M.jsxs("div",{className:"w-full overflow-hidden",children:[M.jsxs("div",{className:g,onClick:()=>{var v;return(v=l.current)==null?void 0:v.focus()},children:[M.jsx("div",{className:x,children:M.jsx(Te,{type:"search",size:"sm"})}),M.jsxs("div",{className:"flex flex-col gap-[6px] grow overflow-hidden min-w-0",children:[M.jsx(ve,{variant:"StyledLabel",as:"label",className:"text-surface-md cursor-pointer truncate",children:e}),M.jsx("input",{ref:l,onFocus:()=>f(!0),onBlur:()=>f(!1),className:p,value:r,type:"email",onChange:v=>s(v.target.value),placeholder:t,disabled:n,...i})]}),M.jsx("button",{className:m,onClick:()=>s(""),children:M.jsx(Te,{type:"closeCircleBold",size:"sm",className:"text-surface-mdlo"})})]}),M.jsx(ve,{variant:"P3",as:"span",className:"text-error mt-1",children:a})]})}function $l({id:e,className:t,label:r,size:n="md",checked:o,onToggle:a=()=>{}}){const s=Q(["inline-flex items-center gap-4"],t),i=Q(["w-5 h-5 text-primary hover:bg-surface-lo border border-surface-mdlo rounded","focus:ring-transparent focus:ring-0 focus:outline-none",n==="sm"&&"w-4 h-4",n==="lg"&&"w-6 h-6"]),l=A.useCallback(d=>{a(d.target.checked)},[a]);return M.jsxs("div",{className:s,children:[M.jsx("input",{id:e,type:"checkbox",checked:o,className:i,onChange:l}),r&&M.jsx(ve,{as:"label",htmlFor:e,variant:"Label3",className:"text-inheret truncate",children:r})]})}const Ul=typeof window<"u"?A.useLayoutEffect:A.useEffect,zl=typeof window>"u";function ot(e,{defaultValue:t=!1,initializeWithValue:r=!0}={}){function n(i){return zl?t:window.matchMedia(i).matches}const[o,a]=A.useState(()=>r?n(e):t);function s(){a(n(e))}return Ul(()=>{const i=window.matchMedia(e);return s(),i.addListener?i.addListener(s):i.addEventListener("change",s),()=>{i.removeListener?i.removeListener(s):i.removeEventListener("change",s)}},[e]),o}function ql(e={}){return ot(`(min-width: ${et.SM}px)`,e)}function Zl(e={}){return ot(`(min-width: ${et.MD}px)`,e)}function Yl(e={}){return ot(`(min-width: ${et.LG}px)`,e)}function Gl(e={}){return ot(`(min-width: ${et.XL}px)`,e)}function Kl(e={}){return ot(`(min-width: ${et.XXL}px)`,e)}exports.Button=wi;exports.Card=vs;exports.CheckBox=$l;exports.CopyValue=Wl;exports.Icon=Te;exports.IconButton=yn;exports.Input=Bl;exports.MediaQuery=et;exports.Modal=Al;exports.QrCode=gs;exports.SearchInput=Hl;exports.Spinner=vn;exports.StatusLabel=Fl;exports.Text=ve;exports.Toggle=Vl;exports.Tooltip=fr;exports.UserCard=jl;exports.cn=Q;exports.svgOptions=mn;exports.useLgMediaQuery=Yl;exports.useMdMediaQuery=Zl;exports.useMediaQuery=ot;exports.useSmMediaQuery=ql;exports.useXlMediaQuery=Gl;exports.useXxlMediaQuery=Kl;
+https://fb.me/react-async-component-lifecycle-hooks`)}if(typeof e.getDerivedStateFromProps=="function"&&(t.componentWillMount=$n,t.componentWillReceiveProps=Un),typeof t.getSnapshotBeforeUpdate=="function"){if(typeof t.componentDidUpdate!="function")throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=zn;var i=t.componentDidUpdate;t.componentDidUpdate=function(d,f,g){var p=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:g;i.call(this,d,f,p)}}return e}const yl=Object.freeze(Object.defineProperty({__proto__:null,polyfill:vl},Symbol.toStringTag,{value:"Module"})),Cl=ln.getAugmentedNamespace(yl);Object.defineProperty(He,"__esModule",{value:!0});He.bodyOpenClassName=He.portalClassName=void 0;var rn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},bl=function(){function e(t,r){for(var n=0;n<r.length;n++){var o=r[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),qn=A,Rt=vt(qn),wl=mo,_t=vt(wl),El=In,D=vt(El),xl=ml,nn=vt(xl),kl=Se,Sl=_l(kl),Pe=xe,on=vt(Pe),Rl=Cl;function _l(e){if(e&&e.__esModule)return e;var t={};if(e!=null)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function vt(e){return e&&e.__esModule?e:{default:e}}function Ml(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function an(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t&&(typeof t=="object"||typeof t=="function")?t:e}function Tl(e,t){if(typeof t!="function"&&t!==null)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var Ll=He.portalClassName="ReactModalPortal",Ol=He.bodyOpenClassName="ReactModal__Body--open",Fe=Pe.canUseDOM&&_t.default.createPortal!==void 0,dr=function(t){return document.createElement(t)},sn=function(){return Fe?_t.default.createPortal:_t.default.unstable_renderSubtreeIntoContainer};function Et(e){return e()}var nt=function(e){Tl(t,e);function t(){var r,n,o,a;Ml(this,t);for(var s=arguments.length,i=Array(s),l=0;l<s;l++)i[l]=arguments[l];return a=(n=(o=an(this,(r=t.__proto__||Object.getPrototypeOf(t)).call.apply(r,[this].concat(i))),o),o.removePortal=function(){!Fe&&_t.default.unmountComponentAtNode(o.node);var d=Et(o.props.parentSelector);d&&d.contains(o.node)?d.removeChild(o.node):console.warn('React-Modal: "parentSelector" prop did not returned any DOM element. Make sure that the parent element is unmounted to avoid any memory leaks.')},o.portalRef=function(d){o.portal=d},o.renderPortal=function(d){var f=sn(),g=f(o,Rt.default.createElement(nn.default,rn({defaultStyles:t.defaultStyles},d)),o.node);o.portalRef(g)},n),an(o,a)}return bl(t,[{key:"componentDidMount",value:function(){if(Pe.canUseDOM){Fe||(this.node=dr("div")),this.node.className=this.props.portalClassName;var n=Et(this.props.parentSelector);n.appendChild(this.node),!Fe&&this.renderPortal(this.props)}}},{key:"getSnapshotBeforeUpdate",value:function(n){var o=Et(n.parentSelector),a=Et(this.props.parentSelector);return{prevParent:o,nextParent:a}}},{key:"componentDidUpdate",value:function(n,o,a){if(Pe.canUseDOM){var s=this.props,i=s.isOpen,l=s.portalClassName;n.portalClassName!==l&&(this.node.className=l);var d=a.prevParent,f=a.nextParent;f!==d&&(d.removeChild(this.node),f.appendChild(this.node)),!(!n.isOpen&&!i)&&!Fe&&this.renderPortal(this.props)}}},{key:"componentWillUnmount",value:function(){if(!(!Pe.canUseDOM||!this.node||!this.portal)){var n=this.portal.state,o=Date.now(),a=n.isOpen&&this.props.closeTimeoutMS&&(n.closesAt||o+this.props.closeTimeoutMS);a?(n.beforeClose||this.portal.closeWithTimeout(),setTimeout(this.removePortal,a-o)):this.removePortal()}}},{key:"render",value:function(){if(!Pe.canUseDOM||!Fe)return null;!this.node&&Fe&&(this.node=dr("div"));var n=sn();return n(Rt.default.createElement(nn.default,rn({ref:this.portalRef,defaultStyles:t.defaultStyles},this.props)),this.node)}}],[{key:"setAppElement",value:function(n){Sl.setElement(n)}}]),t}(qn.Component);nt.propTypes={isOpen:D.default.bool.isRequired,style:D.default.shape({content:D.default.object,overlay:D.default.object}),portalClassName:D.default.string,bodyOpenClassName:D.default.string,htmlOpenClassName:D.default.string,className:D.default.oneOfType([D.default.string,D.default.shape({base:D.default.string.isRequired,afterOpen:D.default.string.isRequired,beforeClose:D.default.string.isRequired})]),overlayClassName:D.default.oneOfType([D.default.string,D.default.shape({base:D.default.string.isRequired,afterOpen:D.default.string.isRequired,beforeClose:D.default.string.isRequired})]),appElement:D.default.oneOfType([D.default.instanceOf(on.default),D.default.instanceOf(Pe.SafeHTMLCollection),D.default.instanceOf(Pe.SafeNodeList),D.default.arrayOf(D.default.instanceOf(on.default))]),onAfterOpen:D.default.func,onRequestClose:D.default.func,closeTimeoutMS:D.default.number,ariaHideApp:D.default.bool,shouldFocusAfterRender:D.default.bool,shouldCloseOnOverlayClick:D.default.bool,shouldReturnFocusAfterClose:D.default.bool,preventScroll:D.default.bool,parentSelector:D.default.func,aria:D.default.object,data:D.default.object,role:D.default.string,contentLabel:D.default.string,shouldCloseOnEsc:D.default.bool,overlayRef:D.default.func,contentRef:D.default.func,id:D.default.string,overlayElement:D.default.func,contentElement:D.default.func};nt.defaultProps={isOpen:!1,portalClassName:Ll,bodyOpenClassName:Ol,role:"dialog",ariaHideApp:!0,closeTimeoutMS:0,shouldFocusAfterRender:!0,shouldCloseOnEsc:!0,shouldCloseOnOverlayClick:!0,shouldReturnFocusAfterClose:!0,preventScroll:!1,parentSelector:function(){return document.body},overlayElement:function(t,r){return Rt.default.createElement("div",t,r)},contentElement:function(t,r){return Rt.default.createElement("div",t,r)}};nt.defaultStyles={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255, 255, 255, 0.75)"},content:{position:"absolute",top:"40px",left:"40px",right:"40px",bottom:"40px",border:"1px solid #ccc",background:"#fff",overflow:"auto",WebkitOverflowScrolling:"touch",borderRadius:"4px",outline:"none",padding:"20px"}};(0,Rl.polyfill)(nt);process.env.NODE_ENV!=="production"&&(nt.setCreateHTMLElement=function(e){return dr=e});He.default=nt;(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var r=He,n=o(r);function o(a){return a&&a.__esModule?a:{default:a}}t.default=n.default,e.exports=t.default})(ar,ar.exports);var Nl=ar.exports;const Pl=ln.getDefaultExportFromCjs(Nl);function Al({children:e,contentLabel:t="modal",overlayClassName:r,className:n,withBorder:o=!1,onRequestClose:a,...s}){const i=Q(["fixed right-0 left-0 bottom-0 z-[1000] h-screen overflow-y-auto","overflow-x-hidden md:inset-0 md:h-full bg-foreground/5 backdrop-blur-md",r]),l=Q(["font-inter size-full flex items-end justify-center md:items-center overflow-visible"]),d=Q(["relative max-h-[90%] overflow-hidden rounded-t-[32px]","bg-background animate-slide-in shadow-card opacity-0 pt-6","md:rounded-[32px] md:max-w-[90%]",{"border border-surface-lo":o},n]);return M.jsx(Pl,{closeTimeoutMS:300,className:l,overlayClassName:i,contentLabel:t,onRequestClose:a,...s,children:M.jsxs("div",{className:d,children:[M.jsx(yn,{className:"absolute right-6 top-6",icon:"close",size:"xs",onClick:a}),e]})})}function jl({name:e,label:t,avatar:r,radius:n="full",className:o,...a}){const s=Q("w-[36px] h-[36px] overflow-hidden",{"rounded-none":n==="none","rounded-full":n==="full","rounded-md":n==="md","rounded-sm":n==="sm"});return M.jsxs("div",{className:Q("flex items-center gap-3",o),...a,children:[M.jsx("div",{className:s,children:r?M.jsx("img",{src:r,alt:"avatar",className:"size-full object-cover"}):M.jsx(Te,{type:"didit",className:"size-full object-cover"})}),M.jsxs("div",{className:"flex flex-col gap-1",children:[M.jsx(ve,{className:"text-foreground",as:"h6",variant:"H6",children:e}),t&&M.jsx(ve,{className:"text-surface-md",as:"span",variant:"Label3",children:t})]})]})}function Bl({label:e,placeholder:t,value:r,disabled:n,className:o,error:a,onValueChange:s=()=>{},...i}){const l=Q(["w-full min-h-[68px] bg-surface-lo pt-[20px] pl-[20px] pr-14","rounded-3xl placeholder:text-sm placeholder:font-normal border-transparent","placeholder:leading-[140%] placeholder:tracking-tight","placeholder:text-surface-mdlo text-sm font-normal leading-[140%] tracking-tight","focus:ring-0 focus:bg-transparent focus:border-foreground",o],{"opacity-80":n,"border-error focus:border-error bg-error/5":a}),d=Q(["flex justify-center align-items-center absolute right-3 top-[26px]","z-20 hover:opacity-80"],{invisible:!r});return M.jsxs("div",{className:"w-full relative",children:[M.jsx(ve,{variant:"StyledLabel",as:"label",className:"absolute left-[22px] top-[12px] text-surface-md truncate w-[85%]",children:e}),M.jsx("input",{className:l,value:r,type:"email",onChange:f=>s(f.target.value),placeholder:t,disabled:n,...i}),M.jsx("button",{className:d,onClick:()=>s(""),children:M.jsx(ve,{variant:"StyledLabel",as:"span",className:"text-[9px] text-surface-md m-0",children:"CLEAR"})}),M.jsx(ve,{variant:"P3",as:"span",className:"text-error mt-1 pl-1 w-full block",children:a})]})}const Il=Ae(["border border-foreground","rounded-3xl","p-2","bg-transparent","flex items-center justify-center"],{variants:{variant:{primary:"bg-primary/10 border-primary/20 text-primary",accent:"bg-accent/10 border-accent/20 text-accent",success:"bg-success/10 border-success/20 text-success",warning:"bg-warning/10 border-warning/20 text-warning",error:"bg-error/10 border-error/20 text-error"}},defaultVariants:{variant:"primary"}});function Fl({label:e,variant:t,className:r,...n}){return M.jsx("div",{className:Q(Il({variant:t,className:r})),...n,children:M.jsx(ve,{className:"text-inherit text-[9px]",variant:"StyledLabel",as:"span",children:e})})}function fr({label:e,children:t,direction:r="top",className:n}){const[o,a]=A.useState(!1),s=A.useRef(null),i=A.useRef(null),l=A.useCallback(()=>{let g=0,p=0;if(s.current&&i.current&&o){const m=s.current.getBoundingClientRect(),x=i.current.getBoundingClientRect();return r==="top"&&(g=(x.height+12)*-1,p=m.width/2-x.width/2),r==="bottom"&&(g=m.height+12,p=m.width/2-x.width/2),r==="left"&&(g=m.height/2-x.height/2,p=(x.width+12)*-1),r==="right"&&(g=m.height/2-x.height/2,p=m.width+12),{top:g,left:p}}return{top:g,left:p}},[r,o]);A.useEffect(()=>{if(s.current&&i.current){const{top:g,left:p}=l();i.current.style.top=`${g}px`,i.current.style.left=`${p}px`}},[l]);const d=Q("absolute z-10 px-3 py-2","bg-surface-hi rounded-xl shadow-sm","transition-opacity duration-300","text-background text-sm",{hidden:!o}),f=Q(["absolute w-3 h-3 bg-surface-hi","transform rotate-45",{hidden:!o,"left-1/2 -translate-x-1/2":r==="top","left-1/2 -translate-x-1/2 -top-1/2 translate-y-full":r==="bottom","translate-y-full -translate-x-1/2 top-0 left-full":r==="left","translate-y-full translate-x-1/2 top-0 right-full":r==="right"}]);return M.jsxs("div",{className:Q("relative inline-flex",n),ref:s,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),children:[t,M.jsxs("div",{ref:i,role:"tooltip",className:d,children:[e,M.jsx("div",{className:f})]})]})}const Dl=Ae(["flex items-center justify-center gap-3 group","bg-surface-ulo py-2 px-3 rounded-3xl text-surface-md"],{variants:{isSecret:{true:"backdrop-blur-md"}},defaultVariants:{isSecret:!1}});function Wl({label:e,value:t,isSecret:r,className:n,onCopy:o,...a}){const[s,i]=A.useState(r),l=A.useCallback(()=>{navigator.clipboard.writeText(t),o==null||o()},[t,o]),d=Q("text-inherit group-hover:text-foreground truncate",{blur:s});return M.jsxs("div",{className:Q(Dl({isSecret:r,className:n})),...a,children:[e&&M.jsx(ve,{className:"text-inherit text-nowrap",variant:"StyledLabel",as:"span",children:e}),M.jsx(ve,{className:d,variant:"P3",as:"p",children:t}),r&&M.jsx(fr,{label:s?"Show":"Hide",children:M.jsx("button",{onClick:()=>i(f=>!f),children:M.jsx(Te,{className:"text-inherit group-hover:text-foreground",type:s?"eye":"eyeSlash",size:"sm"})})}),M.jsx(fr,{label:"Copy",children:M.jsx("button",{onClick:l,children:M.jsx(Te,{className:"text-inherit group-hover:text-foreground",type:"copy",size:"sm"})})})]})}function Vl({id:e,className:t,label:r,checked:n,disabled:o,onToggle:a=()=>{}}){const s=Q(["inline-flex items-center gap-4 cursor-pointer"],t),i=A.useCallback(l=>{a(l.target.checked)},[a]);return M.jsxs("label",{className:s,children:[M.jsx("input",{type:"checkbox",checked:n,onChange:i,id:e,className:"sr-only peer",disabled:o}),M.jsx("div",{className:"relative w-11 h-6 bg-surface-lo peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-background after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border-background after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"}),r&&M.jsx(ve,{as:"span",variant:"P3",className:"text-inheret",children:r})]})}function Hl({label:e,placeholder:t,value:r,disabled:n,className:o,error:a,onValueChange:s=()=>{},...i}){const l=A.useRef(null),[d,f]=A.useState(!1),g=Q(["w-full overflow-hidden min-h-[68px] py-2 pr-2 cursor-pointer","flex items-center gap-2 border-b-[1.5px] border-transparent","focus:bg-transparent focus:border-foreground transition-all duration-300"],{"opacity-80":n,"border-foreground":d,"border-error":a},o),p=Q([" placeholder:text-sm placeholder:font-normal placeholder:leading-[140%]","placeholder:text-surface-mdlo text-sm font-normal leading-[140%]","placeholder:tracking-tight tracking-tight","focus:ring-0 active:border-none bg-transparent border-none transition-all duration-300","p-0 m-0"]),m=Q(["flex justify-center align-items-center z-20 hover:opacity-80 p-[2px]"],{invisible:!r}),x=Q(["rounded-full bg-surface-ulo p-[9px] opacity-70","cursor-pointer hover:opacity-100"],{"opacity-100":d,"bg-error/5":a&&d});return M.jsxs("div",{className:"w-full overflow-hidden",children:[M.jsxs("div",{className:g,onClick:()=>{var v;return(v=l.current)==null?void 0:v.focus()},children:[M.jsx("div",{className:x,children:M.jsx(Te,{type:"search",size:"sm"})}),M.jsxs("div",{className:"flex flex-col gap-[6px] grow overflow-hidden min-w-0",children:[M.jsx(ve,{variant:"StyledLabel",as:"label",className:"text-surface-md cursor-pointer truncate",children:e}),M.jsx("input",{ref:l,onFocus:()=>f(!0),onBlur:()=>f(!1),className:p,value:r,type:"email",onChange:v=>s(v.target.value),placeholder:t,disabled:n,...i})]}),M.jsx("button",{className:m,onClick:()=>s(""),children:M.jsx(Te,{type:"closeCircleBold",size:"sm",className:"text-surface-mdlo"})})]}),M.jsx(ve,{variant:"P3",as:"span",className:"text-error mt-1",children:a})]})}function $l({id:e,className:t,label:r,size:n="md",checked:o,disabled:a,onToggle:s=()=>{}}){const i=Q(["inline-flex items-center gap-4"],t),l=Q(["w-5 h-5 text-primary hover:bg-surface-lo border border-surface-mdlo rounded","focus:ring-transparent focus:ring-0 focus:outline-none",n==="sm"&&"w-4 h-4",n==="lg"&&"w-6 h-6"]),d=A.useCallback(f=>{s(f.target.checked)},[s]);return M.jsxs("div",{className:i,children:[M.jsx("input",{id:e,type:"checkbox",checked:o,className:l,onChange:d,disabled:a}),r&&M.jsx(ve,{as:"label",htmlFor:e,variant:"Label3",className:"text-inheret truncate",children:r})]})}const Ul=typeof window<"u"?A.useLayoutEffect:A.useEffect,zl=typeof window>"u";function ot(e,{defaultValue:t=!1,initializeWithValue:r=!0}={}){function n(i){return zl?t:window.matchMedia(i).matches}const[o,a]=A.useState(()=>r?n(e):t);function s(){a(n(e))}return Ul(()=>{const i=window.matchMedia(e);return s(),i.addListener?i.addListener(s):i.addEventListener("change",s),()=>{i.removeListener?i.removeListener(s):i.removeEventListener("change",s)}},[e]),o}function ql(e={}){return ot(`(min-width: ${et.SM}px)`,e)}function Zl(e={}){return ot(`(min-width: ${et.MD}px)`,e)}function Yl(e={}){return ot(`(min-width: ${et.LG}px)`,e)}function Gl(e={}){return ot(`(min-width: ${et.XL}px)`,e)}function Kl(e={}){return ot(`(min-width: ${et.XXL}px)`,e)}exports.Button=wi;exports.Card=vs;exports.CheckBox=$l;exports.CopyValue=Wl;exports.Icon=Te;exports.IconButton=yn;exports.Input=Bl;exports.MediaQuery=et;exports.Modal=Al;exports.QrCode=gs;exports.SearchInput=Hl;exports.Spinner=vn;exports.StatusLabel=Fl;exports.Text=ve;exports.Toggle=Vl;exports.Tooltip=fr;exports.UserCard=jl;exports.cn=Q;exports.svgOptions=mn;exports.useLgMediaQuery=Yl;exports.useMdMediaQuery=Zl;exports.useMediaQuery=ot;exports.useSmMediaQuery=ql;exports.useXlMediaQuery=Gl;exports.useXxlMediaQuery=Kl;

package/dist/diditui.d.ts

@@ -37,14 +37,15 @@ declare const cardStyles: (props?: ({
     shadow?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function CheckBox({ id, className, label, size, checked, onToggle }: CheckboxProps): JSX_2.Element;
+export declare function CheckBox({ id, className, label, size, checked, disabled, onToggle }: CheckboxProps): JSX_2.Element;
 
 declare interface CheckboxProps {
     id?: string;
     className?: string;
     label?: string;
     size?: 'sm' | 'md' | 'lg';
-    checked: boolean;
+    checked?: boolean;
+    disabled?: boolean;
     onToggle?: (checked: boolean) => void;
 }
 
@@ -212,12 +213,13 @@ declare const textStyles: (props?: ({
     underline?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function Toggle({ onToggle, id, label, checked, className, ...props }: ToggleProps): JSX_2.Element;
+export declare function Toggle({ id, className, label, checked, disabled, onToggle }: ToggleProps): JSX_2.Element;
 
 declare interface ToggleProps {
     id?: string;
     className?: string;
-    checked: boolean;
+    checked?: boolean;
+    disabled?: boolean;
     label?: string;
     onToggle?: (checked: boolean) => void;
 }

package/dist/diditui.js

@@ -6852,13 +6852,13 @@ function Xl({ label: e, value: t, isSecret: r, className: n, onCopy: o, ...a })
     /* @__PURE__ */ R.jsx(dn, { label: "Copy", children: /* @__PURE__ */ R.jsx("button", { onClick: l, children: /* @__PURE__ */ R.jsx(Pe, { className: "text-inherit group-hover:text-foreground", type: "copy", size: "sm" }) }) })
   ] });
 }
-function Ql({ onToggle: e = () => {
-}, id: t, label: r, checked: n, className: o, ...a }) {
-  const s = Q(["inline-flex items-center gap-4 cursor-pointer"], o), i = Lt(
+function Ql({ id: e, className: t, label: r, checked: n, disabled: o, onToggle: a = () => {
+} }) {
+  const s = Q(["inline-flex items-center gap-4 cursor-pointer"], t), i = Lt(
     (l) => {
-      e(l.target.checked);
+      a(l.target.checked);
     },
-    [e]
+    [a]
   );
   return /* @__PURE__ */ R.jsxs("label", { className: s, children: [
     /* @__PURE__ */ R.jsx(
@@ -6867,9 +6867,9 @@ function Ql({ onToggle: e = () => {
         type: "checkbox",
         checked: n,
         onChange: i,
-        id: t,
+        id: e,
         className: "sr-only peer",
-        ...a
+        disabled: o
       }
     ),
     /* @__PURE__ */ R.jsx("div", { className: "relative w-11 h-6 bg-surface-lo peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-background after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border-background after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary" }),
@@ -6960,29 +6960,31 @@ function tc({
   label: r,
   size: n = "md",
   checked: o,
-  onToggle: a = () => {
+  disabled: a,
+  onToggle: s = () => {
   }
 }) {
-  const s = Q(["inline-flex items-center gap-4"], t), i = Q([
+  const i = Q(["inline-flex items-center gap-4"], t), l = Q([
     "w-5 h-5 text-primary hover:bg-surface-lo border border-surface-mdlo rounded",
     "focus:ring-transparent focus:ring-0 focus:outline-none",
     n === "sm" && "w-4 h-4",
     n === "lg" && "w-6 h-6"
-  ]), l = Lt(
-    (d) => {
-      a(d.target.checked);
+  ]), d = Lt(
+    (f) => {
+      s(f.target.checked);
     },
-    [a]
+    [s]
   );
-  return /* @__PURE__ */ R.jsxs("div", { className: s, children: [
+  return /* @__PURE__ */ R.jsxs("div", { className: i, children: [
     /* @__PURE__ */ R.jsx(
       "input",
       {
         id: e,
         type: "checkbox",
         checked: o,
-        className: i,
-        onChange: l
+        className: l,
+        onChange: d,
+        disabled: a
       }
     ),
     r && /* @__PURE__ */ R.jsx(ye, { as: "label", htmlFor: e, variant: "Label3", className: "text-inheret truncate", children: r })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diditui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "files": [
     "dist/**/*",