@inntechcorp/it-design 3.1.3 → 3.1.4

package/dist/es/button/styled.js

@@ -1,415 +0,0 @@
-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"../index.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

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

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

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

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

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