@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/cjs/calendar/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");require("../helpers/datetime/dayjsSetup.js");var a=require("react-i18next"),r=require("./dates.js"),s=require("./day/Day.js"),n=require("./header/Header.js"),o=require("./styled.js"),d=require("../context/ITDContext.js"),l=require("../_virtual/dayjs.min.js");exports.default=({value:u="",defaultValue:c="",className:i,onChange:m,disabledDate:h})=>{const{dateFormat:y}=t.useContext(d.default),{t:f}=a.useTranslation("calendar"),[j,x]=t.useState(0),[Y,p]=t.useState([]),[M,b]=t.useState(null),[D,v]=t.useState(l.default()),[N,S]=t.useState(null),[k,q]=t.useState("days"),g=e=>l.default(e,"MM/DD/YYYY"),C=()=>D.format("YYYY"),w=()=>D.format("M");t.useEffect(()=>{E(),O(c)},[]),t.useEffect(()=>{O(u)},[u]),t.useEffect(()=>{F()},[D]);const O=e=>{if(""===e)return;const t=l.default(e,y,!0);t.isValid()&&(S(t),v(t))},E=()=>{const e={weekdaysLong:f("weekdaysLong",{returnObjects:!0}),weekdaysShort:f("weekdaysShort",{returnObjects:!0}),months:f("months",{returnObjects:!0}),firstDay:parseInt(f("firstDay")),format:f("format")};L(e)},L=e=>{b(e),p(e.weekdaysShort),x(e.firstDay)},P=e=>!!h&&h(e),_=e=>{var t=e.format(y);m&&m({localizated:t,global:e.format("YYYY-MM-DD")})},F=()=>{const t=r.default(Number(w()),Number(C()),j);let a=[];for(let r=0;r<t.length;r++){const n=g(t[r]);let o={date:n,handleClick:_};n.isSame(g(l.default().format("MM/DD/YYYY")))&&(o.today=!0),n.isSame(N)&&(o.selected=!0),n.format("M")===w()&&(o.current=!0),P(n)&&(o.disabled=!0),a.push(e.jsx(s.default,{...o,children:n.format("D")},r))}return a},I=()=>{let t=[];for(let a=0;a<Y.length;a++)t.push(e.jsx("div",{children:e.jsx("span",{children:Y[a]})},a));return t},T=e=>{if("month"===e&&"days"!==k)return;const t="year"===e&&"years"===k?10:1;v(D.clone().subtract(t,e))},V=e=>{if("month"===e&&"days"!==k)return;const t="year"===e&&"years"===k?10:1;v(D.clone().add(t,e))},W=()=>{q("months")},$=()=>{q("years")},z=()=>{const t=M?.months||[];return e.jsx(o.Months,{className:"itd-calendar-months",children:t.map((t,a)=>e.jsx("button",{type:"button",className:"itd-calendar-month"+(D.month()===a?" itd-calendar-month-current":""),onClick:()=>{return e=a,v(D.clone().month(e)),void q("days");var e},children:t},a))})},A=()=>{const t=10*Math.floor(D.year()/10),a=Array.from({length:12},(e,a)=>t-1+a);return e.jsx(o.Years,{className:"itd-calendar-years",children:a.map(a=>e.jsx("button",{type:"button",className:"itd-calendar-year"+(D.year()===a?" itd-calendar-year-current":"")+(a<t||a>t+9?" itd-calendar-year-outside":""),onClick:()=>{return e=a,v(D.clone().year(e)),void q("months");var e},children:a},a))})},H=t.useMemo(()=>{let e="itd-calendar";return""!==i&&(e+=" "+i),e},[i]);return M?e.jsxs(o.Wrapper,{className:H,children:[e.jsx(n.default,{month:M?.months[Number(w())-1],year:C(),onPrevYear:()=>T("year"),onPrevMonth:()=>T("month"),onNextYear:()=>V("year"),onNextMonth:()=>V("month"),onClickMonth:W,onClickYear:$,viewMode:k,decadeLabel:(()=>{if("years"!==k)return"";const e=10*Math.floor(D.year()/10);return`${e}-${e+9}`})()}),e.jsx(o.Separator,{className:"itd-calendar-separator"}),"days"===k&&e.jsxs(e.Fragment,{children:[e.jsx(o.WeekShortDays,{className:"itd-calendar-weekdays",children:I()}),e.jsx(o.Days,{className:"itd-calendar-days",children:F()})]}),"months"===k&&z(),"years"===k&&A()]}):null};

package/dist/cjs/calendar/styled.js

@@ -0,0 +1,82 @@
+"use strict";var r=require("styled-components");const e=r.div`
+
+  width: 280px;
+  border-radius: 6px;
+  background-color: #1D2649;
+  padding: 4px 14px 14px 14px;
+
+`,t=r.div`
+
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: 4px 0;
+
+`,i=r.div`
+
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(7, 1fr);
+  font-size: 13px;
+  line-height: 30px;
+  text-align: center;
+
+  > div {
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      color: #ffffff;
+      font-weight: bold;
+    }
+
+  }
+
+`,d=r.div`
+
+  width: 100%;
+  height: 1px;
+  margin: 4px 0;
+  background-color: #505A7D60;
+
+`,o=r.div`
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 8px;
+
+  .itd-calendar-month {
+    background: transparent;
+    border: 0;
+    color: #ffffff;
+    height: 36px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: .875rem;
+  }
+
+  .itd-calendar-month-current {
+    outline: 2px solid #2F74FF;
+  }
+
+`,a=r.div`
+
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 8px;
+
+  .itd-calendar-year {
+    background: transparent;
+    border: 0;
+    color: #ffffff;
+    height: 36px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: .875rem;
+  }
+
+  .itd-calendar-year-current { outline: 2px solid #2F74FF; }
+  .itd-calendar-year-outside { color: #ffffff80; }
+
+`;exports.Days=t,exports.Months=o,exports.Separator=d,exports.WeekShortDays=i,exports.Wrapper=e,exports.Years=a;

package/dist/cjs/card/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("./styles.js"),i=require("react"),t=require("../enums/enum.js"),a=require("../spin/index.js"),s=require("../html/header/H2.js");require("../html/header/styled.js");var d=require("../tabs/index.js");exports.default=({title:n,description:c,extra:l,tabs:u,onTabChange:h,minWidth:o,minHeight:m,children:j,className:x="",variant:p=t.ComponentVariants.DEFAULT,titleSeparator:f=!1,activeTabKey:b="",updating:v=!1,contentPadding:N="1.5rem"})=>{i.useEffect(()=>{});const g=()=>{if(l)return e.jsx(r.Extra,{className:"itd-card-extra",children:l})},q=()=>{if(u)return e.jsx(d.default,{tabs:u,activeTabKey:b,onTabChange:e=>h&&h(e)})},y=()=>{if(n)return e.jsx(r.Title,{className:"itd-card-title",children:e.jsx(s.default,{children:n})})},T=()=>{if(c)return e.jsx(r.Description,{className:"itd-card-description",children:c})},H=()=>!!(n||l||u),$=i.useMemo(()=>{let e="itd-card";return p&&(e+=" itd-card-"+p),""!==x&&(e+=" "+x),e},[p,x]);return e.jsx(r.Wrapper,{className:$,children:e.jsx(a.default,{updating:v,className:"itd-card-spin",children:e.jsxs(r.Body,{className:"itd-card-body",$minWidth:o,$minHeight:m,$hasHeader:H(),children:[(()=>{if(H())return e.jsxs(r.Header,{$showSeparator:f||void 0!==l||void 0!==u,className:"itd-card-header",children:[e.jsxs("div",{children:[y(),T()]}),e.jsxs("div",{children:[q(),g()]})]})})(),(()=>{if(j)return e.jsx(r.Content,{className:"itd-card-body",$padding:N,children:j})})()]})})})};

package/dist/cjs/card/styles.js

@@ -0,0 +1,66 @@
+"use strict";var e=require("styled-components");const i=e.div`
+
+  position: relative;
+  width: 100%;
+
+  >.itd-spin {
+    height: 100%;
+  }
+
+  &.itd-card-default {
+    border              : 1px solid ${({theme:e})=>e.colorBorder};
+  }
+
+  &.itd-card-filled {
+    box-shadow          : 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+  }
+
+  &.itd-card-default, &.itd-card-filled {
+    background-color    : ${({theme:e})=>e.card};
+    border-radius       : calc( ${({theme:e})=>e.borderRadius} + 4px);
+  }
+  
+`,t=e.div`
+
+  position              : relative;
+  height                : 100%;
+
+  min-width             : ${e=>e.$minWidth?e.$minWidth+"px":"200px"};
+  min-height            : ${e=>e.$minHeight?e.$minHeight+"px":"100px"};
+
+  display               : grid;
+  grid-template-rows    : ${e=>e.$hasHeader?"75px 1fr":"1fr"};
+  padding-block         : 20px;
+
+  
+`,r=e.div`
+
+  padding-inline        : 1.5rem;
+
+  display               : flex;
+  justify-content       : space-between;
+  align-items           : center;
+  gap                   : 1rem;
+
+  ${i=>{if(void 0===i.$showSeparator||!0===i.$showSeparator)return e.css`
+        border-bottom: 1px solid #f1f1f4;
+      `}}
+
+`,d=e.div`
+  
+`,o=e.div`
+  color                 : ${({theme:e})=>e.colorTextMutedForeground};
+  font-size             : 0.875rem;
+  line-height           : 0.875rem;
+  font-weight           : 400;
+`,p=e.div`
+
+  display               : grid;
+  padding               : ${e=>e.$padding?e.$padding:"1.5rem"};
+
+`,a=e.div`
+  display               : flex;
+  flex-direction        : row;
+  justify-content       : space-between;
+  gap                   : .625rem;
+`;exports.Body=t,exports.Content=p,exports.Description=o,exports.Extra=a,exports.Header=r,exports.Title=d,exports.Wrapper=i;

package/dist/cjs/checkbox/group/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../_virtual/react.js"),s=require("./styled.js"),l=require("../../node_modules/lodash-es/isObject.js"),u=require("../../node_modules/uuid/dist/esm-browser/v4.js"),a=require("../index.js");const i=r.forwardRef(({id:i="",className:d="",disabled:c,variant:o,value:n,defaultValue:f,children:p,onChange:h,onUpdate:v},b)=>{const[m,x]=r.useState([]),[j,E]=r.useState([]),[g,k]=r.useState(""),[q,_]=r.useState(i);r.useEffect(()=>{""===i&&_("itd-checkbox-group-"+u.default())},[]),r.useEffect(()=>{x(C)},[p]),r.useEffect(()=>{f&&E(f)},[]),r.useEffect(()=>{n&&(t.default(j,n)||E(n))},[n]),r.useEffect(()=>{let e=[];j.forEach(r=>{e.push(r)}),h&&h(e),S(e)},[j]);const y=()=>{if(p)return O(p)};let C=[];const O=e=>r.Children.map(e,e=>{if(!l.default(e))return e;let t;if(e.type===a.default){let s={ref:r.createRef(),onChange:e=>{(e=>{let r=j;if(e.value){if(e.checked)r=[...j,e.value];else{const t=j.indexOf(e.value);if(t>-1){let e=[...j];e.splice(t,1),r=e}}E(r)}})(e)},children:O(e.props.children)};j.indexOf(e.props.value)>-1&&!e.props.disabled&&(s.checked=!0),void 0!==c&&(s.disabled=c),void 0!==o&&void 0===e.props.variant&&(s.variant=o),t=r.cloneElement(e,s),C.push(e.props.value)}else t=r.cloneElement(e,{children:O(e.props.children)});return t});r.useImperativeHandle(b,()=>({reset(e=!0,r=!0){this.selectAll(!1),E([]),k(""),S([],e,r)},setValue(e=[],r=!0,t=!0){E(e),S(e,r,t)},getValue:()=>j,setError(e=""){k(e)},clear(){E([]),this.selectAll(!1)},selectAll(e){E(e?m:[]),S(e?m:[]),h&&h(e?m:[])}}));const S=(e,r=!0,t=!0)=>{v&&v(e,r,t)},A=r.useMemo(()=>{let e="itd-checkbox-group";return""!==g&&(e+=" itd-checkbox-group-error"),c&&(e+=" itd-checkbox-group-disabled"),""!==d&&(e+=" "+d),e},[g,c,d]);return e.jsx(s.Wrapper,{id:q,className:A,children:y()})});i.displayName="ITD-CheckboxGroup",exports.default=i;

package/dist/cjs/checkbox/group/styled.js

@@ -0,0 +1,9 @@
+"use strict";const e=require("styled-components").div`
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+
+`;exports.Wrapper=e;

package/dist/cjs/checkbox/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./group/index.js"),a=require("./styled.js"),i=require("../enums/enum.js"),s=require("../node_modules/uuid/dist/esm-browser/v4.js"),c=require("../utils/CommonStyledComponents.js");const o=t.forwardRef(({id:r="",checked:o=!1,indeterminate:d=!1,disabled:n=!1,readOnly:l=!1,variant:u=i.ComponentVariants.DEFAULT,animated:h=!1,className:p="",value:x,children:b,onChange:f,onUpdate:m},k)=>{const v=t.useRef(null),[j,y]=t.useState(!1),[g,C]=t.useState(h),[S,E]=t.useState(!1),[N,q]=t.useState(!1),[w,$]=t.useState(""),[_,D]=t.useState(!1),[I,A]=t.useState(r);t.useEffect(()=>{""===r&&A("itd-checkbox-"+s.default())},[]),t.useEffect(()=>{null!=o&&(y(o),P(o))},[o]),t.useEffect(()=>{C(h)},[h]),t.useEffect(()=>{null!=d&&(E(d),v.current&&(v.current.indeterminate=!!d,v.current.setAttribute("aria-checked",d?"mixed":j?"true":"false")))},[d]),t.useEffect(()=>{v.current&&(v.current.indeterminate=!!S,v.current.setAttribute("aria-checked",S?"mixed":j?"true":"false"))},[S,j]),t.useImperativeHandle(k,()=>({reset(e=!0,t=!0){const r=o||!1;y(r),$(""),P(r,e,t)},setValue(e=!1,t=!0,r=!0){y(e),P(e,t,r)},getValue:()=>j,setError(e=""){$(e)},setDisabled(e=!0){q(e)},forceUpdate(){P(j)},clear(){y(!1)}}));const M=e=>{l||n?e.preventDefault():(j||$(""),f&&f({checked:!j,value:x,className:"itd-checkbox",disabled:n||N,target:v,stopPropagation:e.stopPropagation,preventDefault:e.preventDefault}),C(!0),E(!1),y(!j),P(!j))},P=(e,t=!0,r=!0)=>{m&&m(e,t,r)},T=()=>{if(""===w||n)return;const t=`${I}__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:w})},U=()=>{if(""!==w&&!n)return e.jsx(c.ErrorTooltip,{className:"itd-checkbox-error-tooltip itd-error-tooltip",$position:"top-left",$offsetX:-4,"aria-hidden":"true",children:w})},V=t.useMemo(()=>{let e="itd-checkbox";return e+=" itd-checkbox-"+u,j&&(e+=" itd-checkbox-selected"),_&&(e+=" itd-checkbox-active"),""!==w&&(e+=" itd-checkbox-error"),(n||N)&&(e+=" itd-checkbox-disabled"),l&&(e+=" itd-checkbox-readonly"),""!==p&&(e+=" "+p),e},[u,j,_,w,n,N,l,p]),F=()=>!n&&("boolean"==typeof j?j:"true"===j);return(()=>{const t=`${I}__error`;return e.jsxs(a.Wrapper,{className:V,children:[e.jsxs(a.CheckboxInnerWrapper,{className:"itd-checkbox-inner-wrapper",onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[e.jsx(a.Checkmark,{className:"itd-checkbox-checkmark",$isChecked:j,$isAnimated:g,$isIndeterminate:S,children:e.jsx(a.CheckboxInput,{id:I,ref:v,type:"checkbox",disabled:n||N,checked:F(),value:F().toString(),onChange:M,"data-readonly":l?"true":"false","aria-checked":S?"mixed":F()?"true":"false","aria-invalid":""!==w?"true":void 0,"aria-describedby":""!==w?t:void 0})}),e.jsx("label",{className:"itd-checkbox-label",htmlFor:I,children:b})]}),T(),U()]})})()});o.Group=r.default,o.displayName="ITD-Checkbox",exports.CheckboxGroup=r.default,exports.default=o;

package/dist/cjs/checkbox/styled.js

@@ -0,0 +1,340 @@
+"use strict";var e=require("../enums/enum.js"),o=require("styled-components"),r=require("../helpers/theme/Color.js"),t=require("../helpers/theme/tokens.js"),i=require("../utils/CommonStyledComponents.js");const n=o.div`
+
+  display: flex;
+  align-items: center;
+  position: relative;
+  
+  //user-select: none;
+  min-height: 20px;
+
+  &.itd-checkbox-readonly {
+    pointer-events: none;
+    .itd-checkbox-label {
+      pointer-events: none;
+    }
+  }
+
+  .itd-checkbox-label {
+
+    //cursor                      : pointer;
+    font-size                   : ${t.TYPOGRAPHY_TOKENS.fontSize.df};
+    font-weight                 : ${t.TYPOGRAPHY_TOKENS.fontWeight.normal};
+
+    transition-property         : color;
+    transition-duration         : ${({theme:e})=>e.transitionDuration};
+    transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+    a {
+      
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+      
+    }
+    
+  }
+
+  &.itd-checkbox-disabled {
+    cursor: not-allowed;
+    pointer-events: auto;
+  }
+
+  /**
+   * DEFAULT
+   */
+  &.itd-checkbox-default {
+
+    input {
+      border      : 1px solid ${({theme:e})=>e.colorBorder};
+      box-shadow  : ${({theme:e})=>e.boxShadow};
+    }
+
+    .itd-checkbox-checkmark {
+      background: none;
+    }
+
+    /* Klavye navigasyonu ile aktif (select menüsünde) */
+    &.itd-checkbox-keyboard-active:not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      input {
+        border: 1px solid ${({theme:e})=>e.colorBorderHover};
+      }
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorText};
+      }
+    }
+    
+    .itd-checkbox-label {
+
+      color: ${({theme:e})=>e.colorControlLabel};
+
+      a {
+        
+        color: ${({theme:e})=>e.primaryScale[600]};
+
+        &:hover {
+          color: ${({theme:e})=>e.primaryScale[500]};
+        }
+        
+      }
+
+    }
+
+    &.itd-checkbox-selected {
+
+      input {
+        border: 1px solid ${({theme:e})=>e.primary};
+      }
+
+      .itd-checkbox-checkmark {
+        //background: ${({theme:e})=>e.primary};
+      }
+
+      .itd-checkbox-checkmark::before {
+        background-color: ${({theme:e})=>e.primary};
+      }
+
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorText};
+      }
+
+    }
+
+    &.itd-checkbox-error {
+
+      input {
+        border: 1px solid ${({theme:e})=>e.colorErrorBorder};
+      }
+
+    }
+
+    &.itd-checkbox-disabled {
+
+      input { 
+        border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+      }
+
+      .itd-checkbox-checkmark {
+        background-color: ${({theme:e})=>e.colorDisabledBg};
+        pointer-events: none;
+        &:before {
+          background-color: ${({theme:e})=>e.colorDisabledBorder};
+        }
+        svg { fill: ${({theme:e})=>e.colorDisabledText} }
+      }
+
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorDisabledText};
+        pointer-events: none;
+      }
+
+    }
+
+    &:not(&.itd-checkbox-error):not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      &:hover {
+        input {
+          border: 1px solid ${({theme:e})=>e.colorBorderHover};
+        }
+        .itd-checkbox-label {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+    }
+
+  }
+
+  /**
+   * FILLED
+   */
+  &.itd-checkbox-filled {
+
+    &:not(.itd-checkbox-readonly) {
+      transition-property         : all;
+      transition-duration         : ${({theme:e})=>e.transitionDuration};
+      transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+    }
+
+    .itd-checkbox-checkmark {
+      background                  : ${({theme:e})=>e.colorBackgroundAltHover};
+    }
+
+    /* Klavye navigasyonu ile aktif (select menüsünde) */
+    &.itd-checkbox-keyboard-active:not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      .itd-checkbox-checkmark {
+        background: ${({theme:e})=>e.colorBackgroundAltHover};
+      }
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorText};
+      }
+    }
+
+    .itd-checkbox-label {
+
+      color: ${({theme:e})=>e.colorControlLabel};
+
+      a {
+        
+        color: ${({theme:e})=>e.primary};
+
+        &:hover {
+          color: ${({theme:e})=>e.primary};
+        }
+        
+      }
+
+    }
+
+    &.itd-checkbox-selected {
+
+      .itd-checkbox-checkmark {
+        background: ${({theme:e})=>e.primary};
+      }
+
+      .itd-checkbox-checkmark::before {
+        background-color: ${({theme:e})=>e.primaryForeground};
+      }
+
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorText};
+      }
+
+    }
+
+    &.itd-checkbox-error {
+      input {
+        border: 1px solid ${({theme:e})=>e.colorErrorBorder};
+      }
+    }
+
+    &.itd-checkbox-disabled {
+
+      input {
+        border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+      }
+
+      .itd-checkbox-checkmark {
+        background-color: ${({theme:e})=>e.colorDisabledBg};
+        pointer-events: none;
+        &:before {
+          background-color: ${({theme:e})=>e.colorDisabledBorder};
+        }
+        svg { fill: ${({theme:e})=>e.colorDisabledText} }
+      }
+
+      .itd-checkbox-label {
+        color: ${({theme:e})=>e.colorDisabledText};
+        pointer-events: none;
+      }
+
+    }
+
+    &:not(&.itd-checkbox-error):not(.itd-checkbox-selected):not(.itd-checkbox-disabled) {
+      &:hover {
+        .itd-checkbox-checkmark {
+          background: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+        .itd-checkbox-label {
+          color: ${({theme:e})=>e.colorText};
+        }
+      }
+    }
+
+  }
+
+`,c=o.div`
+
+  min-height      : 20px;
+  gap             : ${t.SPACING_TOKENS.gap.sm};
+
+  display         : flex;
+  align-items     : center;
+  position        : relative;
+  flex-direction  : row;
+
+`,l=o.span`
+
+  display                     : flex;
+  align-items                 : center;
+  justify-content             : center;
+
+  min-height                  : 20px;
+  min-width                   : 20px;
+  position                    : relative;
+  border-radius               : min(calc( ${({theme:e})=>e.borderRadius} - 2px), 6px);
+  ${e=>{if(e.$isAnimated)return o.css`
+        &::before {
+          transition-property         : transform;
+          transition-duration         : calc(${({theme:e})=>e.transitionDuration} / 2);
+          transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+        }
+      `}}
+
+  &::before {
+
+    content: "";
+    mask-image: url('data:image/svg+xml,<svg width="14px" height="10.4691315px" viewBox="0 0 14 10.4691315" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group" fill="%23000000" fill-rule="nonzero"><polygon id="Path" points="12.1454315 0 5.01223756 6.61750794 1.9955597 3.39820863 0 5.26815795 4.87359619 10.4691315 14 2.01029968"></polygon></g></g></svg>');
+
+    width: 14px;
+    height: 10.47px;
+    background-color: ${({theme:e})=>e.primary};
+
+    ${e=>{if(e.$isIndeterminate)return o.css`
+          /* Checked ile aynı görsel yoğunluk için renk ve kontrast korunur */
+          mask-image: none;
+          width: 10px;
+          height: 2px;
+          border-radius: 2px;
+          opacity: 1;
+          transform: none;
+          background-color: ${({theme:e})=>e.primaryForeground}; /* checked iç tik rengiyle aynı */
+        `;const r=e.$isChecked?.85:0,t=e.$isChecked?.85:.1;return o.css`
+        transform: scale(${t});
+        opacity: ${r};
+      `}};
+
+  }
+
+`,a=o.input`
+
+  appearance: none;
+  position: absolute;
+
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+
+  margin: 0;
+  padding: 0;
+
+  outline        : 0 solid transparent;
+  outline-offset : ${({theme:e})=>e.ringOffset};
+  border-radius  : min(calc( ${({theme:e})=>e.borderRadius} - 2px), 6px);
+
+  &[data-readonly="true"] {
+    transition  : outline 100ms linear;
+  }
+
+  &[data-readonly="false"] {
+    transition  : outline 100ms linear,
+                  border-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+  }
+
+  svg {
+    pointer-events: none;
+  }
+
+  &&:focus-visible {
+    border-color: ${({theme:o})=>o.primaryScale[o.appearance===e.ThemeAppearances.LIGHT?400:900]};
+    outline: ${({theme:e})=>e.ringWidth} solid ${({theme:o})=>r.withOpacity(o.primaryScale[o.appearance===e.ThemeAppearances.LIGHT?400:900],.5)};
+  }
+
+  /* Error durumunda outline kırmızı */
+  .itd-checkbox-error &&:focus-visible {
+    border-color: ${({theme:e})=>e.colorErrorBorder};
+    outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>r.withOpacity(e.colorErrorBorder,.5)};
+  }
+  
+`;exports.ErrorTooltip=i.ErrorTooltip,exports.CheckboxInnerWrapper=c,exports.CheckboxInput=a,exports.Checkmark=l,exports.Wrapper=n;

package/dist/cjs/context/ITDContext.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=require("i18next"),r=require("../modal/index.js"),n=require("../notification/index.js"),l=require("./ITDThemeProvider.js"),o=require("./styled.js");const u=a.createContext({});u.displayName="ITDContext";exports.ITDProvider=s=>{const[c,d]=a.useState(s.theme?s.theme:"dark"),[i,g]=a.useState(s.dateFormat?s.dateFormat:"MM/DD/YYYY"),[h,m]=a.useState(s.language?s.language:"en"),[x,j]=a.useState("en-US"),[k,v]=a.useState("");a.useEffect(()=>{s.theme&&d(s.theme),s.language&&(m(s.language),t.changeLanguage(s.language)),s.dateFormat&&g(s.dateFormat)},[s.theme,s.language,s.dateFormat]);const p=a.useCallback(e=>{console.log("changeTheme",e),d(e)},[]),b=a.useCallback(e=>{v(e)},[]),f=a.useCallback(e=>{g(e)},[]),q=a.useCallback(e=>{j(e)},[]),C=a.useCallback(e=>{m(e),t.changeLanguage(e)},[]),F=a.useMemo(()=>({theme:c,brokenImage:k,dateFormat:i,language:h,locale:x,changeTheme:p,changeBrokenImage:b,changeDateFormat:f,changeLanguage:C,changeLocale:q}),[c,k,i,h,x,p,b,f,C,q]);return e.jsx(o.Wrapper,{className:"itd-provider","data-theme":c,"data-lang":h,children:e.jsx(l.default,{themeName:"dark"===c?"dark":"light",children:e.jsx(u.Provider,{value:F,children:e.jsx(n.NotificationProvider,{children:e.jsx(r.ModalProvider,{children:s.children})})})})})},exports.default=u;

package/dist/cjs/context/ITDThemeProvider.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("../helpers/theme/light.js"),s=require("../helpers/theme/dark.js");exports.default=function({themeName:i="light",customTheme:d,children:l}){const n="dark"===i?s.default:o.default,u=t.useMemo(()=>({...n,...d}),[n,d]);return t.useEffect(()=>{if("undefined"==typeof document)return;const e=document.documentElement;e.style.setProperty("--itd-text",u.colorText),e.style.setProperty("--itd-text-muted",u.colorTextMuted),e.style.setProperty("--itd-border",u.colorBorder),e.style.setProperty("--itd-ring",u.primary),e.style.setProperty("--itd-link",u.primary),e.style.setProperty("--itd-selection",u.selection),e.style.setProperty("--itd-selection-fg",u.selectionForeground)},[u]),e.jsx(r.ThemeProvider,{theme:u,children:l})};

package/dist/cjs/context/styled.js

@@ -0,0 +1,15 @@
+"use strict";const e=require("styled-components").div`
+
+  /* Theme-aware selection colors */
+  ::selection {
+    background: ${({theme:e})=>e.selection};
+    color: ${({theme:e})=>e.selectionForeground};
+  }
+
+  /* Tüm child elementler için de geçerli */
+  * ::selection {
+    background: ${({theme:e})=>e.selection};
+    color: ${({theme:e})=>e.selectionForeground};
+  }
+
+`;exports.Wrapper=e;

package/dist/cjs/datepicker/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=require("react-transition-group");require("../helpers/datetime/dayjsSetup.js");var l=require("../utils/GetSizeSlugBySize.js"),r=require("./styled.js"),o=require("../calendar/index.js"),i=require("../enums/enum.js"),s=require("../context/ITDContext.js"),d=require("../node_modules/uuid/dist/esm-browser/v4.js"),u=require("../_virtual/dayjs.min.js"),c=require("../input/index.js"),n=require("../node_modules/lucide-react/dist/esm/icons/calendar-1.js"),f=require("../node_modules/lucide-react/dist/esm/icons/circle-x.js");const p=a.forwardRef(({id:p="",placeholder:m="",mask:z="##/##/####",size:j=i.ComponentSizes.DEFAULT,variant:v="default",disabled:b=!1,position:g=i.ComponentXPositions.LEFT,className:x="",value:k="",defaultValue:E="",suffix:h,onUpdate:q,onChange:S,disabledDate:C},y)=>{const D=a.useRef(null),{dateFormat:_,locale:F}=a.useContext(s.default),N=a.useRef(null),R=a.useRef(null),[M,L]=a.useState(""),[T,V]=a.useState(""),[w,Y]=a.useState(!1),[B,P]=a.useState(p),[W,$]=a.useState({localizated:"",global:""}),[I,O]=a.useState(!1);a.useEffect(()=>(""===p&&P("itd-datepicker-"+d.default()),""!==E&&(L(u.default(E).locale(F).format(_)),$({localizated:u.default(E).locale(F).format(_),global:E})),()=>{A(!1)}),[]),a.useEffect(()=>{""!==k&&(L(u.default(k).locale(F).format(_)),$({localizated:u.default(k).locale(F).format(_),global:k}))},[k]),a.useEffect(()=>{A(w)},[w]),a.useEffect(()=>{R.current&&R.current.setError?.(T)},[T]),a.useEffect(()=>{""!==M&&($({localizated:u.default(W.global).locale(F).format(_),global:W.global}),L(u.default(W.global).locale(F).format(_)))},[F]);const U=(e,a=!0,t=!0,l=!1)=>{if(!l&&(""===e.localizated||e.localizated===M))return;const r=ee(e.localizated),o=r?e.global:"";L(r?e.localizated:""),q&&q(o,a,t)};a.useImperativeHandle(y,()=>({reset(e=!0,a=!0){V(""),$({localizated:"",global:""}),U("",e,a,!0)},setValue(e,a=!0,t=!0){if(W.global===e)return;const l={localizated:u.default(e).locale(F).format(_),global:e};$(l),U(l,a,t)},getValue:()=>""!==W.localizated?W.global:"",setError(e){V(e)},clear(){}}));const A=e=>{document[e?"addEventListener":"removeEventListener"]("pointerdown",G)},G=e=>{w&&N.current&&!N.current.contains(e.target)&&Y(!1)},H=e=>{const a=e.key;if(!/^[0-9]$/.test(a))return"Enter"===a||" "===a?(b||Y(!0),void e.preventDefault()):void("Escape"!==a&&"Esc"!==a&&"Tab"!==a||Y(!1));b||Y(!0)},K=()=>{},X=()=>{R.current&&R.current.setFocus&&R.current.setFocus(),Y(!0)},J=e=>{const a=ee(e),t=z?.replace(/[^/(.*?)]/g,"_"),l={localizated:e,global:u.default(e,_,!0).format("YYYY-MM-DD")};V(""),a?(U(l),$(l)):L(""===e||e===t?"":e)},Q=()=>{const e=z?.replace(/[^/(.*?)]/g,"_"),a=M;if(""===a)return void(""!==W.localizated&&L(W.localizated));(a.includes("_")||a===e||!ee(a))&&(""!==W.localizated?L(W.localizated):L(""))},Z=e=>{Y(!1),$(e),U(e,!0),S&&S(e)},ee=e=>{let a=u.default(e,_,!0).isValid(),t=!1;return C&&(t=C(u.default(e,_))),a&&!t},ae=a.useMemo(()=>{let e="itd-date-picker";return e+=" itd-date-picker-"+l.default(j),e+=" itd-date-picker-"+v,b&&(e+=" itd-date-picker-disabled"),T&&(e+=" itd-date-picker-error"),w&&(e+=" itd-date-picker-open"),""!==x&&(e+=" "+x),e},[b,T,w,x]);return e.jsxs(r.Wrapper,{className:ae,$disabled:b,ref:N,onClick:b?void 0:X,children:[e.jsx("div",{onMouseEnter:()=>{O(!0)},onMouseLeave:()=>O(!1),children:e.jsx(c.default,{id:B,placeholder:m,value:M,mask:z,size:j,variant:v,onChange:J,onFocus:K,onKeyDown:H,onBlur:Q,keepFocus:w,focusRef:N,ref:R,disabled:b,suffix:e.jsx("div",{className:"itd-datepicker-suffix",children:I&&""!==W.localizated?e.jsx(r.RemoveButton,{className:"itd-datepicker-remove-button",onClick:e=>{I&&""!==W.localizated&&(e.preventDefault(),e.stopPropagation(),$({localizated:"",global:""}),L(""),Y(!1),S&&S({localizated:"",global:""}),q&&q("",!0,!0))},children:e.jsx(f.default,{size:16,className:"itd-datepicker-remove-icon clear"})}):h||e.jsx("span",{className:"itd-datepicker-icon",style:{opacity:1},children:e.jsx(n.default,{size:16,strokeWidth:2})})})})}),e.jsx(t.CSSTransition,{in:w,timeout:200,classNames:"datepicker-modal",nodeRef:D,unmountOnExit:!0,children:e.jsx(r.CalendarWrapper,{$position:g,ref:D,children:e.jsx(o.default,{value:W.localizated,defaultValue:W.localizated,onChange:Z,disabledDate:C})})})]})});exports.default=p;

package/dist/cjs/datepicker/styled.js

@@ -0,0 +1,60 @@
+"use strict";var e=require("styled-components");const o=e.div`
+  
+  position: relative;
+  height: max-content;
+
+  input {
+    background: none;
+    border-width: 0;
+    display: block;
+    width: 100%;
+    outline: none;
+  }
+
+  .itd-datepicker-suffix {
+    width: 1rem; 
+    height: 1rem; 
+    display: inline-grid; 
+    place-items: center;
+  }
+
+  .itd-datepicker-icon {
+    color: ${({theme:e})=>e.colorText};
+    transition: color .2s ease, opacity .2s ease;
+  }
+
+  ${({$disabled:o})=>o&&e.css`
+      cursor: not-allowed;
+    `}
+
+`,t=e.div`
+
+  box-shadow  : 0 0 30px rgba(0,0,0,.25);
+  z-index     : 2;
+  position    : absolute;
+  top         : calc(100% + 6px);
+
+  ${({$position:e})=>"left"===e?"left: 0;":"right: 0;"};
+
+  transform-origin: 0% 8%;
+  transform-box: fill-box;
+
+`,r=e.div`
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    transition: color .2s ease;
+    color: ${({theme:e})=>e.colorTextNeutral};
+  }
+
+  &:hover {
+    svg {
+      color: ${({theme:e})=>e.colorText};
+    }
+  }
+
+`;exports.CalendarWrapper=t,exports.RemoveButton=r,exports.Wrapper=o;

package/dist/cjs/enums/enum.js

@@ -0,0 +1 @@
+"use strict";var o,e,t,s,i,n,p,a,r,m,l,d;exports.ModalState=void 0,(o=exports.ModalState||(exports.ModalState={})).NOT_SHOW="modal-not-show",o.BEGIN="modal-begin",o.ENTERING="modal-entering",o.ENTERED="modal-entered",o.EXITING="modal-exiting",o.EXITED="modal-exited",o.REMOVED="modal-removed",o.OK_CLICK="modal-ok-button-click",o.CANCEL_CLICK="modal-cancel-button-click",o.CLOSE_CLICK="modal-close-button-click",o.OUTSIDE_CLICK="modal-outside-click",o.ESC_CLICK="modal-esc-click",o.ALL_REMOVED="modal-all-removed",exports.FileTypes=void 0,(e=exports.FileTypes||(exports.FileTypes={})).SVG="image/svg+xml",e.PNG="image/png",e.JPG="image/jpg",e.JPEG="image/jpeg",e.GIF="image/gif",e.PDF="application/pdf",e.OTF="font/otf",exports.FileExtensions=void 0,(t=exports.FileExtensions||(exports.FileExtensions={})).SVG=".svg",t.PNG=".png",t.JPG=".jpg",t.GIF=".gif",t.PDF=".pdf",t.OTF=".otf",exports.FormValidations=void 0,(s=exports.FormValidations||(exports.FormValidations={})).REQUIRED="required",s.TYPE="type",exports.FormValidationTypes=void 0,(i=exports.FormValidationTypes||(exports.FormValidationTypes={})).MIN_LENGTH="minLength",i.MAX_LENGTH="maxLength",i.EXACT_LENGTH="exactLength",i.SAME="same",i.NOT_SAME="notSame",i.TC_IDENTITY="TCIdentity",i.PASSWORD="password",i.EMAIL="email",i.USERNAME="username",i.SITE_USERNAME="siteUsername",i.ADMIN_USERNAME="adminUsername",i.URL="url",i.FORBIDDEN_WORDS="forbiddenWords",exports.ConnectionStatus=void 0,(n=exports.ConnectionStatus||(exports.ConnectionStatus={})).ONLINE="online",n.OFFLINE="offline",exports.ComponentSizes=void 0,(p=exports.ComponentSizes||(exports.ComponentSizes={})).X_SMALL="x-small",p.SMALL="small",p.MEDIUM="medium",p.DEFAULT="default",p.LARGE="large",p.X_LARGE="x-large",exports.ComponentSizesSlug=void 0,(a=exports.ComponentSizesSlug||(exports.ComponentSizesSlug={})).X_SMALL="xs",a.SMALL="sm",a.MEDIUM="md",a.DEFAULT="df",a.LARGE="lg",a.X_LARGE="xlg",exports.ComponentXPositions=void 0,(r=exports.ComponentXPositions||(exports.ComponentXPositions={})).LEFT="left",r.RIGHT="right",exports.ComponentYPositions=void 0,(m=exports.ComponentYPositions||(exports.ComponentYPositions={})).TOP="top",m.BOTTOM="bottom",exports.ComponentVariants=void 0,(l=exports.ComponentVariants||(exports.ComponentVariants={})).DEFAULT="default",l.FILLED="filled",l.CUSTOM="custom",exports.ThemeAppearances=void 0,(d=exports.ThemeAppearances||(exports.ThemeAppearances={})).LIGHT="light",d.DARK="dark";

package/dist/cjs/flex/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("./styled.js");exports.default=({gap:t,justify:s,align:a,vertical:l,wrap:i,stretch:c,style:p,className:u,children:d})=>e.jsx(r.Wrapper,{$gap:t,$justify:s,$align:a,$vertical:l,$wrap:i,$stretch:c,style:p,className:u,children:d});

package/dist/cjs/flex/styled.js

@@ -0,0 +1,35 @@
+"use strict";var s=require("styled-components");const e=s.div`
+
+  display     : flex;
+
+  ${e=>{if(e.$stretch&&!0===e.$stretch)return e.$vertical&&!0===e.$vertical?s.css`
+            height : 100%;
+          `:s.css`
+            width : 100%;
+          `}}
+
+  ${e=>{if(e.$wrap)return!0===e.$wrap&&s.css`
+        flex-wrap : wrap;
+      `}}
+
+  ${e=>e.$vertical?!0===e.$vertical&&s.css`
+        flex-direction : column;
+      `:s.css`
+        flex-direction : row;
+      `}
+
+  ${e=>{if(e.$justify)return s.css`
+        justify-content : ${e.$justify};
+      `}}
+
+  ${e=>e.$align?s.css`
+        align-items : ${e.$align};
+      `:s.css`
+        align-items : center;
+      `}
+
+  ${e=>{if(e.$gap){let t=0,r="";return"small"===e.$gap?t=10:"medium"===e.$gap?t=16:"large"===e.$gap?t=24:"string"==typeof e.$gap?r=e.$gap:t=e.$gap,""===r&&(r=t+"px"),s.css`
+        gap : ${r};
+      `}}}
+
+`;exports.Wrapper=e;