@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/cjs/button/styled.js

@@ -0,0 +1,415 @@
+"use strict";var e=require("styled-components"),t=require("./button.style.default.js"),o=require("./button.style.solid.js"),r=require("./button.style.outline.js"),n=require("./button.style.size.js"),i=require("./button.style.icon.js"),s=require("./button.style.circle.js"),d=require("./button.style.strecth.js"),a=require("./button.style.ghost.js"),c=require("./button.style.link.js"),l=require("./button.style.filled.js"),g=require("../enums/enum.js"),u=require("../helpers/theme/Color.js");require("../helpers/theme/tokens.js"),require("../helpers/theme/cssVariables.js"),require("react/jsx-runtime"),require("../utils/InlineSVGCached.js"),require("../helpers/svg/styles.js"),require("../helpers/datetime/dayjsSetup.js");const b=(t,o)=>"space-between"===o?e.css`
+      margin-right: ${"-7px"};
+    `:"left"===t?e.css`
+        margin-right: ${"7px"};
+      `:e.css`
+        margin-left: ${"7px"};
+      `,f=e.div`
+
+  color: #ffffff;
+  
+  ${({$useIconPadding:e,$contentPosition:t,$justify:o})=>{if(e)return b(t,o)}}
+    
+`,p=e(f)`
+  display         : flex;
+  align-items     : center;
+  justify-content : center;
+
+  div {
+    display         : flex;
+    align-items     : center;
+    justify-content : center;
+  }
+`,v=e.div`
+
+  ${({$singleIcon:e,$contentPosition:t,$justify:o})=>{if(!e)return b(t,o)}}
+  
+`,$=e.div`
+
+  width   : 20px;
+  height  : 20px;
+
+  ${({$contentPosition:e,$justify:t})=>b(e,t)}
+
+`,m=e.span`
+
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;  /* 5px - Icon ve text arası gap */
+  
+  ${({$loading:t})=>"true"===t&&e.css`
+      opacity: 0;
+    `}
+
+`,h=e.css`
+
+  display           : flex;
+  align-items       : center;
+  position          : relative;
+  cursor            : pointer;
+  justify-content   : ${({$justify:e})=>e};
+  box-sizing        : border-box;
+
+  border-radius     : calc( ${({theme:e})=>e.borderRadius} - 2px);
+  border            : 1px solid transparent;
+  outline           : 0 solid transparent;
+  outline-offset    : ${({theme:e})=>e.ringOffset};
+  
+  transition        : outline 100ms linear,
+                      border ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction},
+                      background-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+
+  span, div.icon svg {
+    
+    transition-property         : color;
+    transition-duration         : ${({theme:e})=>e.transitionDuration};
+    transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+    
+  }
+
+  /* ------------------------ */
+  // STRECTH
+  /* ------------------------ */
+  ${()=>d.getStrecth()}
+  
+  /* ------------------------ */
+  // SIZE
+  /* ------------------------ */
+  ${()=>n.getSize()}
+  
+  /* ------------------------ */
+  // CIRCLE
+  /* ------------------------ */
+  ${()=>s.getCircle()}
+  
+  /* ------------------------ */
+  // ICON
+  /* ------------------------ */
+  ${()=>i.getIcon(f)}
+
+  /* ------------------------ */
+  // DEFAULT
+  /* ------------------------ */
+  ${()=>t.getDefaultButton()}
+
+  /* ------------------------ */
+  // GHOST
+  /* ------------------------ */
+  ${()=>a.getGhostButton()}
+
+  /* ------------------------ */
+  // SOLID
+  /* ------------------------ */
+  ${()=>o.getSolidButton()}
+
+  /* ------------------------ */
+  // FILLED
+  /* ------------------------ */
+  ${()=>l.getFilledButton()}
+
+  /* ------------------------ */
+  // OUTLINE
+  /* ------------------------ */
+  ${()=>r.getOutlineButton()}
+
+  /* ------------------------ */
+  // LINK
+  /* ------------------------ */
+  ${()=>c.getLinkButton()}
+  
+  /* ------------------------ */
+  // PRIMARY
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-primary {
+      background: linear-gradient(-45deg,${({theme:e})=>e.primaryGradientStart},${({theme:e})=>e.primaryGradientEnd});
+      span, div.icon svg {
+        color: #ffffff;
+      }
+      &:hover {
+        background: linear-gradient(-45deg,${({theme:e})=>e.primaryHoverStart},${({theme:e})=>e.primaryHoverEnd});
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &.itd-button-selected {
+        background: linear-gradient(-45deg,${({theme:e})=>e.primaryHoverEnd},${({theme:e})=>e.primaryHoverStart});
+        border: 2px solid ${({theme:e})=>e.buttonSelectedBorder};
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &[disabled] {
+        background: linear-gradient(-45deg,#477db4,#215283);
+        span, div.icon svg {
+          color: ${({theme:e})=>e.buttonDisabledText};
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // SECONDARY
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-secondary {
+      background: linear-gradient(-45deg,#ebebeb,#ffffff);
+      span, div.icon svg {
+        color: #000000;
+      }
+      &:hover {
+        background: linear-gradient(-45deg,#CDCDCD,#ebebeb);
+        span, div.icon svg {
+          color: #000000;
+        }
+      }
+      &.itd-button-selected {
+        background: linear-gradient(-45deg,#d8d8d8,#e2e2e2);
+        border: 2px solid #6CB5FF;
+        span, div.icon svg {
+          color: #000000;
+        }
+      }
+      &[disabled] {
+        background: linear-gradient(-45deg,#CDCDCD,#A7A7A7);
+        span, div.icon svg {
+          color: rgb(0, 0, 0, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // GENERIC
+  /* ------------------------ */
+  ${()=>e.css` 
+    &.itd-button-generic {
+      background-color: ${({theme:e})=>e.buttonGenericBg};
+      span, div.icon svg {
+        color: #ffffff;
+      }
+      &:hover {
+        background: ${({theme:e})=>e.buttonGenericHoverBg};
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &.itd-button-selected {
+        background: ${({theme:e})=>e.buttonSelectedBg};
+        border: 2px solid ${({theme:e})=>e.buttonSelectedBorder};
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &[disabled] {
+        background: ${({theme:e})=>e.buttonDisabledBg};
+        span, div.icon svg {
+          color: rgb(255, 255, 255, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // REQUEST
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-request {
+      background: linear-gradient(90deg, #0BE881 0%, #02B964 99%);
+      span, div.icon svg {
+        color: ${({theme:e})=>e.colorText};
+      }
+      &:hover {
+        background: linear-gradient(90deg, #16E886 0%, #0DD578 99%);
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+      &.itd-button-selected {
+        background: linear-gradient(90deg, #02B964 0%, #0BE881 99%);
+        border: 2px solid #0AE37E;
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+      &[disabled] {
+        background: linear-gradient(90deg, #05B663 0%, #028246 97%);
+        span, div.icon svg {
+          color: rgb(29, 38, 73, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // APPROVE
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-approve {
+      background: linear-gradient(90deg, #FFB142 0%, #D88A1C 100%);
+      span, div.icon svg {
+        color: ${({theme:e})=>e.colorText};
+      }
+      &:hover {
+        background: linear-gradient(90deg, #FFC067 0%, #FFB346 100%);
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+      &.itd-button-selected {
+        background: linear-gradient(90deg, #D88A1C 0%, #FFB142 100%);
+        border: 2px solid #FAAC3D;
+        span, div.icon svg {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+      &[disabled] {
+        background: linear-gradient(90deg, #C88930 0%, #A86A13 98%);
+        span, div.icon svg {
+          color: rgb(29, 38, 73, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // REJECT
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-reject {
+      background: linear-gradient(90deg, #B33939 0%, #971B1B 100%);
+      span, div.icon svg {
+        color: #ffffff;
+      }
+      &:hover {
+        background: linear-gradient(90deg, #DC5050 0%, #C52D2D 100%);
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &.itd-button-selected {
+        background: linear-gradient(90deg, #971B1B 0%, #B33939 100%);
+        border: 2px solid #AD3232;
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+      &[disabled] {
+        background: linear-gradient(90deg, #872626 0%, #731010 100%);
+        span, div.icon svg {
+          color: rgb(29, 38, 73, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // PENDING
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-pending {
+      cursor: default;
+      background-color: #1F2952;
+      span, div.icon svg {
+        color: #ffffff99;
+      }
+      &:hover {
+        background-color: #1F2952;
+        span, div.icon svg {
+          color: #ffffff99;
+        }
+      }
+      &.itd-button-selected {
+        background-color: #1F2952;
+        span, div.icon svg {
+          color: #ffffff99;
+        }
+      }
+      &[disabled] {
+        background-color: #1F2952;
+        span, div.icon svg {
+          color: rgb(29, 38, 73, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // REQUESTED
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-requested {
+      cursor: default;
+      background-color: #1F295280;
+      span, div.icon svg {
+        color: ${({theme:e})=>e.buttonDisabledText};
+      }
+      &:hover {
+        background-color: #1F295280;
+        span, div.icon svg {
+          color: ${({theme:e})=>e.buttonDisabledText};
+        }
+      }
+      &.itd-button-selected {
+        background-color: #1F295280;
+        span, div.icon svg {
+          color: ${({theme:e})=>e.buttonDisabledText};
+        }
+      }
+      &[disabled] {
+        background-color: #1F295280;
+        span, div.icon svg {
+          color: rgb(29, 38, 73, 30);
+        }
+      }
+    }
+  `}
+  
+  /* ------------------------ */
+  // SELECTED
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-selected {
+
+    }
+  `}
+  
+  /* ------------------------ */
+  // DISABLED
+  /* ------------------------ */
+  ${()=>e.css`
+    &[disabled] {
+      pointer-events: none;
+      filter: grayscale(100%);
+      opacity: .5;
+    } 
+  `}
+  
+  /* ------------------------ */
+  // LOADING
+  /* ------------------------ */
+  ${()=>e.css`
+    &.itd-button-loading {
+      pointer-events: none;
+    } 
+  `}
+  
+  /* ------------------------ */
+  // FOCUS VISIBLE
+  /* ------------------------ */
+  ${()=>e.css`
+    &:focus-visible {
+      outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>u.withOpacity(e.primaryScale[e.appearance===g.ThemeAppearances.LIGHT?400:900],.5)};
+    }
+  `}
+
+`,x=e.button`
+  ${h}
+  border: none;
+  background: none;
+  padding: 0;
+`,k=e.a`
+  ${h}
+`,y=e.a`
+  ${h}
+`;exports.A=y,exports.ClickButton=x,exports.Element=p,exports.Hide=m,exports.Icon=f,exports.ImageWrapper=$,exports.Link=k,exports.SVG=v;

package/dist/cjs/calendar/dates.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../helpers/datetime/dayjsSetup.js");var e=require("../_virtual/dayjs.min.js");exports.default=(t,r,s)=>{const a=Number.isInteger(s)&&s>=0&&s<=6?s:0;let u=e.default();Number.isInteger(t)&&Number.isInteger(r)&&(u=u.month(t-1).year(r));const n=u.startOf("month"),d=u.endOf("month"),o=[],l=[],m=[];let Y=null;Y=n;let f=0;for(;Y.day()!==a&&f<7;)Y=Y.subtract(1,"day"),o.push(Y.format("MM/DD/YYYY")),f++;for(Y=n;Y.month()===t-1;)l.push(Y.format("MM/DD/YYYY")),Y=Y.add(1,"day");for(Y=d;o.length+l.length+m.length<42;)Y=Y.add(1,"day"),m.push(Y.format("MM/DD/YYYY"));return[...o.reverse(),...l,...m]};

package/dist/cjs/calendar/day/Day.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),d=require("./styled.js"),r=require("react");exports.default=function({date:a,today:t,current:c,disabled:l,selected:n,handleClick:s,children:i}){const u=r.useMemo(()=>{let e="itd-calendar-day";return t&&(e+=" itd-calendar-day-today"),n&&(e+=" itd-calendar-day-selected"),l&&(e+=" itd-calendar-day-disabled"),c&&(e+=" itd-calendar-day-current"),e},[t,n,l,c]);return e.jsx(d.Wrapper,{className:u,$today:t,$selected:n,$disabled:l,$current:c,onClick:()=>s(a),children:e.jsx("span",{children:i})})};

package/dist/cjs/calendar/day/styled.js

@@ -0,0 +1,91 @@
+"use strict";var e=require("styled-components");const o=e.div`
+
+  position: relative;
+  cursor: pointer;
+  border-radius: 4px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &::before {
+
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    //z-index: 1;
+    height: 30px;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    content: "";
+
+  }
+
+  span {
+
+    font-size: 13px;
+    letter-spacing: -.5;
+    font-weight: 500;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: relative;
+    min-width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50px;
+
+    transition: background-color 0.15s ease-out;
+
+  }
+
+  &:hover {
+
+    span {
+      color: #3598FE;
+      background-color: #0E1531;
+    }
+
+  }
+
+  ${({$today:o})=>o&&e.css`
+      span {
+        border: 1px solid #3598FE80;
+      }
+    `}
+
+  ${({$selected:o})=>o&&e.css`
+      span {
+        color: #3598FE;
+        background-color: #0E1531;
+      }
+    `}
+
+  ${({$current:o})=>o?e.css`
+        span {
+          color: #ffffff;
+        }
+      `:e.css`
+        span {
+          color: #ffffff80;
+        }
+      `}
+
+  ${({$disabled:o})=>o&&e.css`
+      pointer-events: none;
+      
+      &::before {
+        background-color: none;
+        background-color: #0E153180;
+      }
+
+      span {
+        background: 0 0;
+        color: #ffffff40;
+      }
+    `}
+
+`;exports.Wrapper=o;

package/dist/cjs/calendar/header/Header.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),l=require("./styled.js");exports.default=function(n){const{month:d="",year:r="",onPrevYear:s=null,onPrevMonth:c=null,onNextMonth:i=null,onNextYear:t=null,onClickMonth:o=null,onClickYear:x=null,viewMode:h="days",decadeLabel:m=""}=n;return a.useEffect(()=>{},[]),e.jsxs(l.Wrapper,{className:"itd-calendar-header",children:[e.jsx(l.PrevYear,{className:"itd-calendar-prev-year",onClick:s,children:e.jsx("span",{})}),"days"===h&&e.jsx(l.PrevMonth,{className:"itd-calendar-prev-month",onClick:c,children:e.jsx("span",{})}),e.jsxs(l.Middle,{className:"itd-calendar-middle",children:["days"===h&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"itd-calendar-middle-month",onClick:o,children:d}),e.jsx("div",{className:"itd-calendar-middle-year",onClick:x,children:r})]}),"months"===h&&e.jsx("div",{className:"itd-calendar-middle-year",onClick:x,children:r}),"years"===h&&e.jsx("div",{className:"itd-calendar-middle-decade",children:m||r})]}),"days"===h&&e.jsx(l.NextMonth,{className:"itd-calendar-next-month",onClick:i,children:e.jsx("span",{})}),e.jsx(l.NextYear,{className:"itd-calendar-next-year",onClick:t,children:e.jsx("span",{})})]})};

package/dist/cjs/calendar/header/styled.js

@@ -0,0 +1,196 @@
+"use strict";var e=require("styled-components");const t=e.div`
+
+  display: flex;
+  height: 40px;
+
+`,o=e.div`
+
+  flex: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  div {
+
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    
+    transition: color .15s ease-out;
+    color: #ffffff;
+
+    &:nth-child(2) {
+      margin-left: 5px;
+    }
+
+    &:hover {
+      color: #3598FE;
+    }
+  }
+
+`,i=e.a`
+
+  span {
+    transform: rotate(135deg);
+    position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  min-width: 22px;
+
+  transition: color .15s ease-out;
+  color: #ffffff80;
+
+  &:hover {
+    color: #ffffff;
+  }
+  
+  span::before, span::after {
+      
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 0 solid;
+    border-width: 2px 0 0 2px;
+    content: "";
+
+  }
+
+
+`,n=e.a`
+
+  span {
+    transform: rotate(-45deg);
+    position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  min-width: 22px;
+
+  transition: color .15s ease-out;
+  color: #ffffff80;
+
+  &:hover {
+    color: #ffffff;
+  }
+  
+  span::before, span::after {
+      
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 0 solid;
+    border-width: 2px 0 0 2px;
+    content: "";
+
+  }
+
+
+`,r=e.a`
+
+  span {
+    transform: rotate(135deg);
+    position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  min-width: 22px;
+
+  transition: color .15s ease-out;
+  color: #ffffff80;
+
+  &:hover {
+    color: #ffffff;
+  }
+  
+  span::before, span::after {
+      
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 0 solid;
+    border-width: 2px 0 0 2px;
+    content: "";
+
+  }
+
+  span::after {
+    top: 4px;
+    left: 4px;
+  }
+
+`,f=e.a`
+
+  span {
+    transform: rotate(-45deg);
+    position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  flex: none;
+  min-width: 22px;
+
+  transition: color .15s ease-out;
+  color: #ffffff80;
+
+  &:hover {
+    color: #ffffff;
+  }
+  
+  span::before, span::after {
+      
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 0 solid;
+    border-width: 2px 0 0 2px;
+    content: "";
+
+  }
+
+  span::after {
+    top: 4px;
+    left: 4px;
+  }
+
+`;exports.Middle=o,exports.NextMonth=i,exports.NextYear=r,exports.PrevMonth=n,exports.PrevYear=f,exports.Wrapper=t;