@inntechcorp/it-design 3.1.7 → 3.1.10

package/dist/index.cjs.js

@@ -4342,7 +4342,23 @@
 
   }
 
-  ${({$hasCustomButton:e})=>e&&l.css`
+  /* Disabled state */
+  ${({$disabled:e})=>e&&l.css`
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+    
+    ${Lp} {
+      cursor: not-allowed;
+    }
+    
+    ${Mp} {
+      cursor: not-allowed;
+      background-color: #f5f5f5;
+    }
+  `}
+
+  ${({$hasCustomButton:e,$disabled:t})=>e&&!t&&l.css`
 
     &:hover:not(&.itd-radio-selected) {
       ${Mp} {
@@ -4401,13 +4417,13 @@
   pointer-events: none;
   /* z-index: 1; */
 
-`;function Op({id:e="itd-radio-button-"+fe(),name:t="",value:o="",type:i="default",buttonProps:a={},checked:s=!1,hasError:l=!1,children:d=null,icon:c=null,image:u=null,component:p=null,onChange:f=()=>{}}){const h=()=>{console.log("handleOnChange",o),f&&f(o)};return r.jsxs(Dp,{className:(()=>{let e="itd-radio";return s&&(e+=" itd-radio-selected"),l&&(e+=" itd-radio-error"),e})(),$hasCustomButton:!p,children:[r.jsx("input",{type:"radio",onChange:h,id:e,name:t,value:o,checked:s,"aria-checked":s}),r.jsxs(Lp,{className:(()=>{let e="itd-radio-label";return s&&(e+=" itd-radio-label-selected"),l&&(e+=" itd-radio-label-error"),e})(),htmlFor:e,children:[null!==p?r.jsx("div",{className:"itd-radio-custom-button",children:(()=>{const e={checked:s,value:o,icon:c,children:d};return"childProps"in p?.props&&(e.childProps={...p?.props?.childProps||{},checked:s,value:o,icon:c,children:d}),n.cloneElement(p,e)})()}):"default"===i?r.jsxs(Mp,{className:"itd-radio-default-button",children:[r.jsxs(zp,{className:"itd-radio-content",children:[c?r.jsx(Fp,{className:"itd-icon itd-pre-icon "+c}):u?r.jsx(Mi,{className:"itd-image",src:u,height:"20",brokenHeight:"20"}):null,r.jsx("span",{children:d})]}),s?r.jsx(jp,{className:"itd-icon itd-check-icon it-web-check"}):null]}):"primary"===i?r.jsx(xe,{className:"itd-radio-primary-button",selected:s,onClick:h,...a,children:r.jsx("span",{children:d})}):r.jsx("span",{children:d}),l?r.jsx(Tp,{className:"itd-error-border"}):null]})]})}const Ip=l.div`
+`;function Op({id:e="itd-radio-button-"+fe(),name:t="",value:o="",type:i="default",buttonProps:a={},checked:s=!1,hasError:l=!1,disabled:d=!1,children:c=null,icon:u=null,image:p=null,component:f=null,onChange:h=()=>{}}){const g=()=>{console.log("handleOnChange",o),h&&h(o)};return r.jsxs(Dp,{className:(()=>{let e="itd-radio";return s&&(e+=" itd-radio-selected"),l&&(e+=" itd-radio-error"),e})(),$hasCustomButton:!f,$disabled:d,children:[r.jsx("input",{type:"radio",onChange:g,id:e,name:t,value:o,checked:s,"aria-checked":s,disabled:d}),r.jsxs(Lp,{className:(()=>{let e="itd-radio-label";return s&&(e+=" itd-radio-label-selected"),l&&(e+=" itd-radio-label-error"),d&&(e+=" itd-radio-label-disabled"),e})(),htmlFor:e,children:[null!==f?r.jsx("div",{className:"itd-radio-custom-button",children:(()=>{const e={checked:s,value:o,icon:u,children:c,disabled:d};return"childProps"in f?.props&&(e.childProps={...f?.props?.childProps||{},checked:s,value:o,icon:u,children:c,disabled:d}),n.cloneElement(f,e)})()}):"default"===i?r.jsxs(Mp,{className:"itd-radio-default-button",children:[r.jsxs(zp,{className:"itd-radio-content",children:[u?r.jsx(Fp,{className:"itd-icon itd-pre-icon "+u}):p?r.jsx(Mi,{className:"itd-image",src:p,height:"20",brokenHeight:"20"}):null,r.jsx("span",{children:c})]}),s?r.jsx(jp,{className:"itd-icon itd-check-icon it-web-check"}):null]}):"primary"===i?r.jsx(xe,{className:"itd-radio-primary-button",selected:s,onClick:g,disabled:d,...a,children:r.jsx("span",{children:c})}):r.jsx("span",{children:c}),l?r.jsx(Tp,{className:"itd-error-border"}):null]})]})}const Ip=l.div`
   display               : grid;
   grid-auto-flow        : ${e=>e.$onlyFlow?e.$direction:"column"===e.$direction?"row":"column"};
   grid-template-columns : ${e=>"row"===e.$direction||e.$onlyFlow?"auto":`repeat(${e.$length}, ${e.$autoSize?"auto":"1fr"})`};
   grid-template-rows    : ${e=>"column"===e.$direction||e.$onlyFlow?"auto":`repeat(${e.$length}, ${e.$autoSize?"auto":"1fr"})`};
   grid-gap              : ${e=>e.$gap};
-`,Rp=n.forwardRef(({id:e="itd-radio-group-"+fe(),name:t="",message:o="",type:i="default",defaultValue:a="",value:s="",buttonProps:l={},className:d="",direction:c="column",gap:u="10px",length:p=3,onlyFlow:f=!1,autoSize:h=!1,onChange:g=null,onUpdate:m=null,children:b=null},x)=>{const[v,y]=n.useState(o),[w,A]=n.useState("");n.useEffect(()=>{a&&(A(a),k(a))},[]),n.useEffect(()=>{A(s),k(s)},[s]);const k=(e,t=!0,r=!0)=>{m&&m(e,t,r)};n.useImperativeHandle(x,()=>({reset(e=!0,t=!0){A(a),y(""),k(a,e,t)},setValue(e,t=!0,r=!0){A(e),k(e,t,r)},getValue:()=>w,setError(e){y(e)},clear(){}}));const S=e=>{w!==e&&(A(e),k(e,!0,!1),y(""),g&&g(e))};return r.jsx(Ip,{id:e,className:(()=>{let e="itd-radio-group";return e+=" itd-radio-group-"+i,e+=" itd-radio-group-"+c,v&&(e+=" itd-radio-group-error"),""!==d&&(e+=" "+d),e})(),role:"radiogroup",$direction:c,$length:p,$gap:u,$onlyFlow:f,$autoSize:h,children:(()=>{const e=r=>{if(!n.isValidElement(r))return null;if(r.type===Op)return n.cloneElement(r,{...r.props,checked:w===r.props.value,onChange:S,hasError:""!==v,name:t,type:i,buttonProps:l});if(r.props.children){const t=n.Children.map(r.props.children,e);return n.cloneElement(r,{...r.props,children:t})}return r};return n.Children.map(b,e)})()})});var Pp=n.memo(Rp);const Bp=()=>null;Bp.Group=Pp,Bp.Button=Op;var Vp="itd__label__9437953e",Hp="itd__checkmark__9437953e",Up="itd__check__9437953e",Gp="itd__container__9437953e";Ad(".itd__container__9437953e{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.itd__label__9437953e{align-items:center;display:flex;position:relative}.itd__label__9437953e span{color:#fff9;font-size:12px;font-weight:400;line-height:1.2;margin-left:10px}.itd__checkmark__9437953e{align-items:center;background-color:#1d2649;border-radius:6px;display:flex;height:20px;justify-content:center;transition:background-color .25sn ease-out;width:20px}.itd__checkmark__9437953e svg{fill:#fff;visibility:hidden}.itd__check__9437953e{background-color:#3396fb}.itd__check__9437953e svg{animation:itd__bounce__9437953e .5s;visibility:visible}@keyframes itd__bounce__9437953e{0%{transform:scale(.2) rotate(4deg)}50%{transform:scale(1.2) rotate(-2deg)}75%{transform:scale(.9) rotate(1deg)}to{transform:scale(1) rotate(0deg)}}",{});const Wp=({checked:e=!1,className:t="",children:r=null})=>n.createElement("label",{className:"itd-inline-select-checkbox-label "+t+" "+Gp},n.createElement("div",{className:"itd-inline-select-checkbox-wrapper "+Vp},(()=>{let t="itd-inline-select-checkbox "+Hp;return e&&(t+=" "+Up),n.createElement("div",{className:t},n.createElement(ti,{className:"itd-svg",width:12,height:12}))})(),n.createElement("span",null,r)));var Yp="itd__option__733c7593",qp="itd__selected__733c7593",Xp="itd__single__733c7593";Ad(".itd__option__733c7593{align-items:center;cursor:pointer;display:flex;min-width:-webkit-max-content;min-width:max-content;padding:10px 30px 10px 15px}.itd__option__733c7593:not(:last-child){margin-bottom:1px}.itd__option__733c7593:hover{background-color:rgba(29,38,73,.502)}.itd__selected__733c7593 .itd__option__733c7593 span,.itd__selected__733c7593 .itd__single__733c7593{color:#fff}.itd__option__733c7593 span,.itd__single__733c7593{color:hsla(0,0%,100%,.667);font-size:12px;font-weight:400;line-height:12px;white-space:nowrap}",{});const Kp=({value:e="",checked:t=!1,single:r=!1,onChange:o=null,children:i=null})=>{const[a,s]=n.useState(!1);return n.createElement("li",{onMouseEnter:e=>{s(!0),e.stopPropagation()},onMouseLeave:e=>{s(!1),e.stopPropagation()},className:(()=>{let e="itd-inline-select-item itd-inline-select-item-option";return e+=" "+Yp,t&&(e+=" "+qp),t&&(e+=" itd-inline-select-item-option-selected"),a&&!t&&(e+=" itd-inline-select-item-option-active"),e})(),onClick:r=>{o(e,!t,i),r.stopPropagation()}},r?n.createElement("div",{className:"itd-item-single "+Xp},n.createElement("span",null,i)):n.createElement(Wp,{className:"itd-item-multi",checked:t},i))};var Jp=n.memo(Kp),Zp={menu:"itd__menu__211ba801",bodyWrapper:"itd__bodyWrapper__211ba801",bodyWrapperLong:"itd__bodyWrapperLong__211ba801",menuEnter:"itd__menuEnter__211ba801",menuEnterActive:"itd__menuEnterActive__211ba801",menuExit:"itd__menuExit__211ba801",menuExitActive:"itd__menuExitActive__211ba801",menuEnterActiveLong:"itd__menuEnterActiveLong__211ba801",menuExitActiveLong:"itd__menuExitActiveLong__211ba801",bottom:"itd__bottom__211ba801",left:"itd__left__211ba801"};function Qp(e){const t=n.useRef(null),{value:r=[],children:o=null,onChange:a=null,isOpen:s=!1,single:l=!1,minWidth:d=0}=e,[c,u]=n.useState([]);n.useEffect(()=>{u(r)},[r]);const p=(e,t,r)=>{if(l){const n=[t?e:""];u(n),a(n,r)}else{let n=[];t?n=[...c,e]:(c.splice(c.indexOf(e),1),n=[...c]),u(n),a(n,r)}};return n.createElement(i.CSSTransition,{in:s,timeout:500,classNames:{enter:Zp.menuEnter,enterActive:o.length>5?Zp.menuEnterActiveLong:Zp.menuEnterActive,exit:Zp.menuExit,exitActive:o.length>5?Zp.menuExitActiveLong:Zp.menuExitActive},nodeRef:t,unmountOnExit:!0},n.createElement("div",{className:"itd-inline-select-dropdown "+Zp.menu+" "+Zp.bottom+" "+Zp.left,style:{width:0===d?"max-content":d+"px"},ref:t},n.createElement("div",{className:Zp.spacer}),n.createElement(Sd,{className:"itd-inline-select-dropdown-body "+o.length>5?Zp.bodyWrapperLong:Zp.bodyWrapper},n.createElement("ul",null,n.Children.map(o,e=>n.cloneElement(e,{onChange:p,checked:c.indexOf(e.props.value)>-1,key:e.props.value}))))))}Ad(".itd__menu__211ba801{background-color:#050a20;border-radius:0 5px 5px 5px;box-shadow:0 20px 20px #00000040;overflow:hidden;position:absolute;transform-box:fill-box;transform-origin:50% 1%;transition-timing-function:cubic-bezier(.75,-.5,0,1.25);z-index:2}.itd__menu__211ba801 ul{min-width:-webkit-max-content;min-width:max-content}.itd__bodyWrapperLong__211ba801,.itd__bodyWrapper__211ba801{height:300px}.itd__bottom__211ba801{top:100%}.itd__left__211ba801{left:0}.itd__menuEnter__211ba801{height:50px;opacity:0}.itd__menuEnterActive__211ba801{height:300px;opacity:1;transition:height .15s ease-out}.itd__menuExit__211ba801{opacity:1}.itd__menuExitActive__211ba801{height:300px;opacity:0;transition:height .15s ease-out}.itd__menuEnterActiveLong__211ba801{height:300px;opacity:1;transition:height .15s ease-out}.itd__menuExitActiveLong__211ba801{height:300px;opacity:0;transition:height .15s ease-out}",{});const ef=l.div`
+`,Rp=n.forwardRef(({id:e="itd-radio-group-"+fe(),name:t="",message:o="",type:i="default",defaultValue:a="",value:s="",buttonProps:l={},className:d="",direction:c="column",gap:u="10px",length:p=3,onlyFlow:f=!1,autoSize:h=!1,disabled:g=!1,onChange:m=null,onUpdate:b=null,children:x=null},v)=>{const[y,w]=n.useState(o),[A,k]=n.useState("");n.useEffect(()=>{a&&(k(a),S(a))},[]),n.useEffect(()=>{k(s),S(s)},[s]);const S=(e,t=!0,r=!0)=>{b&&b(e,t,r)};n.useImperativeHandle(v,()=>({reset(e=!0,t=!0){k(a),w(""),S(a,e,t)},setValue(e,t=!0,r=!0){k(e),S(e,t,r)},getValue:()=>A,setError(e){w(e)},clear(){}}));const _=e=>{A!==e&&(k(e),S(e,!0,!1),w(""),m&&m(e))};return r.jsx(Ip,{id:e,className:(()=>{let e="itd-radio-group";return e+=" itd-radio-group-"+i,e+=" itd-radio-group-"+c,g&&(e+=" itd-radio-group-disabled"),y&&(e+=" itd-radio-group-error"),""!==d&&(e+=" "+d),e})(),role:"radiogroup",$direction:c,$length:p,$gap:u,$onlyFlow:f,$autoSize:h,children:(()=>{const e=r=>{if(!n.isValidElement(r))return null;if(r.type===Op)return n.cloneElement(r,{...r.props,checked:A===r.props.value,onChange:_,hasError:""!==y,name:t,type:i,buttonProps:l,disabled:g});if(r.props.children){const t=n.Children.map(r.props.children,e);return n.cloneElement(r,{...r.props,children:t})}return r};return n.Children.map(x,e)})()})});var Pp=n.memo(Rp);const Bp=()=>null;Bp.Group=Pp,Bp.Button=Op;var Vp="itd__label__9437953e",Hp="itd__checkmark__9437953e",Up="itd__check__9437953e",Gp="itd__container__9437953e";Ad(".itd__container__9437953e{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.itd__label__9437953e{align-items:center;display:flex;position:relative}.itd__label__9437953e span{color:#fff9;font-size:12px;font-weight:400;line-height:1.2;margin-left:10px}.itd__checkmark__9437953e{align-items:center;background-color:#1d2649;border-radius:6px;display:flex;height:20px;justify-content:center;transition:background-color .25sn ease-out;width:20px}.itd__checkmark__9437953e svg{fill:#fff;visibility:hidden}.itd__check__9437953e{background-color:#3396fb}.itd__check__9437953e svg{animation:itd__bounce__9437953e .5s;visibility:visible}@keyframes itd__bounce__9437953e{0%{transform:scale(.2) rotate(4deg)}50%{transform:scale(1.2) rotate(-2deg)}75%{transform:scale(.9) rotate(1deg)}to{transform:scale(1) rotate(0deg)}}",{});const Wp=({checked:e=!1,className:t="",children:r=null})=>n.createElement("label",{className:"itd-inline-select-checkbox-label "+t+" "+Gp},n.createElement("div",{className:"itd-inline-select-checkbox-wrapper "+Vp},(()=>{let t="itd-inline-select-checkbox "+Hp;return e&&(t+=" "+Up),n.createElement("div",{className:t},n.createElement(ti,{className:"itd-svg",width:12,height:12}))})(),n.createElement("span",null,r)));var Yp="itd__option__733c7593",qp="itd__selected__733c7593",Xp="itd__single__733c7593";Ad(".itd__option__733c7593{align-items:center;cursor:pointer;display:flex;min-width:-webkit-max-content;min-width:max-content;padding:10px 30px 10px 15px}.itd__option__733c7593:not(:last-child){margin-bottom:1px}.itd__option__733c7593:hover{background-color:rgba(29,38,73,.502)}.itd__selected__733c7593 .itd__option__733c7593 span,.itd__selected__733c7593 .itd__single__733c7593{color:#fff}.itd__option__733c7593 span,.itd__single__733c7593{color:hsla(0,0%,100%,.667);font-size:12px;font-weight:400;line-height:12px;white-space:nowrap}",{});const Kp=({value:e="",checked:t=!1,single:r=!1,onChange:o=null,children:i=null})=>{const[a,s]=n.useState(!1);return n.createElement("li",{onMouseEnter:e=>{s(!0),e.stopPropagation()},onMouseLeave:e=>{s(!1),e.stopPropagation()},className:(()=>{let e="itd-inline-select-item itd-inline-select-item-option";return e+=" "+Yp,t&&(e+=" "+qp),t&&(e+=" itd-inline-select-item-option-selected"),a&&!t&&(e+=" itd-inline-select-item-option-active"),e})(),onClick:r=>{o(e,!t,i),r.stopPropagation()}},r?n.createElement("div",{className:"itd-item-single "+Xp},n.createElement("span",null,i)):n.createElement(Wp,{className:"itd-item-multi",checked:t},i))};var Jp=n.memo(Kp),Zp={menu:"itd__menu__211ba801",bodyWrapper:"itd__bodyWrapper__211ba801",bodyWrapperLong:"itd__bodyWrapperLong__211ba801",menuEnter:"itd__menuEnter__211ba801",menuEnterActive:"itd__menuEnterActive__211ba801",menuExit:"itd__menuExit__211ba801",menuExitActive:"itd__menuExitActive__211ba801",menuEnterActiveLong:"itd__menuEnterActiveLong__211ba801",menuExitActiveLong:"itd__menuExitActiveLong__211ba801",bottom:"itd__bottom__211ba801",left:"itd__left__211ba801"};function Qp(e){const t=n.useRef(null),{value:r=[],children:o=null,onChange:a=null,isOpen:s=!1,single:l=!1,minWidth:d=0}=e,[c,u]=n.useState([]);n.useEffect(()=>{u(r)},[r]);const p=(e,t,r)=>{if(l){const n=[t?e:""];u(n),a(n,r)}else{let n=[];t?n=[...c,e]:(c.splice(c.indexOf(e),1),n=[...c]),u(n),a(n,r)}};return n.createElement(i.CSSTransition,{in:s,timeout:500,classNames:{enter:Zp.menuEnter,enterActive:o.length>5?Zp.menuEnterActiveLong:Zp.menuEnterActive,exit:Zp.menuExit,exitActive:o.length>5?Zp.menuExitActiveLong:Zp.menuExitActive},nodeRef:t,unmountOnExit:!0},n.createElement("div",{className:"itd-inline-select-dropdown "+Zp.menu+" "+Zp.bottom+" "+Zp.left,style:{width:0===d?"max-content":d+"px"},ref:t},n.createElement("div",{className:Zp.spacer}),n.createElement(Sd,{className:"itd-inline-select-dropdown-body "+o.length>5?Zp.bodyWrapperLong:Zp.bodyWrapper},n.createElement("ul",null,n.Children.map(o,e=>n.cloneElement(e,{onChange:p,checked:c.indexOf(e.props.value)>-1,key:e.props.value}))))))}Ad(".itd__menu__211ba801{background-color:#050a20;border-radius:0 5px 5px 5px;box-shadow:0 20px 20px #00000040;overflow:hidden;position:absolute;transform-box:fill-box;transform-origin:50% 1%;transition-timing-function:cubic-bezier(.75,-.5,0,1.25);z-index:2}.itd__menu__211ba801 ul{min-width:-webkit-max-content;min-width:max-content}.itd__bodyWrapperLong__211ba801,.itd__bodyWrapper__211ba801{height:300px}.itd__bottom__211ba801{top:100%}.itd__left__211ba801{left:0}.itd__menuEnter__211ba801{height:50px;opacity:0}.itd__menuEnterActive__211ba801{height:300px;opacity:1;transition:height .15s ease-out}.itd__menuExit__211ba801{opacity:1}.itd__menuExitActive__211ba801{height:300px;opacity:0;transition:height .15s ease-out}.itd__menuEnterActiveLong__211ba801{height:300px;opacity:1;transition:height .15s ease-out}.itd__menuExitActiveLong__211ba801{height:300px;opacity:0;transition:height .15s ease-out}",{});const ef=l.div`
   width: max-content;
 `,tf=l.span`
 

package/dist/index.d.ts

@@ -693,7 +693,7 @@ declare const Notification: {
     useNotifications: () => NotificationContextType;
 };
 
-declare function RadioButton({ id, name, value, type, buttonProps, checked, hasError, children, icon, image, component, onChange }: RadioButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function RadioButton({ id, name, value, type, buttonProps, checked, hasError, disabled, children, icon, image, component, onChange, }: RadioButtonProps$1): react_jsx_runtime.JSX.Element;
 
 declare const _default$3: react__default.NamedExoticComponent<RadioGroupProps$1 & react__default.RefAttributes<ITDImperativeFuncProps$1>>;
 
@@ -995,6 +995,7 @@ type RadioGroupProps = {
     length?: number;
     onlyFlow?: boolean;
     autoSize?: boolean;
+    disabled?: boolean;
     buttonProps?: ButtonProps;
     onChange?: (value: string) => void;
     onUpdate?: (value: string, update: boolean, validation: boolean) => void;
@@ -1008,6 +1009,7 @@ type RadioButtonProps = {
     checked?: boolean;
     hasError?: boolean;
     children?: React.ReactNode;
+    disabled?: boolean;
     buttonProps?: ButtonProps;
     icon?: string | null;
     image?: string | null;