@inntechcorp/it-design 2.2.89 → 3.1.0

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

@@ -0,0 +1,88 @@
+import e,{css as r}from"styled-components";import o from"../../icons/Lock.js";export{ErrorBorder,ErrorTooltip}from"../../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%;
+
+`,l=e.div`
+  
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+
+  ${({$open:e})=>e&&r`
+      transform: rotate(-180deg);
+    `}
+
+`,n=e.div`
+
+`,s=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(s)`
+
+`,e(s)`
+
+`,e(s)`
+  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(o)`
+  
+  fill: ${({theme:e})=>e.colorIconMuted};
+
+`,d=e.div`
+  
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 0.4375rem;
+
+`,m=e.div`
+  
+  display: grid;
+  grid-column-gap: 0.75rem;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-self: flex-end;
+  position: relative;
+
+`;export{l as Icon,i as LabelWrapper,c as LockIconWrapper,n as PreIcon,d as Prefix,m as Suffix,t as Wrapper};

package/dist/es/spin/index.js

@@ -0,0 +1 @@
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{useEffect as n}from"react";import{Wrapper as r,ChildrenWrapper as e,SpinWrapper as d,Spinner as s}from"./styled.js";const l=({updating:l=!0,opacity:a=!0,size:p=32,className:c="",children:u=null})=>{n(()=>{},[]);const o=()=>{let i="itd-spin-spinner";return l&&(i+=" itd-spin-updating"),c&&(i+=" "+c),i},m=()=>t(d,{$size:String(p),className:o(),children:i(s,{children:[t("div",{}),t("div",{}),t("div",{}),t("div",{})]})});return u?i(r,{className:(()=>{let i="itd-spin";return l&&(i+=" itd-spin-updating"),c&&(i+=" "+c),i})(),children:[t(e,{$updating:l,$opacity:a,children:u}),l?m():null]}):l?m():null};export{l as default};

package/dist/es/spin/styled.js

@@ -0,0 +1,74 @@
+import i,{keyframes as t,css as n}from"styled-components";const o=t`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`,e=i.div`
+  position: relative;
+  `,a=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: ${o} 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;
+  }
+
+  `,s=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")};
+
+  ${i=>!0===i.$opacity?i.$updating?n`
+          opacity : 0.5;
+        `:n`
+          opacity : 1;
+        `:n`
+        opacity : 1;
+      `}
+
+`;export{s as ChildrenWrapper,a as SpinWrapper,r as Spinner,e as Wrapper};

package/dist/es/status/index.js

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

package/dist/es/status/styled.js

@@ -0,0 +1,75 @@
+import t,{css as F}from"styled-components";const e={"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"}},d=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:t})=>{return F`
+      background: ${e[d=t].background};
+      span {
+        color: ${e[d].text};
+      }
+    `;var d}}
+
+`;export{d as Wrapper};

package/dist/es/switch/index.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as i,useState as r,useEffect as o,useCallback as d,useMemo as a,useImperativeHandle as s}from"react";import{Wrapper as n,Body as l,Thumb as c}from"./styled.js";import{ComponentVariants as h}from"../enums/enum.js";import m from"../node_modules/uuid/dist/esm-browser/v4.js";import p from"../spin/index.js";import{ErrorTooltip as u}from"../utils/CommonStyledComponents.js";const f=i(({id:i="",children:f="",checked:w,variant:b=h.DEFAULT,defaultChecked:v=!1,loading:g=!1,disabled:y=!1,onChange:N=null,onUpdate:k=null},j)=>{const[x,_]=r(v||!1),[C,$]=r(""),[D,E]=r(i||`itd-switch-${m()}`);o(()=>{i&&i!==D&&E(i)},[i]);const F=d((e,t=!0,i=!0)=>{k&&("development"===process.env.NODE_ENV?requestAnimationFrame(()=>k(e,t,i)):k(e,t,i))},[k]);o(()=>{void 0!==w&&w!==x&&(_(w),F(w))},[w,F]);const S=a(()=>({reset(e=!0,t=!0){const i=v||!1;_(i),F(i,e,t)},setValue(e,t=!0,i=!0){_(e),F(e,t,i)},getValue:()=>x,setError(e=""){$(e)},forceUpdate(){F(x)},clear(){_(!1)}}),[x,v,F]);s(j,()=>S,[S]);const U=d(e=>{if(g||y)return e.preventDefault(),void e.stopPropagation();const t=!x;_(t),F(t),N&&N(t)},[g,y,x,F,N]),V=a(()=>{let e="itd-switch";return e+=" itd-switch-"+b,x&&(e+=" itd-switch-checked"),y&&(e+=" itd-switch-disabled"),C&&(e+=" itd-switch-error"),g&&(e+=" itd-switch-loading"),e},[x,y,g,b,C]);return e(n,{className:V,children:[t("button",{id:D,type:"button",role:"switch",value:x?"on":"off","aria-checked":x,"aria-invalid":""!==C?"true":void 0,"aria-describedby":""!==C?`${D}__error`:void 0,"data-state":x?"checked":"unchecked","data-disabled":y?"true":"false","data-loading":g&&!y?"true":"false",disabled:y,onClick:U,children:t(l,{className:"itd-switch-body","data-disabled":y,children:t(c,{className:"itd-switch-thumb",children:t(p,{size:12,updating:g&&!y})})})}),f&&t("label",{htmlFor:D,children:f}),(()=>{if(""===C||y)return;return t("p",{id:`${D}__error`,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:C})})(),(()=>{if(""!==C&&!y)return t(u,{className:"itd-switch-error-tooltip itd-error-tooltip",$position:"top-left",$offsetX:3,"aria-hidden":"true",children:C})})()]})});f.displayName="ITD-Switch";export{f as default};

package/dist/es/switch/styled.js

@@ -0,0 +1,209 @@
+import{ThemeAppearances as e}from"../enums/enum.js";import r from"styled-components";import{withOpacity as t}from"../helpers/theme/Color.js";import{TYPOGRAPHY_TOKENS as o,SPACING_TOKENS as i}from"../helpers/theme/tokens.js";export{ErrorTooltip}from"../utils/CommonStyledComponents.js";const n=r.span`
+
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50px;
+  transition: 0.3s;
+  background: ${({theme:r})=>r.appearance===e.LIGHT?r.background:r.foreground};
+
+  .itd-spin-spinner {
+
+    width: 12px;
+    height: 12px;
+
+    >div>div {
+      border-width: 2px;
+    }
+
+  }
+  
+`,a=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 {
+
+    ${n} {
+      top: 2px;
+      left: 2px;
+    }
+
+    button[data-state="checked"] {
+
+      ${n} {
+      
+        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"] {
+
+      ${n} {
+        background: ${({theme:e})=>t(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.LIGHT?400:900]};
+      }
+
+      border: 1px solid ${({theme:e})=>e.colorBorder};
+
+    }
+
+
+  }
+
+  &.itd-switch-filled {
+
+    ${n} {
+      top: 2px;
+      left: 2px;
+    }
+
+    button[data-state="checked"] {
+
+      ${n} {
+        
+        left: calc(100% - 4px);
+        transform: translateX(-100%);
+        background: ${({theme:r})=>r.appearance===e.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"] {
+      
+      ${n} {
+        
+        .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"] {
+
+      ${n} {
+        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(r.primaryScale[r.appearance===e.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(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};
+      ${n} {
+        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.fontSize.df};
+    font-weight: ${o.fontWeight.normal};
+    margin-left: ${i.gap.sm};
+  }
+
+  &.itd-switch-loading .itd-switch-body {
+    cursor: progress;
+  }
+
+`;export{a as Body,n as Thumb,d as Wrapper};

package/dist/es/table/index.js

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