@inntechcorp/it-design 2.2.89 → 3.1.0

package/dist/es/button/button.style.ghost.js

@@ -0,0 +1,47 @@
+import{css as o}from"styled-components";const r=()=>o`
+
+    &.itd-button-ghost {
+
+      background-color: transparent;
+      border: 1px solid transparent;
+
+      span, div.icon svg {
+        color: #252f4a;
+      }
+
+      &:hover, &.active {
+        
+        background-color: #f9f9f9;
+
+        span, div.icon svg {
+          color: #1b84ff;
+        }
+
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        span, div.icon svg {
+          color: #0000004D;
+        }
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #071437 transparent transparent;
+        }
+      }
+      
+    }
+  `;export{r as getGhostButton};

package/dist/es/button/button.style.icon.js

@@ -0,0 +1,33 @@
+import{css as t}from"styled-components";const o=o=>t`
+   &.itd-icon {
+     
+     padding: 0 12px 0 12px;
+
+     /* X-SMALL */
+     &.itd-button-xs {
+       ${o} { font-size: 10px; }
+     }
+
+     /* SMALL */
+     &.itd-button-sm {
+       ${o} { font-size: 16px; }
+     }
+
+     /* MEDIUM */
+     &.itd-button-md {
+       ${o} { font-size: 18px; }
+     }
+
+     /* LARGE */
+     &.itd-button-lg {
+       ${o} { font-size: 26px; }
+     }
+
+     /* DEFAULT */
+     &:not(&.itd-button-xs):not(&.itd-button-sm):not(&.itd-button-md):not(&.itd-button-lg):not(&.itd-button-xlg) 
+     {
+       ${o} { font-size: 20px; }
+     }
+     
+   }
+ `;export{o as getIcon};

package/dist/es/button/button.style.link.js

@@ -0,0 +1,45 @@
+import{css as o}from"styled-components";const n=()=>o`
+
+    &.itd-button-link {
+
+      background-color: transparent;
+      border: 1px solid transparent;
+
+      span, div.icon svg {
+        color: #071437;
+      }
+
+      &:hover, &.active {
+
+        span, div.icon svg {
+          color: #1b84ff;
+        }
+
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        span, div.icon svg {
+          color: #071437;
+        }
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #071437 transparent transparent;
+        }
+      }
+      
+    }
+  `;export{n as getLinkButton};

package/dist/es/button/button.style.outline.js

@@ -0,0 +1,49 @@
+import{ThemeAppearances as o}from"../enums/enum.js";import{css as e}from"styled-components";import{withOpacity as r}from"../helpers/theme/Color.js";const t=()=>e`
+
+    &.itd-button-outline {
+
+      box-shadow        : ${({theme:o})=>o.boxShadow};
+      background-color  : ${({theme:e})=>e.appearance===o.LIGHT?e.background:r(e.input,.03)};
+      border            : 1px solid ${({theme:o})=>o.colorBorder};
+
+      span, div.icon svg {
+        color: ${({theme:o})=>o.colorText};
+      }
+
+      &:hover, &.active {
+        
+        background-color: ${({theme:o})=>o.secondary};
+        border-color: ${({theme:o})=>o.colorBorder};
+
+        span, div.icon svg {
+          color: ${({theme:o})=>o.colorText};
+        }
+
+      }
+
+      &:not([disabled]).itd-button-selected {
+        
+        span, div.icon svg {
+          color: ${({theme:o})=>o.colorText};
+        }
+
+      }
+
+      &[disabled] {
+        
+        border: 1px solid ${({theme:o})=>o.colorBorder};
+        
+        span, div.icon svg {
+          color: ${({theme:o})=>o.colorText};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:o})=>o.colorText} transparent transparent;
+        }
+      }
+      
+    }
+  `;export{t as getOutlineButton};

package/dist/es/button/button.style.size.js

@@ -0,0 +1,187 @@
+import{css as i}from"styled-components";import{BUTTON_SIZE_MAP as n}from"../helpers/theme/tokens.js";const e=()=>i`
+    /* X-SMALL */
+    &.itd-button-xs {
+
+      min-width         : ${n.xs.minWidth};
+      min-height        : ${n.xs.minHeight};
+      padding           : ${n.xs.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.xs.spinnerSize};
+          height        : ${n.xs.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.xs.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.xs.fontSize};
+        line-height     : ${n.xs.lineHeight};
+        font-weight     : ${n.xs.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.xs.iconSize.width};
+        height          : ${n.xs.iconSize.height};
+      }
+
+    }
+
+    /* SMALL */
+    &.itd-button-sm {
+
+      min-width         : ${n.sm.minWidth};
+      min-height        : ${n.sm.minHeight};
+      padding           : ${n.sm.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.sm.spinnerSize};
+          height        : ${n.sm.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.sm.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.sm.fontSize};
+        line-height     : ${n.sm.lineHeight};
+        font-weight     : ${n.sm.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.sm.iconSize.width};
+        height          : ${n.sm.iconSize.height};
+      }
+
+    }
+
+    /* MEDIUM */
+    &.itd-button-md {
+
+      min-width         : ${n.md.minWidth};
+      min-height        : ${n.md.minHeight};
+      padding           : ${n.md.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.md.spinnerSize};
+          height        : ${n.md.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.md.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.md.fontSize};
+        line-height     : ${n.md.lineHeight};
+        font-weight     : ${n.md.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.md.iconSize.width};
+        height          : ${n.md.iconSize.height};
+      }
+
+    }
+
+    /* DEFAULT */
+    &.itd-button-df {
+
+      min-width         : ${n.df.minWidth};
+      min-height        : ${n.df.minHeight};
+      padding           : ${n.df.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.df.spinnerSize};
+          height        : ${n.df.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.df.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.df.fontSize};
+        line-height     : ${n.df.lineHeight};
+        font-weight     : ${n.df.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.df.iconSize.width};
+        height          : ${n.df.iconSize.height};
+      }
+
+    }
+
+    /* LARGE */
+    &.itd-button-lg {
+
+      min-width         : ${n.lg.minWidth};
+      min-height        : ${n.lg.minHeight};
+      padding           : ${n.lg.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.lg.spinnerSize};
+          height        : ${n.lg.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.lg.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.lg.fontSize};
+        line-height     : ${n.lg.lineHeight};
+        font-weight     : ${n.lg.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.lg.iconSize.width};
+        height          : ${n.lg.iconSize.height};
+      }
+
+    }
+
+    /* X-LARGE */
+    &.itd-button-xlg {
+
+      min-width         : ${n.xlg.minWidth};
+      min-height        : ${n.xlg.minHeight};
+      padding           : ${n.xlg.padding};
+      
+      .itd-spin-spinner {
+        >div {
+          width         : ${n.xlg.spinnerSize};
+          height        : ${n.xlg.spinnerSize};
+        }
+        >div>div {
+          border-color  : ${({theme:i})=>i.colorBorder} transparent transparent;
+          border-width  : ${n.xlg.spinnerBorder};
+        }
+      }
+
+      span {
+        font-size       : ${n.xlg.fontSize};
+        line-height     : ${n.xlg.lineHeight};
+        font-weight     : ${n.xlg.fontWeight};
+      }
+
+      .icon svg {
+        width           : ${n.xlg.iconSize.width};
+        height          : ${n.xlg.iconSize.height};
+      }
+
+    }
+  `;export{e as getSize};

package/dist/es/button/button.style.solid.js

@@ -0,0 +1,50 @@
+import{css as o}from"styled-components";const r=()=>o`
+
+    &.itd-button-solid {
+
+      background-color: ${({theme:o})=>o.colorBackgroundAltHover};
+      border: transparent;
+
+      span, div.icon svg {
+        color: ${({theme:o})=>o.secondaryForeground};
+      }
+
+      &:hover, &.active {
+        //background-color: #f1f1f4;
+        background-color: ${({theme:o})=>o.secondaryHover};
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForegroundHover};
+        }
+      }
+
+      &.itd-button-selected {
+        
+        border: transparent;
+
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForegroundHover};
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+
+        background-color: ${({theme:o})=>o.secondary};
+        border: transparent;
+
+        span, div.icon svg {
+          color: ${({theme:o})=>o.secondaryForeground};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:o})=>o.secondaryForeground} transparent transparent;
+        }
+      }
+      
+    }
+  `;export{r as getSolidButton};

package/dist/es/button/button.style.strecth.js

@@ -0,0 +1,8 @@
+import{css as t}from"styled-components";const o=()=>t`
+    &.itd-button-stretch {
+      width: 100%;
+    }
+    &:not(&.itd-button-stretch) {
+      width: max-content;
+    }
+  `;export{o as getStrecth};

package/dist/es/button/index.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import n from"../spin/index.js";import{ClickButton as o,Link as s,A as l,Element as r,ImageWrapper as c,Icon as d,SVG as u,Hide as a}from"./styled.js";import{useRef as m,useState as f,useEffect as g,useMemo as p,isValidElement as b}from"react";import h from"../image/index.js";import{isValidURL as j}from"../helpers/url/ValidURL.js";import{NavLink as y}from"react-router-dom";import $ from"../utils/GetIconSizeBySize.js";import{ComponentSizes as N,ComponentXPositions as S}from"../enums/enum.js";import P from"../utils/GetSizeSlugBySize.js";import v from"../utils/InlineSVGCached.js";import z from"../node_modules/uuid/dist/esm-browser/v4.js";const k=({id:k="",disabled:G=!1,loading:I=!1,selected:x=!1,circle:C=!1,strecth:E=!1,justify:V="center",contentPosition:L=S.LEFT,type:B="button",variant:F="default",size:T=N.DEFAULT,state:U=null,icon:_=null,href:w="",target:A="_self",className:D="",children:H=null,onClick:R=null})=>{const q=m(null),[J,K]=f(k);g(()=>{""===k&&K("itd-button-"+z())},[]);const M=()=>I||!_?null:b(_)?t(r,{className:"icon itd-element",$contentPosition:L,$justify:V,$useIconPadding:null!==H&&""!==H,children:_}):"string"==typeof _&&j(_)?t(c,{className:"icon itd-image",src:_,as:h,height:$(T),brokenHeight:$(T),$contentPosition:L,$justify:V}):"string"==typeof _?t(d,{className:"icon itd-icon "+_,$contentPosition:L,$justify:V,$useIconPadding:null!==H&&""!==H}):_ instanceof SVGElement?t(u,{className:"icon itd-svg",$singleIcon:!H,$contentPosition:L,$justify:V,children:t(v,{src:_.toString()})}):null,O=()=>e(i,{children:["left"===L?M():null,I?t(n,{}):null,H?t(a,{$loading:I?"true":"false",children:H}):null,"right"===L?M():null]}),Q=()=>b(_)?"element":"string"==typeof _&&j(_)?"image":"string"==typeof _?"icon":_ instanceof SVGElement?"svg":"",W=()=>{let t={id:J,$loading:"false",$justify:V,$size:P(T),disabled:!1};return I&&(t.$loading="true"),G&&(t.disabled=!0),t},X=p(()=>{let t="itd-button";return t+=" itd-button-"+F,t+=" itd-button-"+P(T),t+=" itd-button-"+B,null===H&&(t+=" itd-button-has-icon"),"statable"===F&&U&&(t+=" itd-button-"+U),"custom"===F&&U&&(t+=" itd-button-"+U),x&&(t+=" itd-button-selected"),E&&(t+=" itd-button-stretch"),C&&(t+=" itd-button-circle"),I&&(t+=" itd-button-loading"),"element"===Q()&&(t+=" itd-element"),"svg"===Q()&&(t+=" itd-svg"),"icon"===Q()&&(t+=" itd-icon"),"image"===Q()&&(t+=" itd-image"),""!==D&&(t+=" "+D),t},[F,T,B,H,x,E,C,I,Q(),D]),Y=t=>{I||R&&R(t)},Z=e=>t(o,{className:X,type:e,...W(),children:O()});return"submit"===B?Z("submit"):"reset"===B?Z("reset"):""!==w?t(s,{className:X,as:y,to:w,target:A,...W(),children:e(i,{children:[M(),t("span",{children:H})]})}):"link"===F?t(l,{className:X,onClick:Y,...W(),children:O()}):t(o,{className:X,onClick:Y,type:"button",ref:q,...W(),children:O()})};export{k as default};