@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/cjs/select/toggle/styled.js

@@ -0,0 +1,88 @@
+"use strict";var e=require("styled-components"),r=require("../../icons/Lock.js"),o=require("../../utils/CommonStyledComponents.js");const t=e.div`
+  
+  display           : flex;
+  align-items       : center;
+  cursor            : ${({$showSearch:e})=>e?"default":"pointer"};
+  box-sizing        : border-box; 
+
+  -webkit-user-select : none;
+  -moz-user-select    : none;
+  -ms-user-select     : none;
+  user-select         : none;
+
+  >svg {
+    width   : auto;
+    height  : 1rem;
+  }
+  
+  .itd-svg > div {
+    display         : flex;
+    align-items     : center;
+    justify-content : center;
+  }
+
+`,i=e.div`
+  
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+
+`,s=e.div`
+  
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+
+  ${({$open:r})=>r&&e.css`
+      transform: rotate(-180deg);
+    `}
+
+`,l=e.div`
+
+`,n=e.div`
+
+  margin: 0;
+  margin-right: 0;
+  float: left;
+  height: 100%;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &::before {
+    padding: 0.25rem;
+    border-radius: 3.125rem;
+  }
+
+`;e(n)`
+
+`,e(n)`
+
+`,e(n)`
+  color: ${({theme:e})=>e.colorText};
+  &::before { background-color: ${({theme:e})=>e.colorError}; }
+  svg circle { fill: ${({theme:e})=>e.colorError}; }
+  svg path { fill: ${({theme:e})=>e.colorErrorText}; }
+`;const c=e(r.default)`
+  
+  fill: ${({theme:e})=>e.colorIconMuted};
+
+`,a=e.div`
+  
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 0.4375rem;
+
+`,d=e.div`
+  
+  display: grid;
+  grid-column-gap: 0.75rem;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-self: flex-end;
+  position: relative;
+
+`;exports.ErrorBorder=o.ErrorBorder,exports.ErrorTooltip=o.ErrorTooltip,exports.Icon=s,exports.LabelWrapper=i,exports.LockIconWrapper=c,exports.PreIcon=l,exports.Prefix=a,exports.Suffix=d,exports.Wrapper=t;

package/dist/cjs/spin/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),r=require("./styled.js");exports.default=({updating:s=!0,opacity:n=!0,size:t=32,className:d="",children:p=null})=>{i.useEffect(()=>{},[]);const l=()=>{let e="itd-spin-spinner";return s&&(e+=" itd-spin-updating"),d&&(e+=" "+d),e},a=()=>e.jsx(r.SpinWrapper,{$size:String(t),className:l(),children:e.jsxs(r.Spinner,{children:[e.jsx("div",{}),e.jsx("div",{}),e.jsx("div",{}),e.jsx("div",{})]})}),u=()=>{let e="itd-spin";return s&&(e+=" itd-spin-updating"),d&&(e+=" "+d),e};return p?e.jsxs(r.Wrapper,{className:u(),children:[e.jsx(r.ChildrenWrapper,{$updating:s,$opacity:n,children:p}),s?a():null]}):s?a():null};

package/dist/cjs/spin/styled.js

@@ -0,0 +1,74 @@
+"use strict";var i=require("styled-components");const t=i.keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`,e=i.div`
+  position: relative;
+  `,n=i.div`
+
+  width   : ${i=>`${i.$size}px`};
+  height  : ${i=>`${i.$size}px`};
+
+  position:absolute;
+
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  `,r=i.div`
+
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  div {
+
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid #000000;
+    border-radius: 50%;
+    animation: ${t} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #000000 transparent transparent transparent;
+    
+  }
+
+  div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  
+  div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  
+  div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  `,o=i.div`
+
+  transition-property: opacity;
+  transition-duration: 500ms;
+  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+  
+  pointer-events  : ${i=>""+(i.$updating?"none":"auto")};
+
+  ${t=>!0===t.$opacity?t.$updating?i.css`
+          opacity : 0.5;
+        `:i.css`
+          opacity : 1;
+        `:i.css`
+        opacity : 1;
+      `}
+
+`;exports.ChildrenWrapper=o,exports.SpinWrapper=n,exports.Spinner=r,exports.Wrapper=e;

package/dist/cjs/status/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./styled.js"),s=require("../utils/GetSizeSlugBySize.js"),r=require("../enums/enum.js"),u=require("react");exports.default=function({variant:i="gray-1",size:a=r.ComponentSizes.DEFAULT,stretch:l=!1,bold:n=!0,children:d="",className:c=""}){const o=u.useMemo(()=>{let e="itd-status";return e+=" itd-status-"+i,e+=" itd-status-"+s.default(a),l&&(e+=" itd-status-stretch"),n&&(e+=" itd-status-bold"),""!==c&&null!==c&&(e+=" "+c),e},[i,a,l,n,c]);return e.jsx(t.Wrapper,{$status:i,$bold:n,className:o,children:e.jsx("span",{children:d})})};

package/dist/cjs/status/styled.js

@@ -0,0 +1,75 @@
+"use strict";var t=require("styled-components");const F={"gray-1":{background:"#F9F9F9",text:"#0714374D"},"gray-2":{background:"#F9F9F9",text:"#585455"},"gray-3":{background:"#F5F5F5",text:"#071437"},black:{background:"#071437",text:"#FFFFFF"},green:{background:"#DFFFEA",text:"#17C653"},purple:{background:"#F5F1FF",text:"#7239EA"},yellow:{background:"#FFF8DD",text:"#F6C000"},red:{background:"#FFEEF3",text:"#F8285A"},brown:{background:"#FFF3F1",text:"#CB6F5B"},lavender:{background:"#FCF3FF",text:"#AB60C0"},blue:{background:"#F1F4FF",text:"#3256D9"},pink:{background:"#FFEEF6",text:"#E25698"},violet:{background:"#F5F1FF",text:"#7239EA"},"filled-brown":{background:"#F5651A",text:"#FFF9F6"},"filled-violet":{background:"#7239EA",text:"#F5F1FF"},"filled-red":{background:"#F8285A",text:"#F7EFF1"},"filled-yellow":{background:"#F6C000",text:"#FBFAF4"},"filled-pink":{background:"#CC79E3",text:"#F7F3F9"},"filled-blue":{background:"#1B84FF",text:"#EDF0F4"},"filled-green":{background:"#17C653",text:"#F5FAF6"},"filled-purple":{background:"#C417C6",text:"#F6F0F6"},"filled-black":{background:"#071437",text:"#F1F3F7"},"filled-lavender":{background:"#AB60C0",text:"#FCF3FF"},"filled-gray-1":{background:"#585455",text:"#F9F9F9"},"filled-gray-2":{background:"#585455",text:"#F9F9F9"},"filled-gray-3":{background:"#071437",text:"#F5F5F5"},orange:{background:"#FFF4E6",text:"#FF8C00"},"filled-orange":{background:"#FF8C00",text:"#FFF4E6"},teal:{background:"#E6FFFA",text:"#2DD4BF"},"filled-teal":{background:"#2DD4BF",text:"#E6FFFA"},indigo:{background:"#EEF2FF",text:"#6366F1"},"filled-indigo":{background:"#6366F1",text:"#EEF2FF"},lime:{background:"#F7FEE7",text:"#65A30D"},"filled-lime":{background:"#65A30D",text:"#F7FEE7"}},e=t.div`
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: max-content;
+  border-radius: 4px;
+
+  >span {
+    text-align: center;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  &.itd-status-stretch {
+    width: 100%;
+  }
+
+  &.itd-status-xs {
+    padding: 4px 8px;
+    span {
+      font-size: 9px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  &.itd-status-sm {
+    padding: 4px 8px;
+    span {
+      font-size: 10px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  &.itd-status-md {
+    padding: 4px 8px;
+    span {
+      font-size: 11px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  &.itd-status-df {
+    padding: 6px 10px;
+    span {
+      font-size: 12px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  &.itd-status-lg {
+    padding: 8px 12px;
+    span {
+      font-size: 12.4px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  &.itd-status-xlg {
+    padding: 10px 14px;
+    span {
+      font-size: 12.6px;
+      font-weight: ${({$bold:t})=>t?600:500};
+    }
+  }
+
+  ${({$status:e})=>{return d=e,t.css`
+      background: ${F[d].background};
+      span {
+        color: ${F[d].text};
+      }
+    `;var d}}
+
+`;exports.Wrapper=e;

package/dist/cjs/switch/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./styled.js"),i=require("../enums/enum.js"),s=require("../node_modules/uuid/dist/esm-browser/v4.js"),a=require("../spin/index.js"),d=require("../utils/CommonStyledComponents.js");const o=t.forwardRef(({id:o="",children:l="",checked:n,variant:c=i.ComponentVariants.DEFAULT,defaultChecked:u=!1,loading:h=!1,disabled:p=!1,onChange:m=null,onUpdate:f=null},b)=>{const[w,v]=t.useState(u||!1),[j,x]=t.useState(""),[g,y]=t.useState(o||`itd-switch-${s.default()}`);t.useEffect(()=>{o&&o!==g&&y(o)},[o]);const k=t.useCallback((e,t=!0,r=!0)=>{f&&("development"===process.env.NODE_ENV?requestAnimationFrame(()=>f(e,t,r)):f(e,t,r))},[f]);t.useEffect(()=>{void 0!==n&&n!==w&&(v(n),k(n))},[n,k]);const q=t.useMemo(()=>({reset(e=!0,t=!0){const r=u||!1;v(r),k(r,e,t)},setValue(e,t=!0,r=!0){v(e),k(e,t,r)},getValue:()=>w,setError(e=""){x(e)},forceUpdate(){k(w)},clear(){v(!1)}}),[w,u,k]);t.useImperativeHandle(b,()=>q,[q]);const C=t.useCallback(e=>{if(h||p)return e.preventDefault(),void e.stopPropagation();const t=!w;v(t),k(t),m&&m(t)},[h,p,w,k,m]),N=t.useMemo(()=>{let e="itd-switch";return e+=" itd-switch-"+c,w&&(e+=" itd-switch-checked"),p&&(e+=" itd-switch-disabled"),j&&(e+=" itd-switch-error"),h&&(e+=" itd-switch-loading"),e},[w,p,h,c,j]),_=`${g}__error`;return e.jsxs(r.Wrapper,{className:N,children:[e.jsx("button",{id:g,type:"button",role:"switch",value:w?"on":"off","aria-checked":w,"aria-invalid":""!==j?"true":void 0,"aria-describedby":""!==j?_:void 0,"data-state":w?"checked":"unchecked","data-disabled":p?"true":"false","data-loading":h&&!p?"true":"false",disabled:p,onClick:C,children:e.jsx(r.Body,{className:"itd-switch-body","data-disabled":p,children:e.jsx(r.Thumb,{className:"itd-switch-thumb",children:e.jsx(a.default,{size:12,updating:h&&!p})})})}),l&&e.jsx("label",{htmlFor:g,children:l}),(()=>{if(""===j||p)return;const t=`${g}__error`;return e.jsx("p",{id:t,role:"alert","aria-live":"assertive",className:"sr-only",style:{position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0},children:j})})(),(()=>{if(""!==j&&!p)return e.jsx(d.ErrorTooltip,{className:"itd-switch-error-tooltip itd-error-tooltip",$position:"top-left",$offsetX:3,"aria-hidden":"true",children:j})})()]})});o.displayName="ITD-Switch",exports.default=o;

package/dist/cjs/switch/styled.js

@@ -0,0 +1,209 @@
+"use strict";var e=require("../enums/enum.js"),r=require("styled-components"),t=require("../helpers/theme/Color.js"),o=require("../helpers/theme/tokens.js"),i=require("../utils/CommonStyledComponents.js");const a=r.span`
+
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50px;
+  transition: 0.3s;
+  background: ${({theme:r})=>r.appearance===e.ThemeAppearances.LIGHT?r.background:r.foreground};
+
+  .itd-spin-spinner {
+
+    width: 12px;
+    height: 12px;
+
+    >div>div {
+      border-width: 2px;
+    }
+
+  }
+  
+`,n=r.div`
+  
+  text-indent: -9999px;
+  height: 20px;
+  width: 34px;
+  //background: ${({theme:e})=>e.primary};
+  display: block;
+  position: relative;
+  //box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
+
+`,d=r.div`
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+
+  button {
+
+    border            : 1px solid transparent;
+    background-color  : transparent;
+    outline-offset    : ${({theme:e})=>e.ringOffset};
+    outline           : 0 solid transparent;
+
+    transition: 
+      border-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction},
+      outline 100ms linear;
+    
+    cursor            : pointer;
+    border-radius     : 28px;
+    height            : 20px;
+    width             : 34px;
+
+  }
+
+  /* Variant: default → borderlı; filled → bordersız */
+  &.itd-switch-default {
+
+    ${a} {
+      top: 2px;
+      left: 2px;
+    }
+
+    button[data-state="checked"] {
+
+      ${a} {
+      
+        left: calc(100% - 4px);
+        transform: translateX(-100%);
+        background: ${({theme:e})=>e.primary};
+
+        .itd-spin-spinner >div>div {
+          border-color: ${({theme:e})=>e.primaryForeground} transparent transparent;
+        }
+        
+      }
+
+      border: 1px solid ${({theme:e})=>e.primary};
+
+    }
+
+    button {
+      box-shadow    : ${({theme:e})=>e.boxShadow};
+    }
+
+    button[data-state="unchecked"] {
+
+      ${a} {
+        background: ${({theme:e})=>t.withOpacity(e.colorText,.5)};
+
+        .itd-spin-spinner >div>div {
+          border-color: ${({theme:e})=>e.background} transparent transparent;
+        }
+      }
+
+      &:hover {
+        border-color: ${({theme:e})=>e.colorBorderHover};
+      }
+
+      &:focus-visible {
+        border-color: ${({theme:r})=>r.primaryScale[r.appearance===e.ThemeAppearances.LIGHT?400:900]};
+      }
+
+      border: 1px solid ${({theme:e})=>e.colorBorder};
+
+    }
+
+
+  }
+
+  &.itd-switch-filled {
+
+    ${a} {
+      top: 2px;
+      left: 2px;
+    }
+
+    button[data-state="checked"] {
+
+      ${a} {
+        
+        left: calc(100% - 4px);
+        transform: translateX(-100%);
+        background: ${({theme:r})=>r.appearance===e.ThemeAppearances.LIGHT?r.background:r.primaryForeground};
+
+        .itd-spin-spinner >div>div {
+          border-color: ${({theme:e})=>e.primary} transparent transparent;
+        }
+
+      }
+
+      background: ${({theme:e})=>e.primary};
+
+    }
+    
+    button[data-state="unchecked"] {
+      
+      ${a} {
+        
+        .itd-spin-spinner >div>div {
+          border-color: ${({theme:e})=>e.secondary} transparent transparent;
+        }
+
+      }
+
+      background: ${({theme:e})=>e.colorBackgroundAltHover};
+
+    }
+
+  }
+
+  &.itd-switch-custom {
+    button[data-state="checked"] {
+
+      ${a} {
+        left: calc(100% - 3px);
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  &&.itd-switch-error:not(.itd-switch-disabled) button {
+    border: 1px solid ${({theme:e})=>e.colorErrorBorder};
+  }
+
+  /* Focus görünürlüğü: checked/unchecked fark etmeksizin göster */
+  button:focus-visible {
+    outline: ${({theme:e})=>e.ringWidth} solid ${({theme:r})=>t.withOpacity(r.primaryScale[r.appearance===e.ThemeAppearances.LIGHT?400:900],.5)};
+  }
+
+  /* Error durumunda outline kırmızı */
+  &.itd-switch-error button:focus-visible {
+    outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>t.withOpacity(e.colorErrorBorder,.5)};
+  }
+
+  // Disabled durumları
+  &.itd-switch-disabled {
+    
+    button[data-state="checked"], button[data-state="unchecked"] {
+      background: ${({theme:e})=>e.colorDisabledBg};
+      border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+      ${a} {
+        background: ${({theme:e})=>e.colorDisabledBorder};
+      }
+    }
+
+    button, label {
+      cursor: not-allowed;
+    }
+
+    label {
+      color: ${({theme:e})=>e.colorDisabledText};
+    }
+    
+  }
+
+  label {
+    color: ${({theme:e})=>e.colorText};
+    font-size: ${o.TYPOGRAPHY_TOKENS.fontSize.df};
+    font-weight: ${o.TYPOGRAPHY_TOKENS.fontWeight.normal};
+    margin-left: ${o.SPACING_TOKENS.gap.sm};
+  }
+
+  &.itd-switch-loading .itd-switch-body {
+    cursor: progress;
+  }
+
+`;exports.ErrorTooltip=i.ErrorTooltip,exports.Body=n,exports.Thumb=a,exports.Wrapper=d;

package/dist/cjs/table/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("./styled.js"),d=require("../utils/GetSizeSlugBySize.js"),r=require("react-i18next"),n=require("../enums/enum.js"),l=require("../icons/NoData.js"),a=require("../button/index.js");const s=t.forwardRef(({columns:s,data:h,cellHeight:o,className:x="",size:c=n.ComponentSizes.DEFAULT,headless:u=!1,bordered:m=!1,dashed:p=!1,noGaps:j=!1,hideGroupButtons:y=!1,getTRProps:b},g)=>{const{t:f}=r.useTranslation("itd"),[w,W]=t.useState(new Set),S=e=>{W(t=>{const i=new Set(t);return i.has(e)?i.delete(e):i.add(e),i})};t.useImperativeHandle(g,()=>({toggleRow:S,expandedRows:w}));const v=(e,t)=>{let i={};return"string"==typeof e.width?i.width=e.width:"number"==typeof e.width?i.minWidth=e.width+"px":i.width="auto",void 0!==e.maxWidth&&("string"==typeof e.maxWidth?i.maxWidth=e.maxWidth:"number"==typeof e.maxWidth&&(i.maxWidth=e.maxWidth+"px")),void 0!==e.minWidth&&("string"==typeof e.minWidth?i.minWidth=e.minWidth:"number"==typeof e.minWidth&&(i.minWidth=e.minWidth+"px")),"td"===t&&("string"==typeof o?i.height=o:"number"==typeof o?i.minHeight=o+"px":i.height="auto"),i},q=()=>{let e=!1;return h?.map(t=>{t.hasOwnProperty("children")&&(e=!0)}),!y&&e},_=(e,t,i)=>b?b(e,t,i):{},k=(e,t,i)=>{let d={"data-index":t+"_"+e,"data-level":t};return t>0&&(0===e&&(d["data-first"]="true"),e===i-1&&(d["data-last"]="true")),d},z=(d,r=0)=>d.map((l,h)=>e.jsxs(t.Fragment,{children:[e.jsxs("tr",{...k(h,r,d?.length),..._(l,h,r),children:[q()?l.children?e.jsx("td",{style:{width:"40px"},children:e.jsx("div",{className:"expand-button",children:e.jsx(a.default,{variant:"filled",size:n.ComponentSizes.X_SMALL,onClick:()=>S(l.key),circle:!0,children:e.jsx("span",{children:w.has(l.key)?"-":"+"})})})}):e.jsx("td",{}):null,s.map(t=>e.jsx("td",{style:v(t,"td"),children:e.jsx(i.Cell,{$overflow:t.overflow,title:String(l[t.dataIndex]),children:t.render?t.render(l[t.dataIndex],l,r):t.dataIndex?String(l[t.dataIndex]):null})},String(t.key)+"_"+h+"_"+r))]}),l.children&&w.has(l.key)&&z(l.children,r+1)]},String(r+"_"+h+"_"+l.key))),I=t.useMemo(e=>{let t="itd-table";return t+=" itd-table-"+d.default(c),u&&(t+=" itd-table-headless"),m&&(t+=" itd-table-bordered"),j&&(t+=" itd-table-no-gaps"),h||(t+=" itd-table-empty"),0===h?.length&&(t+=" itd-table-no-data"),t+=p?" itd-table-dashed":" itd-table-solid",t+=e?" itd-table-inner-table":" itd-table-main-table",""!==x&&(t+=" "+x),t},[c,u,m,j,h,p,x]);return e.jsx(i.Wrapper,{$size:c,$noGaps:j,children:e.jsxs("table",{className:I,children:[(()=>{if(!u)return e.jsx("thead",{children:e.jsxs("tr",{children:[q()&&e.jsx("th",{style:{maxWidth:"40px"}}),s.map(t=>e.jsx("th",{style:v(t,"th"),children:e.jsx(i.RowTitle,{$overflow:t.overflow,children:t.title})},String(t.key)))]})})})(),h?0===h.length?e.jsx("tbody",{children:e.jsx("tr",{children:e.jsx("td",{colSpan:s.length,children:e.jsx(i.EmptyBody,{children:e.jsxs("div",{children:[e.jsx(l.default,{height:30}),e.jsx("span",{children:f("table.noData")})]})})})})}):e.jsx("tbody",{children:z(h)}):e.jsx("tbody",{children:e.jsx("tr",{children:e.jsx("td",{colSpan:s.length,children:e.jsx(i.EmptyBody,{})})})})]})})});exports.default=s;