@inntechcorp/it-design 2.2.90 → 3.1.1

package/dist/es/calendar/index.js

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

package/dist/es/calendar/styled.js

@@ -0,0 +1,82 @@
+import r from"styled-components";const e=r.div`
+
+  width: 280px;
+  border-radius: 6px;
+  background-color: #1D2649;
+  padding: 4px 14px 14px 14px;
+
+`,i=r.div`
+
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: 4px 0;
+
+`,d=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;
+    }
+
+  }
+
+`,t=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; }
+
+`;export{i as Days,o as Months,t as Separator,d as WeekShortDays,e as Wrapper,a as Years};

package/dist/es/card/index.js

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

package/dist/es/card/styles.js

@@ -0,0 +1,66 @@
+import e,{css as i}from"styled-components";const d=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;
+
+  ${e=>{if(void 0===e.$showSeparator||!0===e.$showSeparator)return i`
+        border-bottom: 1px solid #f1f1f4;
+      `}}
+
+`,o=e.div`
+  
+`,a=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"};
+
+`,n=e.div`
+  display               : flex;
+  flex-direction        : row;
+  justify-content       : space-between;
+  gap                   : .625rem;
+`;export{t as Body,p as Content,a as Description,n as Extra,r as Header,o as Title,d as Wrapper};

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

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

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

@@ -0,0 +1,9 @@
+import t from"styled-components";const e=t.div`
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+
+`;export{e as Wrapper};

package/dist/es/checkbox/index.js

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

package/dist/es/checkbox/styled.js

@@ -0,0 +1,340 @@
+import{ThemeAppearances as e}from"../enums/enum.js";import o,{css as r}from"styled-components";import{withOpacity as t}from"../helpers/theme/Color.js";import{TYPOGRAPHY_TOKENS as i,SPACING_TOKENS as n}from"../helpers/theme/tokens.js";export{ErrorTooltip}from"../utils/CommonStyledComponents.js";const c=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                   : ${i.fontSize.df};
+    font-weight                 : ${i.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};
+        }
+      }
+    }
+
+  }
+
+`,l=o.div`
+
+  min-height      : 20px;
+  gap             : ${n.gap.sm};
+
+  display         : flex;
+  align-items     : center;
+  position        : relative;
+  flex-direction  : row;
+
+`,d=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 r`
+        &::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 r`
+          /* 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 o=e.$isChecked?.85:0,t=e.$isChecked?.85:.1;return r`
+        transform: scale(${t});
+        opacity: ${o};
+      `}};
+
+  }
+
+`,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.LIGHT?400:900]};
+    outline: ${({theme:e})=>e.ringWidth} solid ${({theme:o})=>t(o.primaryScale[o.appearance===e.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})=>t(e.colorErrorBorder,.5)};
+  }
+  
+`;export{l as CheckboxInnerWrapper,a as CheckboxInput,d as Checkmark,c as Wrapper};

package/dist/es/context/ITDContext.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as a,useState as t,useEffect as n,useCallback as r,useMemo as g}from"react";import{ModalProvider as o}from"../modal/index.js";import{NotificationProvider as m}from"../notification/index.js";import c from"./ITDThemeProvider.js";import{Wrapper as h}from"./styled.js";let i;try{i=require("i18next")}catch(e){i={changeLanguage:()=>{}}}const d=a({});d.displayName="ITDContext";const l=a=>{const[l,u]=t(a.theme?a.theme:"dark"),[s,f]=t(a.dateFormat?a.dateFormat:"MM/DD/YYYY"),[p,F]=t(a.language?a.language:"en"),[L,x]=t("en-US"),[j,k]=t("");n(()=>{a.theme&&u(a.theme),a.language&&(F(a.language),"function"==typeof i?.changeLanguage&&i.changeLanguage(a.language)),a.dateFormat&&f(a.dateFormat)},[a.theme,a.language,a.dateFormat]);const y=r(e=>{console.log("changeTheme",e),u(e)},[]),D=r(e=>{k(e)},[]),T=r(e=>{f(e)},[]),v=r(e=>{x(e)},[]),I=r(e=>{F(e),"function"==typeof i?.changeLanguage&&i.changeLanguage(e)},[]),Y=g(()=>({theme:l,brokenImage:j,dateFormat:s,language:p,locale:L,changeTheme:y,changeBrokenImage:D,changeDateFormat:T,changeLanguage:I,changeLocale:v}),[l,j,s,p,L,y,D,T,I,v]);return e(h,{className:"itd-provider","data-theme":l,"data-lang":p,children:e(c,{themeName:"dark"===l?"dark":"light",children:e(d.Provider,{value:Y,children:e(m,{children:e(o,{children:a.children})})})})})};export{l as ITDProvider,d as default};

package/dist/es/context/ITDThemeProvider.js

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

package/dist/es/context/styled.js

@@ -0,0 +1,15 @@
+import e from"styled-components";const o=e.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};
+  }
+
+`;export{o as Wrapper};

package/dist/es/datepicker/index.js

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

package/dist/es/datepicker/styled.js

@@ -0,0 +1,60 @@
+import o,{css as e}from"styled-components";const t=o.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:o})=>o.colorText};
+    transition: color .2s ease, opacity .2s ease;
+  }
+
+  ${({$disabled:o})=>o&&e`
+      cursor: not-allowed;
+    `}
+
+`,i=o.div`
+
+  box-shadow  : 0 0 30px rgba(0,0,0,.25);
+  z-index     : 2;
+  position    : absolute;
+  top         : calc(100% + 6px);
+
+  ${({$position:o})=>"left"===o?"left: 0;":"right: 0;"};
+
+  transform-origin: 0% 8%;
+  transform-box: fill-box;
+
+`,r=o.div`
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    transition: color .2s ease;
+    color: ${({theme:o})=>o.colorTextNeutral};
+  }
+
+  &:hover {
+    svg {
+      color: ${({theme:o})=>o.colorText};
+    }
+  }
+
+`;export{i as CalendarWrapper,r as RemoveButton,t as Wrapper};

package/dist/es/enums/enum.js

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

package/dist/es/flex/index.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{Wrapper as a}from"./styled.js";const e=({gap:e,justify:r,align:s,vertical:l,wrap:i,stretch:c,style:m,className:p,children:n})=>t(a,{$gap:e,$justify:r,$align:s,$vertical:l,$wrap:i,$stretch:c,style:m,className:p,children:n});export{e as default};

package/dist/es/flex/styled.js

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

package/dist/es/form/context/FormContext.js

@@ -0,0 +1 @@
+import{createContext as t}from"react";const o=t({});o.displayName="ITDFormContext";export{o as default};