freemium-ui 1.0.210 → 1.0.211

package/lib/index.cjs.js

@@ -1243,11 +1243,11 @@ PERFORMANCE OF THIS SOFTWARE.
       font-size: 12px;
     }
   }
-`,Wm=t.forwardRef(((e,t)=>n.createElement(Um,{checked:e.checked},n.createElement("label",null,n.createElement("input",{ref:t,type:"radio",name:e.name,value:e.value,checked:e.checked,onClick:e.onChange}),n.createElement("div",{className:"radio"}),n.createElement("div",null,e.children))))),Um=tt.div`
+`,Wm=t.forwardRef(((e,t)=>n.createElement(Um,{checked:e.checked},n.createElement("label",null,n.createElement("input",{ref:t,type:"radio",name:e.name,value:e.value,readOnly:e.readOnly,checked:e.checked,onClick:e.onChange}),n.createElement("div",{className:"radio"}),n.createElement("div",null,e.children))))),Um=tt.div`
   ${({theme:{colors:{components:{radio:e},pseudo:t},typography:{body:n}},checked:r})=>`\n  input {\n    clip: rect(0,0,0,0);\n    position : absolute;\n    &:focus {\n        & ~ .radio {\n            box-shadow: ${t.focus} 0px 0px 0px 3px;\n            border-color : transparent;\n        }\n    }\n  }\n  label {\n    display: flex;\n    align-items: center;\n    user-select: none;\n  }\n  .radio {\n    background-color: $fff;\n    border: 1px solid;\n    border-color: ${r?e.backgroundColor:e.borderColor};\n    transition: background-color ease-in 0.2s;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    position: relative;\n    margin-right: 16px;  \n    &:before {  \n        left: 2px;\n        top: 2px;\n        content: '';\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        transition : all ease-in 0.2s;\n        background-color: ${r?e.backgroundColor:"#fff"};\n    }\n    }\n  font-size : ${n.label.fontSize};\n  font-weight : ${n.label.fontWeight};\n  &:hover {\n    .radio {\n      border-color : ${r?e.backgroundColor:e.hoverBorderColor}!important;\n      \n      box-shadow: ${t.hover} 0px 0px 0px 5px!important;\n        }\n    }\n`}
 `,Km=ot(Wm,{checked:!1}),Gm=t.createContext({groupValue:null,groupDisabled:!1,updateGroupValue:null}),qm=tt.div`
   ${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n  flex-grow : 1;\n  flex-basis : 0;\n  margin-right : 12px;\n  margin-top: 12px;\n  label.boxed-label {\n  cursor : ${r?"disabled":"pointer"};\n  opacity : ${r?.6:1};\n  white-space:nowrap;\n  padding : 8px;\n  padding-left : 16px;\n  font-size : 14px;\n  border : 1px solid red;\n  border-radius : 4px;\n  display:flex;\n  align-items:center;\n  justify-content : left;\n  user-select:none;\n  border: 1px solid;\n  border-color: ${a?e.backgroundColor:t.primary.borderColor};\n  text-shadow: ${a?"0 0 0 #000, 0 0 .45px #000":"none"};\n  .hollow {\n    background-color: ${a?e.backgroundColor:"#fff"};\n    border: ${a?"none":"1px solid"};\n    border-color: ${a?e.backgroundColor:e.borderColor};\n    min-width: 16px;\n    min-height: 16px;\n    max-width: 16px;\n    max-height: 16px;\n    border-radius: 50%;\n    margin-right : 8px;\n    display : flex;\n    align-items : center;\n    justify-content : center;\n  }\n  &:focus-within {\n    box-shadow: ${n.focus} 0px 0px 0px 2px;\n    border-color : transparent;\n  }\n  input {\n      position : absolute;\n      clip : rect(0px 0px 0px 0px);\n  }\n  &:hover {\n      ${r?"":`border-color : ${a?e.backgroundColor:t.primary.hoverBorderColor}!important`};\n      box-shadow: ${r?"unset":`${n.hover} 0px 0px 0px 5px!important`}; \n    }\n}\n`}
-`;var Zm=ot((e=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t.useContext(Gm),c=r===e.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return n.createElement(qm,{disabled:e.disabled||a,checked:c,className:e.className},n.createElement("label",{className:"boxed-label"},n.createElement("input",{type:"radio",checked:c,value:e.value,onChange:t=>{t.target.checked&&o(e.value)}}),n.createElement("div",{className:"hollow"},c&&n.createElement(Vn,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),n.createElement("div",null,e.children)))}),{disabled:!1});const Xm=tt.div`
+`;var Zm=ot((e=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t.useContext(Gm),c=r===e.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return n.createElement(qm,{disabled:e.disabled||a,checked:c,className:e.className},n.createElement("label",{className:"boxed-label"},n.createElement("input",{type:"radio",checked:c,readOnly:e.readOnly,value:e.value,onChange:t=>{e.readOnly||t.target.checked&&o(e.value)}}),n.createElement("div",{className:"hollow"},c&&n.createElement(Vn,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),n.createElement("div",null,e.children)))}),{readOnly:!1,disabled:!1});const Xm=tt.div`
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;

package/lib/index.esm.js

@@ -1243,11 +1243,11 @@ PERFORMANCE OF THIS SOFTWARE.
       font-size: 12px;
     }
   }
-`,Cv=t=>{const{placeholder:n,isErrored:r,isRequired:a,errorText:o,name:c,label:i,id:s,disabled:l,displayFormat:h="YYYY-MM-DD hh:mm A",...p}=t;return e.createElement(Vv,{isErrored:r,id:`datetime-picker-container-${s||""}`},i&&e.createElement("label",null,i,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,todayButtonText:"",disabled:l,showActionsBar:!0,highlightCurrentDay:!0,timePrecision:"minute",fill:!0,timePickerProps:{useAmPm:!0},inputProps:{placeholder:n||h,name:c,id:s,disabled:l},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rp(e).toDate():new Date,formatDate:e=>e?rp(e).format(h):""},p)),r&&o&&e.createElement("span",{className:"error"},o))},kv=t=>{const{placeholder:n,name:r,isRequired:a,label:o,isErrored:c,errorText:i,id:s,monthYearLocation:l="start",disabled:h,displayFormat:p="YYYY-MM-DD",...d}=t;return e.createElement(Vv,{isErrored:c,id:`date-picker-container-${s||""}`},o&&e.createElement("label",null,o,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,disabled:h,fill:!0,highlightCurrentDay:!0,inputProps:{placeholder:n||p,name:r,id:s,disabled:h},dayPickerProps:{},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rp(e).toDate():new Date,formatDate:e=>e?rp(e).format(p):""},d)),c&&i&&e.createElement("span",{className:"error"},i))},Lv=t=>{const{placeholder:n,name:r,label:a,id:o,disabled:c,errorText:i,isErrored:s,isRequired:l,...h}=t;return e.createElement(Vv,{isErrored:s,id:`time-picker-container-${o||""}`},a&&e.createElement("label",null,a,l&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(yv,Object.assign({precision:"minute",useAmPm:!0,disabled:c},h)),s&&i&&e.createElement("span",{className:"error"},i))},Ev=s(((t,n)=>e.createElement(Sv,{checked:t.checked},e.createElement("label",null,e.createElement("input",{ref:n,type:"radio",name:t.name,value:t.value,checked:t.checked,onClick:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))))),Sv=Et.div`
+`,Cv=t=>{const{placeholder:n,isErrored:r,isRequired:a,errorText:o,name:c,label:i,id:s,disabled:l,displayFormat:h="YYYY-MM-DD hh:mm A",...p}=t;return e.createElement(Vv,{isErrored:r,id:`datetime-picker-container-${s||""}`},i&&e.createElement("label",null,i,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,todayButtonText:"",disabled:l,showActionsBar:!0,highlightCurrentDay:!0,timePrecision:"minute",fill:!0,timePickerProps:{useAmPm:!0},inputProps:{placeholder:n||h,name:c,id:s,disabled:l},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rp(e).toDate():new Date,formatDate:e=>e?rp(e).format(h):""},p)),r&&o&&e.createElement("span",{className:"error"},o))},kv=t=>{const{placeholder:n,name:r,isRequired:a,label:o,isErrored:c,errorText:i,id:s,monthYearLocation:l="start",disabled:h,displayFormat:p="YYYY-MM-DD",...d}=t;return e.createElement(Vv,{isErrored:c,id:`date-picker-container-${s||""}`},o&&e.createElement("label",null,o,a&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(Hv,Object.assign({canClearSelection:!0,closeOnSelection:!0,disabled:h,fill:!0,highlightCurrentDay:!0,inputProps:{placeholder:n||p,name:r,id:s,disabled:h},dayPickerProps:{},popoverProps:{minimal:!0,placement:"bottom-start",usePortal:!1},parseDate:e=>e?rp(e).toDate():new Date,formatDate:e=>e?rp(e).format(p):""},d)),c&&i&&e.createElement("span",{className:"error"},i))},Lv=t=>{const{placeholder:n,name:r,label:a,id:o,disabled:c,errorText:i,isErrored:s,isRequired:l,...h}=t;return e.createElement(Vv,{isErrored:s,id:`time-picker-container-${o||""}`},a&&e.createElement("label",null,a,l&&e.createElement("span",{className:"isRequired"},"*")),e.createElement(yv,Object.assign({precision:"minute",useAmPm:!0,disabled:c},h)),s&&i&&e.createElement("span",{className:"error"},i))},Ev=s(((t,n)=>e.createElement(Sv,{checked:t.checked},e.createElement("label",null,e.createElement("input",{ref:n,type:"radio",name:t.name,value:t.value,readOnly:t.readOnly,checked:t.checked,onClick:t.onChange}),e.createElement("div",{className:"radio"}),e.createElement("div",null,t.children))))),Sv=Et.div`
   ${({theme:{colors:{components:{radio:e},pseudo:t},typography:{body:n}},checked:r})=>`\n  input {\n    clip: rect(0,0,0,0);\n    position : absolute;\n    &:focus {\n        & ~ .radio {\n            box-shadow: ${t.focus} 0px 0px 0px 3px;\n            border-color : transparent;\n        }\n    }\n  }\n  label {\n    display: flex;\n    align-items: center;\n    user-select: none;\n  }\n  .radio {\n    background-color: $fff;\n    border: 1px solid;\n    border-color: ${r?e.backgroundColor:e.borderColor};\n    transition: background-color ease-in 0.2s;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    position: relative;\n    margin-right: 16px;  \n    &:before {  \n        left: 2px;\n        top: 2px;\n        content: '';\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        transition : all ease-in 0.2s;\n        background-color: ${r?e.backgroundColor:"#fff"};\n    }\n    }\n  font-size : ${n.label.fontSize};\n  font-weight : ${n.label.fontWeight};\n  &:hover {\n    .radio {\n      border-color : ${r?e.backgroundColor:e.hoverBorderColor}!important;\n      \n      box-shadow: ${t.hover} 0px 0px 0px 5px!important;\n        }\n    }\n`}
 `,_v=Dt(Ev,{checked:!1}),Av=d({groupValue:null,groupDisabled:!1,updateGroupValue:null}),Dv=Et.div`
   ${({theme:{colors:{components:{checkbox:e,input:t},pseudo:n}},disabled:r,checked:a})=>`\n  flex-grow : 1;\n  flex-basis : 0;\n  margin-right : 12px;\n  margin-top: 12px;\n  label.boxed-label {\n  cursor : ${r?"disabled":"pointer"};\n  opacity : ${r?.6:1};\n  white-space:nowrap;\n  padding : 8px;\n  padding-left : 16px;\n  font-size : 14px;\n  border : 1px solid red;\n  border-radius : 4px;\n  display:flex;\n  align-items:center;\n  justify-content : left;\n  user-select:none;\n  border: 1px solid;\n  border-color: ${a?e.backgroundColor:t.primary.borderColor};\n  text-shadow: ${a?"0 0 0 #000, 0 0 .45px #000":"none"};\n  .hollow {\n    background-color: ${a?e.backgroundColor:"#fff"};\n    border: ${a?"none":"1px solid"};\n    border-color: ${a?e.backgroundColor:e.borderColor};\n    min-width: 16px;\n    min-height: 16px;\n    max-width: 16px;\n    max-height: 16px;\n    border-radius: 50%;\n    margin-right : 8px;\n    display : flex;\n    align-items : center;\n    justify-content : center;\n  }\n  &:focus-within {\n    box-shadow: ${n.focus} 0px 0px 0px 2px;\n    border-color : transparent;\n  }\n  input {\n      position : absolute;\n      clip : rect(0px 0px 0px 0px);\n  }\n  &:hover {\n      ${r?"":`border-color : ${a?e.backgroundColor:t.primary.hoverBorderColor}!important`};\n      box-shadow: ${r?"unset":`${n.hover} 0px 0px 0px 5px!important`}; \n    }\n}\n`}
-`;var Ov=Dt((n=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t(Av),c=r===n.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return e.createElement(Dv,{disabled:n.disabled||a,checked:c,className:n.className},e.createElement("label",{className:"boxed-label"},e.createElement("input",{type:"radio",checked:c,value:n.value,onChange:e=>{e.target.checked&&o(n.value)}}),e.createElement("div",{className:"hollow"},c&&e.createElement(er,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),e.createElement("div",null,n.children)))}),{disabled:!1});const Iv=Et.div`
+`;var Ov=Dt((n=>{const{groupValue:r,groupDisabled:a,updateGroupValue:o}=t(Av),c=r===n.value;if(null===o)throw new Error("freemium-ui : BoxedRadio should be used inside BoxedRadio.Group");return e.createElement(Dv,{disabled:n.disabled||a,checked:c,className:n.className},e.createElement("label",{className:"boxed-label"},e.createElement("input",{type:"radio",checked:c,readOnly:n.readOnly,value:n.value,onChange:e=>{n.readOnly||e.target.checked&&o(n.value)}}),e.createElement("div",{className:"hollow"},c&&e.createElement(er,{size:"12",viewBox:"-1 -0.5 10 7",glyph:"tick"})),e.createElement("div",null,n.children)))}),{readOnly:!1,disabled:!1});const Iv=Et.div`
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;

package/lib/types/components/BoxedRadio/boxedRadio.d.ts

@@ -1,6 +1,7 @@
 export interface RadioProps {
     children: any;
     value: string;
+    readOnly: boolean;
     disabled: boolean;
     className?: string;
 }

package/lib/types/components/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface RadioButtonProps {
     checked: boolean;
+    readOnly?: boolean;
     children: string;
     name: string;
     value: string | number;
@@ -9,5 +10,5 @@ interface RadioButtonProps {
 }
 export declare const Radio: React.ComponentType<Partial<{
     checked: boolean;
-}> & Pick<RadioButtonProps & React.RefAttributes<HTMLInputElement>, "ref" | "children" | "name" | "value" | "onChange" | "id" | "key">>;
+}> & Pick<RadioButtonProps & React.RefAttributes<HTMLInputElement>, "ref" | "readOnly" | "children" | "name" | "value" | "onChange" | "id" | "key">>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "1.0.210",
+  "version": "1.0.211",
   "description": "React Ui Components for Freemium Apps",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",