@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/es/accordion/styled.js

@@ -0,0 +1,15 @@
+import o from"styled-components";const f=o.div`
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: #ffffff;
+  border: 1px solid #f1f1f4;
+  border-radius: 6px;
+
+  overflow: hidden;
+
+  font-size: 14px;
+  line-height: 14px;
+
+`;export{f as Wrapper};

package/dist/es/accordion/submenu/SubMenu.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as t,Children as c,cloneElement as o}from"react";import{useLocation as a,NavLink as s}from"react-router-dom";import d from"../../icons/Arrow.js";import{Wrapper as l,Title as u,Icon as m,Content as h,Arrow as p}from"./styled.js";function g({id:g="",link:f="",icon:x="",title:$="",isSelected:y=!1,useLink:N=!1,onlyOne:b=!1,subMenuLinkArrow:w=!0,end:k=!1,subMenuHeight:H=60,itemHeight:z=40,iconSize:O=10,arrowSize:S=20,onChange:A=()=>{},children:j=null}){const v=a(),[C,L]=i(!1),[M,E]=i(!1),[q,B]=i("0px"),D=r(null);t(()=>{F()&&D.current&&(D.current.style=`${D.current.scrollHeight}px`)},[]),t(()=>{!y&&b&&E(!1)},[y]),t(()=>{M&&A(g),B(M&&D.current?`${D.current.scrollHeight}px`:"0px")},[M]),t(()=>{const e=F();L(e),e&&E(!0)},[v]);const F=()=>{if(!N&&y)return!0;let e=!1;return j&&Array.isArray(j)?j.forEach(n=>{v.pathname.indexOf(n?.props.link)>-1&&(e=!0)}):v.pathname.indexOf(f)>-1&&(e=!0),e},G=()=>{E(!M)},I=()=>n(p,{className:"itd-accordion-menu-header-arrow-icon itd-svg",$width:S,$height:S,$isSingle:!j,$isOpen:M,children:n(d,{width:S,height:S})}),J=()=>{let e="itd-accordion-menu-header-icon";return"string"!=typeof x?e+=" itd-icon":""!==x&&(e+=" itd-icon "+x),e};return e(l,{className:(()=>{let e="itd-accordion-menu-sub-menu";return M&&(e+=" itd-accordion-menu-sub-menu-open"),j||(e+=" itd-accordion-menu-sub-menu-single"),C&&(e+=" itd-accordion-menu-sub-menu-active"),j&&(e+=" itd-accordion-menu-sub-menu-multiple"),e})(),children:[e(u,j?{$height:H,onClick:G,className:"itd-accordion-menu-header",children:[n(m,{className:J(),$size:O,children:"string"==typeof x?null:x}),n("span",{className:"itd-accordion-menu-header-text",children:$}),I()]}:{$height:H,className:"itd-accordion-menu-header",as:s,to:f,end:k,children:[n(m,{className:J(),$size:O,children:"string"==typeof x?null:x}),n("span",{className:"itd-accordion-menu-header-text",children:$}),w?I():null]}),j?n(h,{ref:D,style:{maxHeight:`${q}`},className:"itd-accordion-menu-collapse",children:c.map(j,e=>o(e,{...e.props,itemHeight:z,arrowSize:S,active:v.pathname.indexOf(e.props.link)>-1}))}):null]})}export{g as default};

package/dist/es/accordion/submenu/styled.js

@@ -0,0 +1,214 @@
+import o from"styled-components";const e=o.div`
+
+  &.itd-accordion-menu-sub-menu {
+
+    &:not(:last-child) {
+      .itd-accordion-menu-header {
+        margin-bottom: 1px;
+      }
+    }
+
+    /**
+     * SINGLE
+     */
+    &.itd-accordion-menu-sub-menu-single {
+      .itd-accordion-menu-header svg.itd-accordion-menu-header-arrow-icon.itd-svg svg {
+        transform: rotate(-90deg);
+      }
+    }
+    
+    /**
+     * MULTIPLE
+     */
+    &.itd-accordion-menu-sub-menu-multiple.itd-accordion-menu-sub-menu-open {
+      .itd-accordion-menu-header {
+        background-color: #f1f1f4;
+      }
+      .itd-accordion-menu-header svg.itd-accordion-menu-header-arrow-icon.itd-svg svg {
+        transform: rotate(-180deg);
+      }
+    }
+    
+    /**
+     * SINGLE AND MULTIPLE
+     */
+    &.itd-accordion-menu-sub-menu-single, &.itd-accordion-menu-sub-menu-multiple {
+    
+      /**
+       * DEFAULT
+       */
+      .itd-accordion-menu-header {
+
+        background-color: #f9f9f9;
+        transition: all 0.25s ease-out;
+        text-decoration: none;
+
+        span.itd-accordion-menu-header-text {
+          font-size: 14px;
+          font-weight: 500;
+          color: #071437;
+          transition: all 0.25s ease-out;
+        }
+
+        .itd-icon {
+          margin-right: 8px;
+          color: #071437;
+          transition: all 0.25s ease-out;
+        }
+
+        svg.itd-accordion-menu-header-arrow-icon.itd-svg svg {
+          fill: #071437;
+          transition: all 0.25s ease-out;
+        }
+
+        /* HOVER */
+        &:hover {
+
+          background-color: #f1f1f4;
+
+          span.itd-accordion-menu-header-text {
+            color: #071437;
+          }
+
+          .itd-icon {
+            color: #071437;
+          }
+
+          svg.itd-accordion-menu-header-arrow-icon.itd-svg svg {
+            fill: #071437;
+          }
+          
+        }
+
+      }
+
+      ul.itd-accordion-menu-collapse {
+        
+        li.itd-accordion-menu-content-item {
+          
+          .itd-accordion-menu-content {
+
+            background-color: #f9f9f950;
+            transition: all 0.25s ease-out;
+            
+            span.itd-accordion-menu-content-header-text {
+              font-size: 13px;
+              font-weight: 500;
+              color: #071437;
+              transition: all 0.25s ease-out;
+            }
+
+            .itd-svg svg {
+              transition: all 0.25s ease-out;
+              fill: #071437;
+            }
+
+            /* HOVER */
+            &:hover {
+              background-color: #f1f1f4;
+            }
+
+          }
+          
+        }
+        
+      }
+
+      /**
+       * ACTIVE
+       */
+      &.itd-accordion-menu-sub-menu-active {
+      
+        .itd-accordion-menu-header {
+
+          transition-duration: 0ms;
+          background-color: #071437;
+
+          span.itd-accordion-menu-header-text {
+            color: #ffffff;
+          }
+
+          .itd-icon {
+            color: #ffffff;
+          }
+
+          .itd-svg svg {
+            fill: #ffffff;
+          }
+          
+        }
+
+        ul.itd-accordion-menu-collapse li.itd-accordion-menu-content-item {
+          
+          .itd-accordion-menu-content {
+
+            &.active {
+
+              background-color: #E9F3FF;
+
+              span.itd-accordion-menu-content-header-text {
+                color: #1b84ff;
+              }
+  
+              .itd-svg svg {
+                fill: #1b84ff;
+              }
+
+            }
+
+            
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+`,t=o.div`
+
+  font-size: ${o=>`${o.$size}px`};
+  width: ${o=>`${o.$size}px`};
+  height: ${o=>`${o.$size}px`};
+  
+  display: flex;
+  align-items: center;
+  
+`,i=o.ul`
+
+  overflow: hidden;
+  transition: max-height 0.25s ease-out;
+  margin: 0px;
+  padding: 0px;
+  list-style-type: none;
+
+`,n=o.div`
+
+  transition  : all 0.25s ease-out;
+  margin-left : auto;
+  transform   : ${o=>o.$isSingle?"rotate(-90deg)":o.$isOpen?"rotate(-180deg)":"rotate(0deg)"};
+
+  width: ${o=>o.$width+"px"};
+  height: ${o=>o.$height+"px"};
+
+  svg {
+    width: ${o=>o.$width+"px"};
+    height: ${o=>o.$height+"px"};
+  }
+
+`,a=o.div`
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: ${o=>`${o.$height}px`};
+  padding: 0 20px 0 0;
+  cursor: pointer;
+  
+  span {
+    user-select: none;
+  }
+
+`;export{n as Arrow,i as Content,t as Icon,a as Title,e as Wrapper};

package/dist/es/alert/Description.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{Description as r}from"./styled.js";const t=({children:t,className:s})=>e(r,{className:`itd-alert-description ${s||""}`,children:t});t.displayName="ITD-Alert-Description";export{t as AlertDescription,t as default};

package/dist/es/alert/Title.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{Title as t}from"./styled.js";const l=({children:l,className:r})=>e(t,{className:`itd-alert-title ${r||""}`,children:l});l.displayName="ITD-Alert-Title";export{l as AlertTitle,l as default};

package/dist/es/alert/alert.style.error.js

@@ -0,0 +1,32 @@
+import{css as r}from"styled-components";const e=()=>r`
+
+    &.itd-alert-error {
+
+      &.itd-alert-default {
+        border: 1px solid ${({theme:r})=>r.colorAlertErrorBorder};
+      }
+
+      &.itd-alert-filled {
+        border: 1px solid transparent;
+      }
+
+      &.itd-alert-default, &.itd-alert-filled {
+
+        background: ${({theme:r})=>r.colorAlertErrorBackground};
+
+        .itd-alert-title {
+          color: ${({theme:r})=>r.colorAlertErrorTitle};
+        }
+
+        .itd-alert-description {
+          color: ${({theme:r})=>r.colorAlertErrorText};
+        }
+        
+        svg {
+          color: ${({theme:r})=>r.colorAlertErrorText};
+        }
+        
+      }
+
+    }
+  `;export{e as getErrorAlert};

package/dist/es/alert/alert.style.info.js

@@ -0,0 +1,32 @@
+import{css as t}from"styled-components";const e=()=>t`
+
+    &.itd-alert-info {
+
+      &.itd-alert-default {
+        border: 1px solid ${({theme:t})=>t.colorAlertInfoBorder};
+      }
+
+      &.itd-alert-filled {
+        border: 1px solid transparent;
+      }
+
+      &.itd-alert-default, &.itd-alert-filled {
+
+        background: ${({theme:t})=>t.colorAlertInfoBackground};
+
+        .itd-alert-title {
+          color: ${({theme:t})=>t.colorAlertInfoTitle};
+        }
+
+        .itd-alert-description {
+          color: ${({theme:t})=>t.colorAlertInfoText};
+        }
+        
+        svg {
+          color: ${({theme:t})=>t.colorAlertInfoText};
+        }
+
+      }
+
+    }
+  `;export{e as getInfoAlert};

package/dist/es/alert/alert.style.neutral.js

@@ -0,0 +1,32 @@
+import{css as t}from"styled-components";const e=()=>t`
+
+    &.itd-alert-neutral {
+
+      &.itd-alert-default {
+        background: ${({theme:t})=>t.card};
+        border: 1px solid ${({theme:t})=>t.colorBorder};
+      }
+
+      &.itd-alert-filled {
+        background: ${({theme:t})=>t.colorBackgroundAlt};
+        border: 1px solid transparent;
+      }
+
+      &.itd-alert-default, &.itd-alert-filled {
+
+        .itd-alert-title {
+          color: ${({theme:t})=>t.colorText};
+        }
+
+        .itd-alert-description {
+          color: ${({theme:t})=>t.colorTextMuted};
+        }
+
+        svg {
+          color: ${({theme:t})=>t.colorText};
+        }
+
+      }
+
+    }
+  `;export{e as getNeutralAlert};

package/dist/es/alert/alert.style.success.js

@@ -0,0 +1,32 @@
+import{css as e}from"styled-components";const t=()=>e`
+
+    &.itd-alert-success {
+
+      &.itd-alert-default {
+        border: 1px solid ${({theme:e})=>e.colorAlertSuccessBorder};
+      }
+
+      &.itd-alert-filled {
+        border: 1px solid transparent;
+      }
+
+      &.itd-alert-default, &.itd-alert-filled {
+
+        background: ${({theme:e})=>e.colorAlertSuccessBackground};
+
+        .itd-alert-title {
+          color: ${({theme:e})=>e.colorAlertSuccessTitle};
+        }
+
+        .itd-alert-description {
+          color: ${({theme:e})=>e.colorAlertSuccessText};
+        }
+
+        svg {
+          color: ${({theme:e})=>e.colorAlertSuccessText};
+        }
+
+      }
+
+    }
+  `;export{t as getSuccessAlert};

package/dist/es/alert/alert.style.warning.js

@@ -0,0 +1,32 @@
+import{css as r}from"styled-components";const t=()=>r`
+
+    &.itd-alert-warning {
+
+      &.itd-alert-default {
+        border: 1px solid ${({theme:r})=>r.colorAlertWarningBorder};
+      }
+
+      &.itd-alert-filled {
+        border: 1px solid transparent;
+      }
+
+      &.itd-alert-default, &.itd-alert-filled {
+
+        background: ${({theme:r})=>r.colorAlertWarningBackground};
+
+        .itd-alert-title {
+          color: ${({theme:r})=>r.colorAlertWarningTitle};
+        }
+
+        .itd-alert-description {
+          color: ${({theme:r})=>r.colorAlertWarningText};
+        }
+
+        svg {
+          color: ${({theme:r})=>r.colorAlertWarningText};
+        }
+
+      } 
+      
+    }
+  `;export{t as getWarningAlert};

package/dist/es/alert/index.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ComponentVariants as r,ComponentSizes as i,ComponentSizesSlug as s}from"../enums/enum.js";import l from"../utils/InlineSVGCached.js";import{Wrapper as o}from"./styled.js";import{useMemo as n,Children as a,isValidElement as c}from"react";import{AlertTitle as m}from"./Title.js";import{AlertDescription as d}from"./Description.js";import p from"../node_modules/lucide-react/dist/esm/icons/info.js";const L=({type:L="info",size:f=i.SMALL,variant:u=r.DEFAULT,title:A,className:D,children:E,icon:h})=>{const y=n(()=>{let e="itd-alert";return e+=" itd-alert-"+L,e+=" itd-alert-"+(f===i.X_SMALL?s.X_SMALL:f===i.SMALL?s.SMALL:f===i.MEDIUM?s.MEDIUM:f===i.DEFAULT?s.DEFAULT:f===i.LARGE?s.LARGE:f===i.X_LARGE?s.X_LARGE:s.DEFAULT),e+=" itd-alert-"+u,""!==D&&(e+=" "+D),e},[L,f,u,D]),M=a.toArray(E);let T=h,j=null,I=null,S=[];M.forEach(t=>{if(c(t)){const e=t.type?.displayName||t.type?.name;"ITD-Alert-Title"===e?j=t:"ITD-Alert-Description"===e?I=t:!T&&(e?.includes("Icon")||e?.includes("Lucide")||t.type?.$$typeof?.toString().includes("react.forward_ref")||!j&&!I)?T=t:S.push(t)}else t&&!I&&(I=e(d,{children:t}))}),A&&!j&&(j=e(m,{children:A})),S.length>0&&!I&&(I=e(d,{children:S}));const U=!!T;return t(o,{className:y,"data-has-icon":U?"true":"false",children:[U&&(T?"string"==typeof T?e(l,{src:T}):T:e(p,{size:16})),j,I]})};L.displayName="ITD-Alert";export{d as AlertDescription,m as AlertTitle,L as default};

package/dist/es/alert/styled.js

@@ -0,0 +1,68 @@
+import t from"styled-components";import{ALERT_TOKENS as i}from"../helpers/theme/tokens.js";import{getNeutralAlert as e}from"./alert.style.neutral.js";import{getSuccessAlert as r}from"./alert.style.success.js";import{getErrorAlert as a}from"./alert.style.error.js";import{getInfoAlert as o}from"./alert.style.info.js";import{getWarningAlert as l}from"./alert.style.warning.js";const s=t.div`
+
+  display       : grid;
+  align-items   : flex-start;
+  width         : 100%;
+  position      : relative;
+
+  row-gap               : calc(var(--itd-spacing) * .5);
+  padding-block         : calc(var(--itd-spacing) * 3);
+  padding-inline        : calc(var(--itd-spacing) * 4);
+  border-radius         : calc( ${({theme:t})=>t.borderRadius});
+
+  &:has(>svg) {
+    grid-template-columns : calc(var(--itd-spacing) * 4) 1fr;
+    column-gap            : calc(var(--itd-spacing) * 3);
+  }
+
+  &:not(:has(>svg)) {
+    grid-template-columns : 0 1fr;
+    column-gap            : 0;
+  }
+
+  /* Icon varsa ilk kolonda */
+  >svg {
+    width                 : calc(var(--itd-spacing) * 4);
+    height                : calc(var(--itd-spacing) * 4);
+    --itd-translate-y         : calc(var(--itd-spacing) * .5);
+    translate             : var(--itd-translate-x) var(--itd-translate-y);
+  }
+
+  /* ------------------------ */
+  // NEUTRAL
+  /* ------------------------ */
+  ${()=>e()}
+  
+  /* ------------------------ */
+  // SUCCESS
+  /* ------------------------ */
+  ${()=>r()}
+
+  /* ------------------------ */
+  // INFO
+  /* ------------------------ */
+  ${()=>o()}
+
+  /* ------------------------ */
+  // WARNING
+  /* ------------------------ */
+  ${()=>l()}
+
+  /* ------------------------ */
+  // ERROR
+  /* ------------------------ */
+  ${()=>a()}
+  
+`,n=t.div`
+  font-size         : ${i.title.fontSize};
+  line-height       : ${i.title.lineHeight};
+  font-weight       : ${i.title.fontWeight};
+  color             : ${({theme:t})=>t.colorText};
+  grid-column-start : 2;
+`,c=t.div`
+  font-size         : ${i.description.fontSize};
+  line-height       : ${i.description.lineHeight};
+  font-weight       : ${i.description.fontWeight};
+  color             : ${({theme:t})=>t.colorTextMuted};
+  grid-column-start : 2;
+`;export{c as Description,n as Title,s as Wrapper};

package/dist/es/alink/index.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{memo as t}from"react";import{NavigationLink as e}from"./styled.js";var o=t(t=>(()=>{const{to:o,children:s,...l}=t;return r(e,{...l,to:o,children:s})})(),(r,t)=>r.to===t.to&&r.className===t.className&&r.style===t.style&&r.children===t.children);export{o as default};

package/dist/es/alink/styled.js

@@ -0,0 +1,5 @@
+import{NavLink as o}from"react-router-dom";import t from"styled-components";const r=t(o)`
+
+  text-decoration: none;
+  
+`;export{r as NavigationLink};

package/dist/es/back-top/index.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{useState as t,useEffect as e}from"react";import{Wrapper as r,Show as n}from"./styled.js";import i from"../icons/BackToTop.js";function c(c){const{children:s=null}=c,[l,d]=t(!1);e(()=>(document.addEventListener("scroll",m),()=>{document.removeEventListener("scroll",m)}),[]);const m=()=>{d(document.body.scrollTop>window.innerHeight)};return o(r,{className:"itd-back-to-top",children:o(n,{onClick:()=>{window.scrollTo({top:0,behavior:"smooth"})},$show:l,children:s||o(i,{width:30,height:30})})})}export{c as default};

package/dist/es/back-top/styled.js

@@ -0,0 +1,25 @@
+import i,{keyframes as o}from"styled-components";const s=i.div`
+  position: fixed;
+  bottom: 80px;
+  right: 30px;
+  visibility: hidden;
+  `,t=i.a`
+
+  visibility: ${i=>i.$show?"visible":"hidden"};
+  animation: ${i=>i.$show?n:"none"} 0.5s;
+
+  display: block;
+  transition: fill .3s ease-out;
+  cursor: pointer;
+  fill: #ffffff80;
+
+  &:hover {
+    fill: #3396fb;
+  }
+  
+  `,n=o`
+  0% { transform: scale(.2) }
+  50% { transform: scale(1.1) }
+  75% { transform: scale(0.9) }
+  100% { transform: scale(1) }
+`;export{t as Show,s as Wrapper};

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

@@ -0,0 +1,38 @@
+import{css as t}from"styled-components";const o=()=>t`
+    &.itd-button-circle {
+
+      border-radius: 100%;
+
+      /* X-SMALL */
+      &.itd-button-xs {
+        width: 24px;
+      }
+
+      /* SMALL */
+      &.itd-button-sm {
+        width: 28px;
+      }
+
+      /* MEDIUM */
+      &.itd-button-md {
+        width: 32px;
+      }
+
+      /* LARGE */
+      &.itd-button-lg {
+        width: 44px;
+      }
+
+      /* X-LARGE */
+      &.itd-button-xlg {
+        width: 46px;
+      }
+
+      /* DEFAULT */
+      &:not(&.itd-button-xs):not(&.itd-button-sm):not(&.itd-button-md):not(&.itd-button-lg):not(&.itd-button-xlg)
+      {
+        width: 40px;
+      }
+
+    }
+  `;export{o as getCircle};

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

@@ -0,0 +1,44 @@
+import{css as r}from"styled-components";const o=()=>r`
+
+    &.itd-button-default {
+
+      box-shadow        : ${({theme:r})=>r.boxShadow};
+      background-color  : ${({theme:r})=>r.primary};
+      border            : 1px solid transparent;
+
+      span, div.icon svg{
+        color : ${({theme:r})=>r.primaryForeground};
+      }
+
+      &:hover, &.active {
+        background-color: ${({theme:r})=>r.primaryHover};
+      }
+
+      &.itd-button-selected {
+        
+        border: 2px solid #3598FE;
+
+        span {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+        
+        span, div.icon svg {
+          color: ${({theme:r})=>r.primaryForeground};
+        }
+
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: ${({theme:r})=>r.primaryForeground} transparent transparent;
+        }
+      }
+      
+    }
+  `;export{o as getDefaultButton};

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

@@ -0,0 +1,49 @@
+import{css as o}from"styled-components";const r=()=>o`
+
+    &.itd-button-filled {
+
+      background-color: #e9f3ff;
+      border: transparent;
+
+      span, div.icon svg {
+        color: #1b84ff;
+      }
+
+      &:hover, &.active {
+        background-color: #1b84ff;
+        span, div.icon svg {
+          color: #ffffff;
+        }
+      }
+
+      &.itd-button-selected {
+        
+        border: transparent;
+
+        span, div.icon svg {
+          color: #3598FE;
+          font-weight: 600;
+          margin: -1px;
+        }
+
+      }
+
+      &[disabled] {
+
+        background-color: #f9f9f9;
+        border: transparent;
+
+        span, div.icon svg {
+          color: #07143790;
+        }
+        
+      }
+
+      .itd-spin-spinner {
+        >div>div {
+          border-color: #1b84ff transparent transparent;
+        }
+      }
+      
+    }
+  `;export{r as getFilledButton};