@inntechcorp/it-design 2.2.89 → 3.1.0

package/dist/es/button/styled.js

@@ -0,0 +1,415 @@
+import e,{css as o}from"styled-components";import{getDefaultButton as t}from"./button.style.default.js";import{getSolidButton as n}from"./button.style.solid.js";import{getOutlineButton as r}from"./button.style.outline.js";import{getSize as i}from"./button.style.size.js";import{getIcon as d}from"./button.style.icon.js";import{getCircle as s}from"./button.style.circle.js";import{getStrecth as a}from"./button.style.strecth.js";import{getGhostButton as c}from"./button.style.ghost.js";import{getLinkButton as l}from"./button.style.link.js";import{getFilledButton as g}from"./button.style.filled.js";import{ThemeAppearances as f}from"../enums/enum.js";import{withOpacity as b}from"../helpers/theme/Color.js";import"../helpers/theme/tokens.js";import"../helpers/theme/cssVariables.js";import"react/jsx-runtime";import"../utils/InlineSVGCached.js";import"../helpers/svg/styles.js";import"../helpers/datetime/dayjsSetup.js";const u=(e,t)=>"space-between"===t?o`
+      margin-right: ${"-7px"};
+    `:"left"===e?o`
+        margin-right: ${"7px"};
+      `:o`
+        margin-left: ${"7px"};
+      `,p=e.div`
+
+  color: #ffffff;
+  
+  ${({$useIconPadding:e,$contentPosition:o,$justify:t})=>{if(e)return u(o,t)}}
+    
+`,m=e(p)`
+  display         : flex;
+  align-items     : center;
+  justify-content : center;
+
+  div {
+    display         : flex;
+    align-items     : center;
+    justify-content : center;
+  }
+`,v=e.div`
+
+  ${({$singleIcon:e,$contentPosition:o,$justify:t})=>{if(!e)return u(o,t)}}
+  
+`,$=e.div`
+
+  width   : 20px;
+  height  : 20px;
+
+  ${({$contentPosition:e,$justify:o})=>u(e,o)}
+
+`,h=e.span`
+
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;  /* 5px - Icon ve text arası gap */
+  
+  ${({$loading:e})=>"true"===e&&o`
+      opacity: 0;
+    `}
+
+`,y=o`
+
+  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
+  /* ------------------------ */
+  ${()=>a()}
+  
+  /* ------------------------ */
+  // SIZE
+  /* ------------------------ */
+  ${()=>i()}
+  
+  /* ------------------------ */
+  // CIRCLE
+  /* ------------------------ */
+  ${()=>s()}
+  
+  /* ------------------------ */
+  // ICON
+  /* ------------------------ */
+  ${()=>d(p)}
+
+  /* ------------------------ */
+  // DEFAULT
+  /* ------------------------ */
+  ${()=>t()}
+
+  /* ------------------------ */
+  // GHOST
+  /* ------------------------ */
+  ${()=>c()}
+
+  /* ------------------------ */
+  // SOLID
+  /* ------------------------ */
+  ${()=>n()}
+
+  /* ------------------------ */
+  // FILLED
+  /* ------------------------ */
+  ${()=>g()}
+
+  /* ------------------------ */
+  // OUTLINE
+  /* ------------------------ */
+  ${()=>r()}
+
+  /* ------------------------ */
+  // LINK
+  /* ------------------------ */
+  ${()=>l()}
+  
+  /* ------------------------ */
+  // PRIMARY
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o` 
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.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
+  /* ------------------------ */
+  ${()=>o`
+    &.itd-button-selected {
+
+    }
+  `}
+  
+  /* ------------------------ */
+  // DISABLED
+  /* ------------------------ */
+  ${()=>o`
+    &[disabled] {
+      pointer-events: none;
+      filter: grayscale(100%);
+      opacity: .5;
+    } 
+  `}
+  
+  /* ------------------------ */
+  // LOADING
+  /* ------------------------ */
+  ${()=>o`
+    &.itd-button-loading {
+      pointer-events: none;
+    } 
+  `}
+  
+  /* ------------------------ */
+  // FOCUS VISIBLE
+  /* ------------------------ */
+  ${()=>o`
+    &:focus-visible {
+      outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>b(e.primaryScale[e.appearance===f.LIGHT?400:900],.5)};
+    }
+  `}
+
+`,k=e.button`
+  ${y}
+  border: none;
+  background: none;
+  padding: 0;
+`,x=e.a`
+  ${y}
+`,D=e.a`
+  ${y}
+`;export{D as A,k as ClickButton,m as Element,h as Hide,p as Icon,$ as ImageWrapper,x as Link,v as SVG};

package/dist/es/calendar/dates.js

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

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

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{Wrapper as d}from"./styled.js";import{useMemo as a}from"react";function t({date:t,today:r,current:c,disabled:l,selected:n,handleClick:i,children:s}){const o=a(()=>{let e="itd-calendar-day";return r&&(e+=" itd-calendar-day-today"),n&&(e+=" itd-calendar-day-selected"),l&&(e+=" itd-calendar-day-disabled"),c&&(e+=" itd-calendar-day-current"),e},[r,n,l,c]);return e(d,{className:o,$today:r,$selected:n,$disabled:l,$current:c,onClick:()=>i(t),children:e("span",{children:s})})}export{t as default};

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

@@ -0,0 +1,91 @@
+import o,{css as e}from"styled-components";const t=o.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`
+      span {
+        border: 1px solid #3598FE80;
+      }
+    `}
+
+  ${({$selected:o})=>o&&e`
+      span {
+        color: #3598FE;
+        background-color: #0E1531;
+      }
+    `}
+
+  ${({$current:o})=>o?e`
+        span {
+          color: #ffffff;
+        }
+      `:e`
+        span {
+          color: #ffffff80;
+        }
+      `}
+
+  ${({$disabled:o})=>o&&e`
+      pointer-events: none;
+      
+      &::before {
+        background-color: none;
+        background-color: #0E153180;
+      }
+
+      span {
+        background: 0 0;
+        color: #ffffff40;
+      }
+    `}
+
+`;export{t as Wrapper};

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as a,Fragment as l}from"react/jsx-runtime";import{useEffect as n}from"react";import{Wrapper as d,PrevYear as r,PrevMonth as c,Middle as i,NextMonth as s,NextYear as t}from"./styled.js";function o(o){const{month:m="",year:h="",onPrevYear:N=null,onPrevMonth:y=null,onNextMonth:p=null,onNextYear:u=null,onClickMonth:k=null,onClickYear:v=null,viewMode:C="days",decadeLabel:x=""}=o;n(()=>{},[]);return e(d,{className:"itd-calendar-header",children:[a(r,{className:"itd-calendar-prev-year",onClick:N,children:a("span",{})}),"days"===C&&a(c,{className:"itd-calendar-prev-month",onClick:y,children:a("span",{})}),e(i,{className:"itd-calendar-middle",children:["days"===C&&e(l,{children:[a("div",{className:"itd-calendar-middle-month",onClick:k,children:m}),a("div",{className:"itd-calendar-middle-year",onClick:v,children:h})]}),"months"===C&&a("div",{className:"itd-calendar-middle-year",onClick:v,children:h}),"years"===C&&a("div",{className:"itd-calendar-middle-decade",children:x||h})]}),"days"===C&&a(s,{className:"itd-calendar-next-month",onClick:p,children:a("span",{})}),a(t,{className:"itd-calendar-next-year",onClick:u,children:a("span",{})})]})}export{o as default};

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

@@ -0,0 +1,196 @@
+import e from"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;
+  }
+
+`;export{o as Middle,i as NextMonth,r as NextYear,n as PrevMonth,f as PrevYear,t as Wrapper};