@inntechcorp/it-design 3.1.3 → 3.1.4

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

@@ -1,33 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1 +0,0 @@
-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};