freemium-ui 1.0.143 → 1.0.144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.cjs.js
CHANGED
|
@@ -66,7 +66,7 @@ object-assign
|
|
|
66
66
|
user-select: none;
|
|
67
67
|
${({theme:{typography:e,colors:{components:{button:t}}},_type:n,size:r})=>{const{hover:o,color:i,...a}=t[n],s=a&&a.backgroundGradient&&a.backgroundGradient.from?`linear-gradient(180deg, ${a.backgroundGradient.from} 0%, ${a.backgroundGradient.to} 100%)`:"";return{...a,...e.body.secondary,backgroundImage:s,boxShadow:"link"===n?"none":"0 1px 0 0 rgba(24,50,71,0.05)",color:i,height:(e=>e===ci.NORMAL?"34px":e===ci.LARGE?"45px":"auto")(r),fontSize:r===ci.MINI?"12px":"14px"}}}
|
|
68
68
|
${e=>{const{theme:{colors:{components:{button:t},pseudo:n},palette:r},_type:o,btnLoading:i=!1}=e,{hover:a,active:s,disabled:l}=t[o];return`\n &:not([disabled]) {\n &:hover {\n background-color: ${a};\n background-image: none;\n }\n \n &:active {\n outline: 0;\n box-shadow: inset 0px 0px 4px 1px ${Lt(r.E900,.2)};\n background-color: ${s.backgroundColor};\n border: 1px solid ${s.borderColor};\n }\n }\n \n &[disabled] {\n cursor: not-allowed;\n }\n\n &:focus:not(:active) {\n outline: none;\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px ${n.focus};\n }\n \n ${i?"":`&[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background-image: linear-gradient(180deg, ${l.backgroundGradient.from} 0%, ${l.backgroundGradient.to} 100%);\n border: 1px solid ${l.borderColor};\n color: ${l.color};\n }`}`}};
|
|
69
|
-
`,ui=e=>{const{inline:t=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:l,size:c,overrideStyleClassName:d="",loading:u=!1,...p}=e;return n.createElement(di,Object.assign({inline:t,_type:s,disabled:o,className:`${i} ${d}`,type:a,onClick:l,size:c,btnLoading:Boolean(u)},p),u?n.createElement(si.Box,null,n.createElement(li,null)):r)},pi=t.forwardRef(((e,t)=>n.createElement(hi,{checked:e.checked,disabled:e.disabled||!1},n.createElement("label",null,n.createElement("input",{ref:t,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,onChange:e.readOnly?()=>{}:t=>e.onChange(t,t.target.checked)}),n.createElement("div",{className:"checkbox"},e.checked&&n.createElement("span",null,n.createElement(En,{size:"12",viewBox:"0 0 10 10",glyph:"tick"}))),n.createElement("div",null,e.children))))),hi=Qe.div`
|
|
69
|
+
`,ui=e=>{const{inline:t=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:l,size:c,overrideStyleClassName:d="",loading:u=!1,...p}=e;return n.createElement(di,Object.assign({inline:t,_type:s,disabled:o,className:`${i} ${d}`,type:a,onClick:l,size:c,btnLoading:Boolean(u)},p),u?n.createElement(si.Box,null,n.createElement(li,null)):r)},pi=t.forwardRef(((e,t)=>n.createElement(hi,{checked:e.checked,disabled:e.disabled||!1},n.createElement("label",null,n.createElement("input",{ref:t,id:e.id,type:"checkbox",name:e.name,readOnly:e.readOnly,disabled:e.disabled,"aria-disabled":e.disabled,value:e.value,checked:e.checked,onChange:e.readOnly?()=>{}:t=>{e.onChange&&e.onChange(t,t.target.checked)}}),n.createElement("div",{className:"checkbox"},e.checked&&n.createElement("span",null,n.createElement(En,{size:"12",viewBox:"0 0 10 10",glyph:"tick"}))),n.createElement("div",null,e.children))))),hi=Qe.div`
|
|
70
70
|
${({theme:{colors:{components:{checkbox:e},pseudo:t},typography:{body:n}},disabled:r,checked:o})=>`\n font-size : ${n.label.fontSize};\n font-weight : ${n.label.fontWeight};\n input {\n clip : rect(0px 0px 0px 0px);\n width : 1px;\n height : 1px;\n &:focus{\n & ~ .checkbox {\n box-shadow: ${t.focus} 0px 0px 0px 2px;\n border-color : transparent;\n }\n }\n }\n label {\n cursor: ${r?"not-allowed":"inherit"};\n display: flex;\n align-items: center;\n user-select: none;\n opacity : ${r?.5:1};\n }\n .checkbox {\n background-color: ${o?e.backgroundColor:"#fff"};\n border: ${o?"none":"1px solid"};\n border-color: ${o?e.backgroundColor:e.borderColor};\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 10px;\n span {\n left: 2px;\n top : 2px;\n position: absolute;\n }\n &:hover {\n ${r?"":`border-color : ${o?e.backgroundColor:e.hoverBorderColor}!important`};\n box-shadow: ${r?"unset":`${t.hover} 0px 0px 0px 5px!important`}; \n }\n`}
|
|
71
71
|
`,fi=rt(pi,{checked:!1,sizeVariant:"md"});var mi={palette:ot,colors:xn,layout:{gap:"16pt",gapNegative:"-16pt",gapHalf:"8pt",gapHalfNegative:"-8pt",gapQuarter:"4pt",gapQuarterNegative:"-4pt",pageMargin:"16pt",pageWidth:"750pt",pageWidthWithMargin:"782pt",radius:"5px"},typography:{fontFamily:'-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Arial, sans-serif',headings:{h1:{fontSize:"44px",lineHeight:"66px",margin:"0px"},h2:{fontSize:"32px",lineHeight:"48px",margin:"0px"},h3:{fontSize:"24px",lineHeight:"36px",margin:"0px"},h4:{fontSize:"18px",lineHeight:18*1.3+"px",margin:"0px"},h5:{fontSize:"16px",lineHeight:"20.8px",margin:"0px"}},text:{regular:{fontWeight:400},semiBold:{fontWeight:500},bold:{fontWeight:600}},body:{regular:{fontSize:"14px",lineHeight:"18.2px",margin:"0px"},regularBold:{fontSize:"14px",fontWeight:"bold",lineHeight:"21px",margin:"0px"},secondary:{fontSize:"12px"},secondaryBold:{fontSize:"12px",lineHeight:"18px",fontWeight:600},dropdown:{fontSize:"13px",lineHeight:"30px"},label:{fontSize:"12px",lineHeight:"19px",fontWeight:500},requiredLabel:{fontWeight:700,fontSize:"14px",lineHeight:"14px"},errorText:{fontSize:"12px"},anchor:{light:{fontSize:"14px",lineHeight:"17px"},bold:{fontSize:"14px",fontWeight:600,lineHeight:"15px"}},tagText:{fontSize:"12px",lineHeight:"14px",fontWeight:"500",letterSpacing:"0.2px"}},input:{text:{fontSize:"14px",lineHeight:"32px",fontWeight:"500"},textarea:{fontSize:"14px",lineHeight:"1.4",fontWeight:"500"},disabled:{fontWeight:"bold"},label:{fontSize:"12px",lineHeight:"20px",fontWeight:600},error:{fontSize:"12px",lineHeight:"17px"}},table:{header:{fontWeight:800,fontSize:"12px",padding:"16px",lineHeight:"16px"},body:{fontWeight:400,fontSize:"14px",padding:"12px",lineHeight:"20px"}},tabs:{fontSize:"14px",padding:"8px"},menu:{padding:"8px",menuItem:{fontWeight:500,fontSize:"14px",padding:"8px"}}}};const gi=tt`
|
|
72
72
|
html,
|
package/lib/index.esm.js
CHANGED
|
@@ -66,7 +66,7 @@ object-assign
|
|
|
66
66
|
user-select: none;
|
|
67
67
|
${({theme:{typography:e,colors:{components:{button:t}}},_type:n,size:r})=>{const{hover:o,color:i,...a}=t[n],s=a&&a.backgroundGradient&&a.backgroundGradient.from?`linear-gradient(180deg, ${a.backgroundGradient.from} 0%, ${a.backgroundGradient.to} 100%)`:"";return{...a,...e.body.secondary,backgroundImage:s,boxShadow:"link"===n?"none":"0 1px 0 0 rgba(24,50,71,0.05)",color:i,height:(e=>e===Ii.NORMAL?"34px":e===Ii.LARGE?"45px":"auto")(r),fontSize:r===Ii.MINI?"12px":"14px"}}}
|
|
68
68
|
${e=>{const{theme:{colors:{components:{button:t},pseudo:n},palette:r},_type:o,btnLoading:i=!1}=e,{hover:a,active:s,disabled:l}=t[o];return`\n &:not([disabled]) {\n &:hover {\n background-color: ${a};\n background-image: none;\n }\n \n &:active {\n outline: 0;\n box-shadow: inset 0px 0px 4px 1px ${tn(r.E900,.2)};\n background-color: ${s.backgroundColor};\n border: 1px solid ${s.borderColor};\n }\n }\n \n &[disabled] {\n cursor: not-allowed;\n }\n\n &:focus:not(:active) {\n outline: none;\n border: 1px solid transparent;\n box-shadow: 0 0 0 2px ${n.focus};\n }\n \n ${i?"":`&[disabled] {\n -webkit-box-shadow: none;\n box-shadow: none;\n background-image: linear-gradient(180deg, ${l.backgroundGradient.from} 0%, ${l.backgroundGradient.to} 100%);\n border: 1px solid ${l.borderColor};\n color: ${l.color};\n }`}`}};
|
|
69
|
-
`,Ni=t=>{const{inline:n=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:l,size:c,overrideStyleClassName:d="",loading:u=!1,...p}=t;return e.createElement(Oi,Object.assign({inline:n,_type:s,disabled:o,className:`${i} ${d}`,type:a,onClick:l,size:c,btnLoading:Boolean(u)},p),u?e.createElement(Si.Box,null,e.createElement(Ci,null)):r)},Di=l(((t,n)=>e.createElement(Mi,{checked:t.checked,disabled:t.disabled||!1},e.createElement("label",null,e.createElement("input",{ref:n,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,value:t.value,checked:t.checked,onChange:t.readOnly?()=>{}:e=>t.onChange(e,e.target.checked)}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("span",null,e.createElement(Hn,{size:"12",viewBox:"0 0 10 10",glyph:"tick"}))),e.createElement("div",null,t.children))))),Mi=yt.div`
|
|
69
|
+
`,Ni=t=>{const{inline:n=!1,children:r,disabled:o,className:i="",htmlType:a,type:s="primary",onClick:l,size:c,overrideStyleClassName:d="",loading:u=!1,...p}=t;return e.createElement(Oi,Object.assign({inline:n,_type:s,disabled:o,className:`${i} ${d}`,type:a,onClick:l,size:c,btnLoading:Boolean(u)},p),u?e.createElement(Si.Box,null,e.createElement(Ci,null)):r)},Di=l(((t,n)=>e.createElement(Mi,{checked:t.checked,disabled:t.disabled||!1},e.createElement("label",null,e.createElement("input",{ref:n,id:t.id,type:"checkbox",name:t.name,readOnly:t.readOnly,disabled:t.disabled,"aria-disabled":t.disabled,value:t.value,checked:t.checked,onChange:t.readOnly?()=>{}:e=>{t.onChange&&t.onChange(e,e.target.checked)}}),e.createElement("div",{className:"checkbox"},t.checked&&e.createElement("span",null,e.createElement(Hn,{size:"12",viewBox:"0 0 10 10",glyph:"tick"}))),e.createElement("div",null,t.children))))),Mi=yt.div`
|
|
70
70
|
${({theme:{colors:{components:{checkbox:e},pseudo:t},typography:{body:n}},disabled:r,checked:o})=>`\n font-size : ${n.label.fontSize};\n font-weight : ${n.label.fontWeight};\n input {\n clip : rect(0px 0px 0px 0px);\n width : 1px;\n height : 1px;\n &:focus{\n & ~ .checkbox {\n box-shadow: ${t.focus} 0px 0px 0px 2px;\n border-color : transparent;\n }\n }\n }\n label {\n cursor: ${r?"not-allowed":"inherit"};\n display: flex;\n align-items: center;\n user-select: none;\n opacity : ${r?.5:1};\n }\n .checkbox {\n background-color: ${o?e.backgroundColor:"#fff"};\n border: ${o?"none":"1px solid"};\n border-color: ${o?e.backgroundColor:e.borderColor};\n transition: background-color ease-in 0.2s;\n min-width: 14px;\n min-height: 14px;\n border-radius: 2px;\n position: relative;\n margin-right: 10px;\n span {\n left: 2px;\n top : 2px;\n position: absolute;\n }\n &:hover {\n ${r?"":`border-color : ${o?e.backgroundColor:e.hoverBorderColor}!important`};\n box-shadow: ${r?"unset":`${t.hover} 0px 0px 0px 5px!important`}; \n }\n`}
|
|
71
71
|
`,Ti=_t(Di,{checked:!1,sizeVariant:"md"});var Ai={palette:kt,colors:zn,layout:{gap:"16pt",gapNegative:"-16pt",gapHalf:"8pt",gapHalfNegative:"-8pt",gapQuarter:"4pt",gapQuarterNegative:"-4pt",pageMargin:"16pt",pageWidth:"750pt",pageWidthWithMargin:"782pt",radius:"5px"},typography:{fontFamily:'-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Arial, sans-serif',headings:{h1:{fontSize:"44px",lineHeight:"66px",margin:"0px"},h2:{fontSize:"32px",lineHeight:"48px",margin:"0px"},h3:{fontSize:"24px",lineHeight:"36px",margin:"0px"},h4:{fontSize:"18px",lineHeight:18*1.3+"px",margin:"0px"},h5:{fontSize:"16px",lineHeight:"20.8px",margin:"0px"}},text:{regular:{fontWeight:400},semiBold:{fontWeight:500},bold:{fontWeight:600}},body:{regular:{fontSize:"14px",lineHeight:"18.2px",margin:"0px"},regularBold:{fontSize:"14px",fontWeight:"bold",lineHeight:"21px",margin:"0px"},secondary:{fontSize:"12px"},secondaryBold:{fontSize:"12px",lineHeight:"18px",fontWeight:600},dropdown:{fontSize:"13px",lineHeight:"30px"},label:{fontSize:"12px",lineHeight:"19px",fontWeight:500},requiredLabel:{fontWeight:700,fontSize:"14px",lineHeight:"14px"},errorText:{fontSize:"12px"},anchor:{light:{fontSize:"14px",lineHeight:"17px"},bold:{fontSize:"14px",fontWeight:600,lineHeight:"15px"}},tagText:{fontSize:"12px",lineHeight:"14px",fontWeight:"500",letterSpacing:"0.2px"}},input:{text:{fontSize:"14px",lineHeight:"32px",fontWeight:"500"},textarea:{fontSize:"14px",lineHeight:"1.4",fontWeight:"500"},disabled:{fontWeight:"bold"},label:{fontSize:"12px",lineHeight:"20px",fontWeight:600},error:{fontSize:"12px",lineHeight:"17px"}},table:{header:{fontWeight:800,fontSize:"12px",padding:"16px",lineHeight:"16px"},body:{fontWeight:400,fontSize:"14px",padding:"12px",lineHeight:"20px"}},tabs:{fontSize:"14px",padding:"8px"},menu:{padding:"8px",menuItem:{fontWeight:500,fontSize:"14px",padding:"8px"}}}};const Ri=xt`
|
|
72
72
|
html,
|
|
@@ -7,7 +7,7 @@ interface CheckboxProps {
|
|
|
7
7
|
children?: any;
|
|
8
8
|
name: string;
|
|
9
9
|
value?: string | number;
|
|
10
|
-
onChange
|
|
10
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>, checked: boolean) => void;
|
|
11
11
|
id?: string;
|
|
12
12
|
}
|
|
13
13
|
export declare const Checkbox: React.ComponentType<Partial<{
|