@inntechcorp/it-design 2.2.90 → 3.1.0

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

@@ -0,0 +1,239 @@
+import t,{css as e}from"styled-components";import i from"../../tinyscrollbar/index.js";import{ComponentVariants as o}from"../../enums/enum.js";import{getSelectSizeBySize as d,getImageSizeBySize as r,getOptionSizeBySize as l,getFontSizeBySize as n,ICON_MARGIN_RIGHT as c}from"../style.settings.js";import{withOpacity as a}from"../../helpers/theme/Color.js";const m=(t,i)=>{const m=d(t),h=r(t),s=l(t),g=n(t);return e`
+
+    &.itd-select-dropdown {
+
+      box-shadow                  : ${({theme:t})=>i===o.DEFAULT?"none":t.colorModalShadow};
+      background-color            : ${({theme:t})=>t.colorBackgroundSelect};
+      border-radius               : calc( ${({theme:t})=>t.borderRadius} - 0.125rem);
+      border                      : ${({theme:t})=>i===o.FILLED?"none":"1px solid "+t.colorBorder};
+
+      .itd-select-dropdown-body {
+        max-height: 18.75rem;
+      }
+
+      &.multi .itd-checkbox {
+        
+        width: 100%;
+        height: 100%;
+        
+        padding-right: 0.9375rem;
+        padding-left: 0.9375rem;
+
+        .itd-checkbox-inner-wrapper {
+          width: 100%;
+          height: 100%;
+        }
+
+      }
+
+      ${p=m.height,e`
+
+    &[data-position="bottom"] {
+      top: calc(${p} + 0.25rem);
+    }
+
+    &[data-position="top"] {
+      bottom: calc(${p} + 0.25rem);
+    }
+
+  `}
+      ${e`
+
+    &[data-direction="left"] {
+      left: 0;
+    }
+
+    &[data-direction="right"] {
+      right: 0;
+    }
+
+  `}
+
+      &.single {
+
+        .itd-select-item.itd-select-item-option {
+          
+          .itd-select-option-single {
+            padding-right     : ${s.paddingX};
+            padding-left      : ${s.paddingX};
+            height            : 100%;
+          }
+
+        }
+
+      }
+
+      .itd-select-item.itd-select-item-option {
+
+        padding-top       : 0;
+        padding-bottom    : 0;
+        height            : ${s.height};
+
+        /* Tüm durumlarda tipografi sabit kalsın (hover/selected değişmesin) */
+        span, label {
+          font-size       : ${g.fontSize};
+          line-height     : ${g.lineHeight};
+          font-weight     : ${g.fontWeight};
+        }
+
+        &.itd-item-single, &.itd-item-multi {
+          
+          background-color: ${({theme:t})=>t.colorBackgroundSelectItem};
+
+          span, label {
+            color         : ${({theme:t})=>t.colorTextNeutral};
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:t})=>a(t.colorTextNeutral,.25)};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:t})=>a(t.colorTextNeutral,.1)};
+              }
+            }
+          }
+
+          .itd-image {
+
+            min-width     : ${h.width};
+            min-height    : ${h.height};
+            margin-right  : ${c};
+
+            .itd-select-option-image {
+              width       : ${h.width};
+              height      : ${h.height};
+            }
+
+            .itd-select-option-icon {
+              color       : ${({theme:t})=>t.colorIcon};
+              font-size   : ${h.width};
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-active {
+          
+          &.itd-item-single, &.itd-item-multi {
+            
+            background-color: ${({theme:t})=>t.colorBackgroundSelectItemHover};
+            
+            span, label {
+              color: ${({theme:t})=>t.colorText};
+            }
+
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:t})=>a(t.colorTextNeutral,.5)};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:t})=>a(t.colorTextNeutral,.15)};
+              }
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-selected {
+
+          &.itd-item-single, &.itd-item-multi {
+              
+            background-color: ${({theme:t})=>t.colorBackgroundSelectItemSelected};
+
+            span, label {
+              color: ${({theme:t})=>t.colorText};
+            }
+
+          }
+
+          &.itd-item-multi:not(&.itd-select-item-option-disabled) {
+
+            .itd-checkbox-default {
+              input {
+                border-color: ${({theme:t})=>t.primary};
+              }
+            }
+
+            .itd-checkbox-filled {
+              .itd-checkbox-checkmark {
+                background-color: ${({theme:t})=>t.primary};
+              }
+            }
+
+          }
+
+        }
+
+        &.itd-select-item-option-disabled {
+
+          &.itd-item-single, &.itd-item-multi {
+            span, label {
+              color: ${({theme:t})=>t.colorDisabledText};
+            }
+          }
+
+        }
+        
+      }
+
+    }
+  `;var p},h=t.div`
+  
+  min-width: 100%;
+  min-height: 2.5rem;
+  overflow: hidden;
+  position: absolute;
+  z-index: 15;
+  transform-box: fill-box;
+  transform-origin: 50% 1%;
+  outline: none;
+  
+  /* Portal modunda fixed positioning */
+  &[data-portal="true"] {
+    position: fixed;
+    min-width: auto;
+    
+    /* TOP pozisyonunda animasyon yönü ters olmalı */
+    &[data-position="top"] {
+      transform-origin: 50% 100%;
+    }
+
+    /* ------------------------ */
+    // DROPDOWN MENU
+    /* ------------------------ */
+    ${({$size:t,$variant:e})=>m(t,e)}
+
+  }
+  
+  ul {
+    min-width: max-content;
+  }
+
+
+`,s=t(i)`
+  
+`,g=t.div`
+  /* Portal mode - document.body'de ama Select CSS'lerini inherit ediyor */
+  position: relative;
+  height: max-content;
+  
+  ul {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+  }
+`;export{s as BodyWrapper,g as PortalWrapper,h as Wrapper};

package/dist/es/select/index.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useMemo as i,useCallback as n,useState as s,useEffect as l,useImperativeHandle as a,createElement as c}from"react";import d from"./option/Option.js";import u from"./toggle/Toggle.js";import m from"./dropdown/Dropdown.js";import f from"../hooks/useOnClickOutside.js";import{Wrapper as p}from"./styled.js";import{useTranslation as g}from"react-i18next";import{ComponentSizes as y,ComponentVariants as L,ComponentXPositions as h,ComponentYPositions as v,ComponentSizesSlug as E}from"../enums/enum.js";import A from"../utils/GetSizeSlugBySize.js";import w from"../node_modules/uuid/dist/esm-browser/v4.js";import b from"../hooks/useOnESCKeyDown.js";import"../logger/index.js";import"react-router-dom";import"axios";let S=null;const k=new Map,T=e=>{S===e&&(S=null)},C=o(({id:o,position:C=v.BOTTOM,direction:j=h.RIGHT,size:x=y.DEFAULT,variant:D=L.DEFAULT,placeholder:M="Please Select",className:I="",multi:U=!1,disabled:F=!1,showSearch:O=!1,locked:z=!1,options:G=[],value:R,defaultValue:B,label:N,prefix:V,icon:$,image:_,style:X,onChange:q,onUpdate:H},K)=>{const{t:P}=g("itd"),J=r(null),Q=i(()=>o||"itd-select-"+w(),[o]),W=n(()=>{try{const e=document.getElementById(Q);e&&e.focus({preventScroll:!0})}catch{const e=document.getElementById(Q);e&&e.focus()}},[Q]),[Y,Z]=s(!1),[ee,te]=s(""),[oe,re]=s(void 0),[ie,ne]=s(""),[se,le]=s(!1),[ae,ce]=s(!1),[de,ue]=s(!1),[me,fe]=s(!1);l(()=>{Y||setTimeout(()=>{te("")},300)},[Y]),l(()=>{void 0!==B&&re(B)},[B]),l(()=>{void 0!==R&&re(R)},[R]),l(()=>{if(!se)return;const e=e=>{["ArrowDown","ArrowUp","Enter","Escape","Tab","Home","End"].includes(e.key)&&ue(!0)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[se]),f(J,e=>{if(Y){const t=document.getElementById("itd-select-portal-root");if(t&&t.contains(e.target))return;const o=J.current?.querySelector(".itd-select-selector");if(o&&o.contains(e.target))return;Z(!1),me||de?(W(),le(!0),ce(!0)):(le(!1),ce(!1),fe(!1),ue(!1))}}),b(()=>{Y&&ye(!1,"keyboard")}),l(()=>{const e=J.current;if(!e)return;const t=t=>{le(!0),t.relatedTarget&&e.contains(t.relatedTarget)||(fe(!0),ce(!0))},o=()=>{le(!1),ce(!1),fe(!1),ue(!1)};e.addEventListener("focusin",t),e.addEventListener("focusout",o);return((e,t)=>{k.set(e,t)})(Q,()=>{Z(!1),le(!1),ce(!1)}),()=>{e.removeEventListener("focusin",t),e.removeEventListener("focusout",o),(e=>{k.delete(e)})(Q)}},[Q]);const pe=n(e=>{z||Z(e)},[z]),ge=n(()=>{z||le(!0)},[z]),ye=n((e,t)=>{z&&e||(e?((e=>{if(S&&S!==e){const e=k.get(S);e&&e()}S=e})(Q),W()):(T(Q),W(),le(!0),"pointer"===t?(ce(!1),fe(!1),ue(!1)):"keyboard"===t?(ce(!0),ue(!0)):ce(!(!me&&!de))),Z(e))},[z,W,Q,me,de]),Le=n(e=>{z||Y&&te(e)},[Y,z]),he=(e,t=!0,o=!0)=>{H&&H(e,t,o)};a(K,()=>({reset(e=!0,t=!0){const o=B||(U?[]:void 0);re(o),ne(""),he(o,e,t)},setValue(e,t=!0,o=!0){re(e),he(e,t,o)},getValue:()=>oe||(U?[]:""),setError(e){ne(e||"")},clear(){}}));const ve=n(()=>{Z(!1),W(),le(!0),de?ce(!0):(ce(!1),fe(!1),ue(!1))},[W,de]),Ee=n(e=>{ne(""),he(e),re(e),U||(T(Q),Z(!1),W(),le(!0),de?ce(!0):(ce(!1),fe(!1),ue(!1))),q&&q(e)},[U,q,he,Q,W,de]),Ae=i(()=>{let t=[];return G.forEach(e=>{if(""!==ee&&"string"==typeof e.value&&("searchText"in e&&"string"==typeof e.searchText?!e.searchText.toLocaleLowerCase().includes(ee.toLocaleLowerCase()):!e.value.toLocaleLowerCase().includes(ee.toLocaleLowerCase())&&!(e=>{if("string"==typeof e)return e.toLocaleLowerCase();if(Array.isArray(e)){let t="";return e.forEach(e=>{"string"==typeof e&&(t+=e.toLocaleLowerCase())}),t}return""})(e.label).includes(ee.toLocaleLowerCase())))return;let o={value:e.value,label:e.label,disabled:e.disabled||!1,variant:D,size:A(x)};e.icon&&(o={...o,icon:e.icon}),e.image&&(o={...o,image:e.image}),e.key&&(o={...o,customKey:e.key}),U&&oe&&Array.isArray(oe)&&(o={...o,multi:!0,checked:oe.includes(e.value.toString())}),t.push(c(d,{...o,key:e.key?e.key:e.value.toString()}))}),0===t.length&&t.push(e("div",{className:"itd-select-not-found",style:{padding:"1.25rem",textAlign:"center"},children:"Not Found"},"not-found")),t},[G,ee,U,oe]),we=()=>x===y.X_SMALL?E.X_SMALL:x===y.SMALL?E.SMALL:x===y.MEDIUM?E.MEDIUM:x===y.DEFAULT?E.DEFAULT:x===y.LARGE?E.LARGE:x===y.X_LARGE?E.X_LARGE:E.DEFAULT,be=i(()=>({style:X,disabled:F,$hasImage:null!=_,$hasIcon:null!=$,$size:we(),$variant:D}),[X,F,_,$,x,D,oe]),Se=i(()=>{let e="itd-select";return e+=" itd-select-"+D,e+=" itd-select-"+(U?"multi":"single"),e+=" itd-select-"+j,e+=" itd-select-"+we(),!Y&&ae&&(e+=" keyboard-focus"),Y&&(e+=" itd-select-open"),ie&&(e+=" itd-select-status-error"),F&&(e+=" itd-select-disabled"),z&&(e+=" itd-select-locked"),O&&(e+=" itd-select-search"),$&&(e+=" itd-icon"),_&&(e+=" itd-image"),""!==I&&(e+=" "+I),e},[D,U,j,x,Y,ie,ae,F,O,$,_,I,z]);return l(()=>{if(Y&&U&&oe&&Array.isArray(oe)&&oe.length>0){const e=G.find(e=>oe.includes(e.value.toString()));if(e){const t=document.querySelector(`[data-value="${e.value}"]`);t&&setTimeout(()=>{t.scrollIntoView({behavior:"instant",block:"nearest",inline:"start"})},50)}}},[Y]),t(p,{ref:J,className:Se,...be,children:[e(u,{id:Q,placeholder:G.length>0?M:"",onChange:pe,onFocus:ge,onShow:ye,onFilter:Le,errorMessage:ie,size:x,icon:$,prefix:V,image:_,label:(()=>{if(N)return N;if(void 0===oe)return;let e="";if(U){const t=G.filter(e=>e.value===oe[0])[0];Array.isArray(oe)&&(1===oe.length?t&&(e=t.label):oe.length>1&&(e=P("placeholders.multipleSelection",{count:oe.length})))}else{const t=G.filter(e=>e.value===oe)[0];t&&(e=t.label)}return e})(),disabled:F,isOpen:Y,multi:U,locked:z,showSearch:O}),e(m,{onClose:ve,onChange:Ee,defaultValue:oe,position:C,direction:j,variant:D,isOpen:Y,multi:U,usePortal:!0,selectRef:J,size:x,children:Ae})]})});C.displayName="ITD-Select";export{C as default};

package/dist/es/select/option/Option.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as i,useRef as o,useState as n,useEffect as a,useMemo as l}from"react";import c from"../../checkbox/index.js";import{Wrapper as s,Single as r,ImageWrapper as d}from"./styled.js";import{ComponentSizesSlug as m,ComponentVariants as u}from"../../enums/enum.js";const p=({multi:i=!1,checked:p=!1,variant:h=u.DEFAULT,size:g=m.DEFAULT,icon:v="",image:b="",value:f="",customKey:k="",disabled:N=!1,isActive:x=!1,index:y=-1,onHover:T,onChange:P,label:j})=>{const A=o(null),[C,E]=n(null);a(()=>{p&&!i&&setTimeout(()=>A.current?.scrollIntoView({behavior:"instant",block:"nearest",inline:"start"}),50)},[p,i]);const S=e=>{e.stopPropagation(),P&&j&&P(f,!0,j)},D=e=>{e.stopPropagation(),P&&j&&P(f,e.checked,j)},F=e=>{E(e.touches[0].clientY)},M=e=>{if(null!==C){const t=e.changedTouches[0].clientY;Math.abs(t-C)<10&&S(e)}E(null)},U=l(()=>{let e="itd-select-item itd-select-item-option";return i||(e+=" itd-item-single"),i&&(e+=" itd-item-multi"),p&&(e+=" itd-select-item-option-selected"),N&&(e+=" itd-select-item-option-disabled"),g&&(e+=" itd-select-item-option-"+g),h&&(e+=" itd-select-item-option-"+h),!x||p||N||(e+=" itd-select-item-option-active"),e},[i,p,x,N,g,h]);return e(s,{className:U,ref:A,"data-value":f.toString(),onMouseMove:()=>{if(y>=0&&T)if(N)T(-1);else{T(y);const e=document.activeElement;e&&"INPUT"===e.tagName&&"checkbox"===e.getAttribute("type")&&e.blur()}},onClick:i?e=>{i&&!N&&(e.stopPropagation(),D({checked:!p,value:f,className:"itd-checkbox",disabled:!1,target:null,stopPropagation:()=>{},preventDefault:()=>{}}))}:void 0,style:i?{cursor:"pointer"}:void 0,children:i?e("div",{onFocus:()=>{!N&&y>=0&&T&&T(y)},children:e(c,{className:"itd-select-option-multi"+(x?" itd-checkbox-keyboard-active":""),variant:h,checked:p,readOnly:!0,disabled:N,animated:!0,onChange:D,children:j})}):t(r,{className:"itd-select-option-single",onClick:S,onTouchStart:F,onTouchEnd:M,"data-disabled":N?"true":"false",children:[b?e(d,{className:"itd-image",children:e("img",{className:"itd-select-option-image",src:b,height:"20",alt:String(f)})}):v?e(d,{className:"itd-image",children:v}):null,e("span",{children:j})]})},k||f.toString())};var h=i(p);p.displayName="Option";export{h as default};

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

@@ -0,0 +1,36 @@
+import t from"styled-components";const e=t.li`
+
+  display: flex;
+  min-width: max-content;
+  align-items: center;
+  cursor: pointer;
+  
+  &:not(:last-child) {
+    margin-bottom: 0.0625rem;
+  }
+
+`,i=t.div`
+
+  img {
+    pointer-events: none;
+    display: block;
+  }
+
+`;t.div`
+
+`;const n=t.div`
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+
+  span {
+    white-space: nowrap;
+  }
+
+`;export{i as ImageWrapper,n as Single,e as Wrapper};

package/dist/es/select/style.settings.js

@@ -0,0 +1 @@
+import{ComponentSizesSlug as i}from"../enums/enum.js";import{SELECT_SIZE_MAP as g,ICON_TOKENS as e}from"../helpers/theme/tokens.js";const t="0.4375rem",h="1.25rem",d=g=>g===i.X_SMALL?e.image.xs:g===i.SMALL?e.image.sm:g===i.MEDIUM?e.image.md:g===i.DEFAULT?e.image.df:g===i.LARGE?e.image.lg:g===i.X_LARGE?e.image.xl:e.image.df,n=g=>g===i.X_SMALL?e.arrow.xs:g===i.SMALL?e.arrow.sm:g===i.MEDIUM?e.arrow.md:g===i.DEFAULT?e.arrow.df:g===i.LARGE?e.arrow.lg:g===i.X_LARGE?e.arrow.xl:e.arrow.df,f=e=>e===i.X_SMALL?{paddingX:g.xs.paddingX,height:g.xs.height}:e===i.SMALL?{paddingX:g.sm.paddingX,height:g.sm.height}:e===i.MEDIUM?{paddingX:g.md.paddingX,height:g.md.height}:e===i.DEFAULT?{paddingX:g.df.paddingX,height:g.df.height}:e===i.LARGE?{paddingX:g.lg.paddingX,height:g.lg.height}:e===i.X_LARGE?{paddingX:g.xlg.paddingX,height:g.xlg.height}:{paddingX:g.df.paddingX,height:g.df.height},a=e=>e===i.X_SMALL?{paddingX:g.xs.paddingX,height:g.xs.height}:e===i.SMALL?{paddingX:g.sm.paddingX,height:g.sm.height}:e===i.MEDIUM?{paddingX:g.md.paddingX,height:g.md.height}:e===i.DEFAULT?{paddingX:g.df.paddingX,height:g.df.height}:e===i.LARGE?{paddingX:g.lg.paddingX,height:g.lg.height}:e===i.X_LARGE?{paddingX:g.xlg.paddingX,height:g.xlg.height}:{paddingX:g.df.paddingX,height:g.df.height},o=e=>e===i.X_SMALL?{fontSize:g.xs.fontSize,lineHeight:g.xs.lineHeight,fontWeight:g.xs.fontWeight}:e===i.SMALL?{fontSize:g.sm.fontSize,lineHeight:g.sm.lineHeight,fontWeight:g.sm.fontWeight}:e===i.MEDIUM?{fontSize:g.md.fontSize,lineHeight:g.md.lineHeight,fontWeight:g.md.fontWeight}:e===i.DEFAULT?{fontSize:g.df.fontSize,lineHeight:g.df.lineHeight,fontWeight:g.df.fontWeight}:e===i.LARGE?{fontSize:g.lg.fontSize,lineHeight:g.lg.lineHeight,fontWeight:g.lg.fontWeight}:e===i.X_LARGE?{fontSize:g.xlg.fontSize,lineHeight:g.xlg.lineHeight,fontWeight:g.xlg.fontWeight}:{fontSize:g.df.fontSize,lineHeight:g.df.lineHeight,fontWeight:g.df.fontWeight};export{t as ICON_MARGIN_RIGHT,h as ICON_SIZE_DEFAULT,n as getArrowSizeBySize,o as getFontSizeBySize,d as getImageSizeBySize,f as getOptionSizeBySize,a as getSelectSizeBySize};

package/dist/es/select/styled.js

@@ -0,0 +1,331 @@
+import e,{css as t}from"styled-components";import{withOpacity as o}from"../helpers/theme/Color.js";import{getArrowSizeBySize as r,getImageSizeBySize as i,getFontSizeBySize as n,ICON_MARGIN_RIGHT as l,ICON_SIZE_DEFAULT as s,getSelectSizeBySize as c}from"./style.settings.js";import{ThemeAppearances as d}from"../enums/enum.js";const a=e.div`
+
+  position: relative;
+  height: max-content;
+
+  ul {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+  }
+
+  /* ------------------------ */
+  // TOGGLE
+  /* ------------------------ */
+  ${e=>(e=>{const o=r(e),c=i(e),d=n(e);return t`
+    .itd-select-selector {
+
+      border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+      transition-property         : border-color;
+      transition-duration         : ${({theme:e})=>e.transitionDuration};
+      transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+      .itd-image.itd-svg {
+        display         : flex;
+        align-items     : center;
+        margin-right    : ${l};
+        min-width       : ${c.width};
+        min-height      : ${c.height};
+      }
+
+      img, .itd-svg svg {
+        width           : ${c.width};
+        height          : ${c.height};
+      }
+
+      .itd-select-arrow {
+        transition-property         : transform;
+        transition-duration         : ${({theme:e})=>e.transitionDuration};
+        transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+        svg {
+          width   : ${o.width};
+          height  : ${o.height};
+          color   : ${({theme:e})=>e.colorIcon};
+        }
+      }
+
+      .itd-icon {
+        color: ${({theme:e})=>e.colorIcon};
+        font-size: ${s};
+      }
+
+      .itd-select-status-error {
+        border: 1px solid ${({theme:e})=>e.colorErrorBorder};
+        border-radius: calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+      }
+
+      .itd-select-selection-item {
+
+        .itd-select-selection-label {
+
+          &.itd-select-selection-item-single {
+
+            border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+            transition-property         : background-color;
+            transition-duration         : ${({theme:e})=>e.transitionDuration};
+            transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+            input, input::placeholder {
+              font-weight: ${d.fontWeight};
+            }
+
+            input {
+          
+              font-size: ${d.fontSize};
+              color: ${({theme:e})=>e.colorText};
+              &::placeholder {
+                color: ${({theme:e})=>e.colorPlaceholder};
+              }
+            }
+
+          }
+
+          border-radius               : calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+          transition-property         : background-color;
+          transition-duration         : ${({theme:e})=>e.transitionDuration};
+          transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+
+          [type=text] {
+            font-size: ${d.fontSize};
+            color: ${({theme:e})=>e.colorText};
+            caret-color: ${({theme:e})=>e.colorText};
+
+            &::placeholder {
+              color: rgba(0, 0, 0, 0);
+            }
+          }
+
+          span, label {
+            
+            color: ${({theme:e})=>e.colorText};
+            font-weight: ${d.fontWeight};
+
+            &::before {
+              color                       : ${({theme:e})=>e.colorTextMuted};
+              transition-property         : transform;
+              transition-duration         : ${({theme:e})=>e.transitionDuration};
+              transition-timing-function  : ${({theme:e})=>e.transitionTimingFunction};
+            }
+
+          }
+
+        }
+
+      }
+    }
+  `})(e.$size)}
+  
+  /* ------------------------ */
+  // SIZE
+  /* ------------------------ */
+  ${e=>(e=>{const o=c(e);return t`
+
+    .itd-select-selector {
+
+      /* debug border removed */
+      height        : ${o.height}; 
+      padding-right : ${o.paddingX};
+      padding-left  : ${o.paddingX};
+
+    }
+    
+  `})(e.$size)}
+
+  /* ------------------------ */
+  // TYPE
+  /* ------------------------ */
+  ${()=>t`
+
+    &.itd-select-default {
+
+      .itd-select-selector {
+
+        box-shadow        : ${({theme:e})=>e.boxShadow};
+        outline           : 0 solid transparent;
+        outline-offset    : ${({theme:e})=>e.ringOffset};
+        border            : 1px solid transparent;
+        border-color      : ${({theme:e})=>e.colorBorder};
+        
+        transition      : outline 100ms linear,
+                          border-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+
+      }
+
+      &.itd-select-open {
+        .itd-select-selector {
+          /* Default varyant açıkken border seçili görünür */
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===d.LIGHT?400:900]};
+        }
+        &.itd-select-status-error {
+          .itd-select-selector {
+            border-color: ${({theme:e})=>e.colorErrorBorder};
+          }
+        }
+      }
+
+      /* Keyboard/pointer focus: gösterilebilir outline. TAB ile outline görünür, pointer ile de tutarlı davranır */
+      &.keyboard-focus {
+        .itd-select-selector {
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===d.LIGHT?400:900]};
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>o(e.primaryScale[e.appearance===d.LIGHT?400:900],.5)};
+        }
+      }
+
+      &.keyboard-focus.itd-select-status-error {
+        .itd-select-selector {
+          border-color: ${({theme:e})=>e.colorErrorBorder};
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>o(e.colorErrorBorder,.5)};
+        }
+      }
+
+      &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) {
+        .itd-select-selector:hover {
+          border-color: ${({theme:e})=>e.colorBorderHover};
+        }
+      }
+
+      /* Mouse basılı tutulduğunda (açılma anında) border seçili görünsün */
+      &:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          border-color: ${({theme:e})=>e.primaryScale[e.appearance===d.LIGHT?400:900]};
+        }
+      }
+
+      /* Error durumunda active state */
+      &.itd-select-status-error:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          border-color: ${({theme:e})=>e.colorErrorBorder};
+        }
+      }
+
+    }
+
+    &.itd-select-filled {
+
+      &.itd-select-open {
+        .itd-select-selector {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+      .itd-select-selector {
+
+        border            : none;
+        background-color  : ${({theme:e})=>e.colorBackgroundAlt};
+        outline           : 0 solid transparent;
+        outline-offset    : ${({theme:e})=>e.ringOffset};
+        
+        transition        : outline 100ms linear,
+                            background-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+                          
+        
+      }
+
+      &.keyboard-focus {
+        .itd-select-selector {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>o(e.primaryScale[e.appearance===d.LIGHT?400:900],.5)};
+        }
+      }
+
+      &.keyboard-focus.itd-select-status-error {
+        .itd-select-selector {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>o(e.colorErrorBorder,.5)};
+        }
+      }
+
+      &:not(.itd-select-open):not(.itd-select-disabled):not(.keyboard-focus) {
+        .itd-select-selector:hover {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+      /* Mouse basılı tutulduğunda (açılma anında) background seçili görünsün */
+      &:not(.itd-select-disabled):not(.itd-select-open) {
+        .itd-select-selector:active {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+
+    }
+
+  `}
+
+  /* ------------------------ */
+  // LABEL SIZE
+  /* ------------------------ */
+  ${e=>(e=>{const o=i(e),r=c(e),l=n(e);return t`
+      
+    .itd-select-selector {
+      .itd-icon {
+        font-size: ${o.height};
+      }
+    }
+
+    .itd-select-selection-item {
+      .itd-select-selection-label {
+
+        [type=text] {
+          height: ${r.height};
+        }
+
+        &.itd-select-selection-item-single {
+          span, label {
+            font-size   : ${l.fontSize};
+            line-height : ${l.lineHeight};
+            font-weight : ${l.fontWeight};
+          }
+        }
+
+      }
+    }
+    
+  `})(e.$size)}
+
+  /* ------------------------ */
+  // DISABLED
+  /* ------------------------ */
+  ${()=>t`
+    &[disabled] {
+
+      .itd-select-selector {
+
+        background-color: ${({theme:e})=>e.colorDisabledBg};
+        border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+        border-radius: calc( ${({theme:e})=>e.borderRadius} - 0.125rem);
+        cursor: not-allowed;
+
+        .itd-select-selection-item input[disabled] {
+          color: ${({theme:e})=>e.colorDisabledText};
+          &::placeholder {
+            color: ${({theme:e})=>e.colorDisabledText};
+          }
+        }
+        
+        .itd-select-arrow {
+          svg {
+            fill: ${({theme:e})=>e.colorDisabledText};
+          }
+        }
+
+        .itd-image {
+          filter: grayscale(100%);
+          opacity: 0.5;
+        }
+        
+      }
+
+    } 
+  `}
+
+  /* ------------------------ */
+  // LOCKED
+  /* ------------------------ */
+  ${()=>t`
+
+    &.itd-select-locked .itd-select-selector {
+      cursor: not-allowed;
+    }
+  `}
+
+`;export{a as Wrapper};

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useRef as s,useState as o,useEffect as r}from"react";import t from"./label/Label.js";import l from"../../image/index.js";import{Wrapper as n,Prefix as a,PreIcon as c,LabelWrapper as d,Suffix as m,Icon as h,LockIconWrapper as f}from"./styled.js";import{ErrorBorder as p,ErrorIcon as u}from"../../utils/CommonStyledComponents.js";import g from"../../utils/InlineSVGCached.js";import{ComponentSizes as N}from"../../enums/enum.js";import b from"../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";const w=({id:w,errorMessage:j="",isOpen:v=!1,locked:S=!1,disabled:x=!1,showSearch:F=!1,size:z=N.DEFAULT,placeholder:C,label:D,prefix:O,icon:$,image:k,onFocus:y,onShow:L,onFilter:P})=>{const A=s(null),[E,G]=o(!1);r(()=>{G(v)},[v]);const H=()=>{if(S)return i(f,{className:"itd-svg",width:"16",height:"16"})},I=()=>{if(""!==j&&!x)return i(u,{message:j,className:"itd-select-failed itd-error-icon",tooltipPosition:"top-right"})};return e(n,{$showSearch:F,className:"itd-select-selector",onPointerDown:x||S?void 0:e=>{0===e.button&&(e.preventDefault(),y(),L(!E,"pointer"))},children:[(()=>{if(O)return i(a,{className:"itd-select-prefix",children:O})})(),$?i(c,{className:"itd-icon "+$}):k?k.indexOf(".svg")>-1?i(g,{src:k,className:"itd-image itd-svg"}):i(l,{src:k,height:"20",brokenHeight:"20",className:"itd-image"}):void 0,i(d,{className:"itd-select-selection-item",children:i(t,{id:w,placeholder:C,label:D||void 0,size:z,isOpen:E,showSearch:F,disabled:x,onFocus:y,onFilter:P,onShow:L,ref:A})}),(()=>{if(""!==j&&!x)return i(p,{$fullSize:!0,className:"itd-error-border"})})(),e(m,{className:"itd-select-suffix",children:[I(),H(),i(h,{$open:E,className:"itd-select-arrow",children:i(b,{size:16})})]})]})};export{w as default};

package/dist/es/select/toggle/label/Label.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useRef as r,useState as l,useMemo as n,useEffect as o,useImperativeHandle as a,useCallback as i}from"react";import{Wrapper as s}from"./styled.js";import u from"../../../node_modules/uuid/dist/esm-browser/v4.js";const c=t(({id:t="",isOpen:c=!1,showSearch:d=!1,disabled:p=!1,label:f,placeholder:m,onFocus:v,onFilter:g,onShow:h},y)=>{const b=r(null),[w,D]=l(null),[E,S]=l(!1),A=n(()=>t||"itd-select-toggle-single-"+u(),[t]);o(()=>{if(!c)return D(null),void S(!1);F(),w===f&&D(null)},[c]),o(()=>{D(void 0!==f?f:null)},[f]);const F=()=>{d&&(b.current?.focus(),b.current?.select())};a(y,()=>({setFocus(){F()}}));const j=i(e=>{if(E)return;let t="";t=e.target.defaultValue!==w&&""!==e.target.defaultValue?e.target.value.replace(e.target.defaultValue,""):e.target.value,D(t),g(t)},[w,g,E]),k=n(()=>{if(void 0!==f)return"string"!=typeof f&&"number"!=typeof f?"type mismatch! please define custom label parameter.":f.toString();let e="";return c?null!==w?e=w:void 0===f&&void 0!==m&&(e=m):void 0!==m&&(e=m),"string"!=typeof e&&"number"!=typeof e?"type mismatch! please define custom label parameter.":e.toString()},[f,c,w,m]),x=n(()=>{let e="";return c?null!==w&&(e=w):void 0!==f&&(e=f),"string"!=typeof e&&"number"!=typeof e?"type mismatch! please define custom label parameter.":e},[c,w,f]),C=i(e=>{const t=e.key;if("Escape"===t)return e.preventDefault(),void h(!1);if("Tab"!==t){if(c||!d||1!==t.length&&"Backspace"!==t&&"Delete"!==t){if(c&&d){if("ArrowDown"===t||"ArrowUp"===t||"Home"===t||"End"===t)return e.preventDefault(),void S(!0);if("Enter"===t)return void(E&&e.preventDefault());1!==t.length&&"Backspace"!==t&&"Delete"!==t||S(!1)}return c||" "!==t&&"Enter"!==t&&"ArrowDown"!==t&&"ArrowUp"!==t?void 0:(h(!0),void e.preventDefault())}h(!0)}},[c,h,d]),V=i(()=>{v();try{const e=b.current;e&&!c&&e.setSelectionRange(e.value.length,e.value.length)}catch{}},[v,c]),B=n(()=>({type:"text",readOnly:!d,autoComplete:"off"}),[d]),N=n(()=>{let e="itd-select-selection-input";return d||(e+=" itd-select-no-interactions"),e},[d]),O=n(()=>({width:"100%",pointerEvents:"none",caretColor:d?"inherit":"transparent"}),[d]);return e(s,{className:"itd-select-selection-label itd-select-selection-item-single",children:e("input",{id:A,className:N,value:x,disabled:p,placeholder:k,onChange:j,onKeyDown:C,onFocus:V,ref:b,style:O,...B})})});export{c as default};

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

@@ -0,0 +1,5 @@
+import t from"styled-components";const e=t.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;export{e as Wrapper};