diditui 1.0.4 → 1.0.5

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=()=>{},label:t,checked:r,className:n,...o}){const a=Q(["inline-flex items-center gap-4 cursor-pointer"],n),s=A.useCallback(i=>{e(i.target.checked)},[e]);return M.jsxs("label",{className:a,children:[M.jsx("input",{type:"checkbox",checked:r,onChange:s,className:"sr-only peer",...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"}),t&&M.jsx(ve,{as:"span",variant:"P3",className:"text-inheret",children:t})]})}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({onToggle:e=()=>{},label:t,checked:r,id:n,className:o,...a}){const s=Q(["inline-flex items-center gap-4"],o),i=Q(["w-4 h-4 text-primary hover:bg-surface-lo border border-surface-mdlo rounded","focus:ring-transparent focus:ring-0 focus:outline-none"]),l=A.useCallback(d=>{e(d.target.checked)},[e]);return M.jsxs("div",{className:s,children:[M.jsx("input",{id:n,type:"checkbox",value:"",checked:r,onChange:l,className:i,...a}),t&&M.jsx(ve,{as:"label",htmlFor:n,variant:"Label3",className:"text-inheret",children:t})]})}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({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,label:t,className:r,size:n="md",onToggle:o=()=>{},...a}){const s=Q(["inline-flex items-center gap-4"],r),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=>{o(d.target.checked)},[o]);return M.jsxs("div",{className:s,children:[M.jsx("input",{id:e,type:"checkbox",value:"",className:i,...a,onChange:l}),t&&M.jsx(ve,{as:"label",htmlFor:e,variant:"Label3",className:"text-inheret truncate",children:t})]})}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

@@ -4,7 +4,6 @@ import { ComponentProps } from 'react';
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { Props as Props_2 } from 'react-modal';
 import { VariantProps } from 'class-variance-authority';
 
 declare type AsProp<C extends default_2.ElementType> = {
@@ -38,10 +37,11 @@ declare const cardStyles: (props?: ({
     shadow?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function CheckBox({ onToggle, label, checked, id, className, ...props }: CheckboxProps): JSX_2.Element;
+export declare function CheckBox({ id, label, className, size, onToggle, ...props }: CheckboxProps): JSX_2.Element;
 
-declare type CheckboxProps = Omit<ComponentProps<'input'>, 'onChange'> & {
+declare type CheckboxProps = Omit<ComponentProps<'input'>, 'onChange' | 'size'> & {
     label?: string;
+    size?: 'sm' | 'md' | 'lg';
     onToggle?: (checked: boolean) => void;
 };
 
@@ -132,9 +132,23 @@ declare type PolymorphicComponentPropsWithRef<C extends default_2.ElementType, P
 
 declare type PolymorphicRef<C extends default_2.ElementType> = default_2.ComponentPropsWithRef<C>['ref'];
 
-declare type Props = Props_2 & {
+declare interface Props {
+    id?: string;
+    testId?: string;
+    className?: string;
+    children: React.ReactNode;
+    isOpen: boolean;
     withBorder?: boolean;
-};
+    contentLabel?: string;
+    overlayClassName?: string;
+    role?: string;
+    shouldCloseOnOverlayClick?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldReturnFocusAfterClose?: boolean;
+    onRequestClose: () => void;
+    onAfterClose?: () => void;
+    onAfterOpen?: () => void;
+}
 
 declare type PropsOf<C extends keyof JSX.IntrinsicElements | default_2.JSXElementConstructor<unknown>> = JSX.LibraryManagedAttributes<C, default_2.ComponentPropsWithoutRef<C>>;
 
@@ -195,12 +209,15 @@ declare const textStyles: (props?: ({
     underline?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare function Toggle({ onToggle, label, checked, className, ...props }: ToggleProps): JSX_2.Element;
+export declare function Toggle({ onToggle, id, label, checked, className, ...props }: ToggleProps): JSX_2.Element;
 
-declare type ToggleProps = Omit<ComponentProps<'input'>, 'onChange'> & {
+declare interface ToggleProps {
+    id?: string;
+    className?: string;
+    checked: boolean;
     label?: string;
     onToggle?: (checked: boolean) => void;
-};
+}
 
 export declare function Tooltip({ label, children, direction, className }: TooltipProps): JSX_2.Element;
 

package/dist/diditui.js

@@ -6853,26 +6853,27 @@ function Xl({ label: e, value: t, isSecret: r, className: n, onCopy: o, ...a })
   ] });
 }
 function Ql({ onToggle: e = () => {
-}, label: t, checked: r, className: n, ...o }) {
-  const a = Q(["inline-flex items-center gap-4 cursor-pointer"], n), s = Lt(
-    (i) => {
-      e(i.target.checked);
+}, id: t, label: r, checked: n, className: o, ...a }) {
+  const s = Q(["inline-flex items-center gap-4 cursor-pointer"], o), i = Lt(
+    (l) => {
+      e(l.target.checked);
     },
     [e]
   );
-  return /* @__PURE__ */ R.jsxs("label", { className: a, children: [
+  return /* @__PURE__ */ R.jsxs("label", { className: s, children: [
     /* @__PURE__ */ R.jsx(
       "input",
       {
         type: "checkbox",
-        checked: r,
-        onChange: s,
+        checked: n,
+        onChange: i,
+        id: t,
         className: "sr-only peer",
-        ...o
+        ...a
       }
     ),
     /* @__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" }),
-    t && /* @__PURE__ */ R.jsx(ye, { as: "span", variant: "P3", className: "text-inheret", children: t })
+    r && /* @__PURE__ */ R.jsx(ye, { as: "span", variant: "P3", className: "text-inheret", children: r })
   ] });
 }
 function ec({
@@ -6953,31 +6954,39 @@ function ec({
     /* @__PURE__ */ R.jsx(ye, { variant: "P3", as: "span", className: "text-error mt-1", children: a })
   ] });
 }
-function tc({ onToggle: e = () => {
-}, label: t, checked: r, id: n, className: o, ...a }) {
-  const s = Q(["inline-flex items-center gap-4"], o), i = Q([
-    "w-4 h-4 text-primary hover:bg-surface-lo border border-surface-mdlo rounded",
-    "focus:ring-transparent focus:ring-0 focus:outline-none"
+function tc({
+  id: e,
+  label: t,
+  className: r,
+  size: n = "md",
+  onToggle: o = () => {
+  },
+  ...a
+}) {
+  const s = Q(["inline-flex items-center gap-4"], r), 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 = Lt(
     (d) => {
-      e(d.target.checked);
+      o(d.target.checked);
     },
-    [e]
+    [o]
   );
   return /* @__PURE__ */ R.jsxs("div", { className: s, children: [
     /* @__PURE__ */ R.jsx(
       "input",
       {
-        id: n,
+        id: e,
         type: "checkbox",
         value: "",
-        checked: r,
-        onChange: l,
         className: i,
-        ...a
+        ...a,
+        onChange: l
       }
     ),
-    t && /* @__PURE__ */ R.jsx(ye, { as: "label", htmlFor: n, variant: "Label3", className: "text-inheret", children: t })
+    t && /* @__PURE__ */ R.jsx(ye, { as: "label", htmlFor: e, variant: "Label3", className: "text-inheret truncate", children: t })
   ] });
 }
 const Wl = typeof window < "u" ? yo : fn, Vl = typeof window > "u";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diditui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "files": [
     "dist/**/*",
@@ -102,7 +102,7 @@
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.3.2",
+    "storybook": "^8.3.4",
     "tailwindcss": "^3.4.12",
     "typescript": "^5.6.2",
     "vite": "^5.4.7",