@dktunited-techoff/techoff-suite-ui 1.8.9 → 1.9.0

package/esm/components/TsIcon/icons/index.js

@@ -57,6 +57,7 @@ export const icons = {
     'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
     'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g>	<g>		<path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>		<path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>		<path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6			l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>	</g></g></svg>',
     'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
+    't-shirt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>',
     'timer': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6177 5.9681L19.0711 4.51472L20.4853 5.92893L19.0319 7.38231C20.2635 8.92199 21 10.875 21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C14.125 4 16.078 4.73647 17.6177 5.9681ZM12 20C15.866 20 19 16.866 19 13C19 9.13401 15.866 6 12 6C8.13401 6 5 9.13401 5 13C5 16.866 8.13401 20 12 20ZM11 8H13V14H11V8ZM8 1H16V3H8V1Z"></path></svg>',
     'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
     'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',

package/esm/components/TsIcon/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TsIcon/icons/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,OAAO,EAAE,iqBAAiqB;IAC1qB,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,YAAY,EAAE,gPAAgP;IAC9P,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,qBAAqB,EAAE,q2GAAq2G;IAC53G,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,sBAAsB,EAAE,s9DAAs9D;IAC9+D,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,YAAY,EAAE,qaAAqa;IACnb,SAAS,EAAE,2/BAA2/B;IACtgC,iBAAiB,EAAE,4nBAA4nB;IAC/oB,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,4cAA4c;IACrd,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TsIcon/icons/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,OAAO,EAAE,iqBAAiqB;IAC1qB,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,YAAY,EAAE,gPAAgP;IAC9P,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,qBAAqB,EAAE,q2GAAq2G;IAC53G,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,sBAAsB,EAAE,s9DAAs9D;IAC9+D,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,YAAY,EAAE,qaAAqa;IACnb,SAAS,EAAE,2/BAA2/B;IACtgC,iBAAiB,EAAE,4nBAA4nB;IAC/oB,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,SAAS,EAAE,0rBAA0rB;IACrsB,OAAO,EAAE,4cAA4c;IACrd,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}

package/esm/components/TsIcon/icons/index.ts

@@ -57,6 +57,7 @@ export const icons: { [k: string]: string } = {
   'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
   'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g>	<g>		<path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>		<path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>		<path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6			l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>	</g></g></svg>',
   'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
+  't-shirt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>',
   'timer': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6177 5.9681L19.0711 4.51472L20.4853 5.92893L19.0319 7.38231C20.2635 8.92199 21 10.875 21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C14.125 4 16.078 4.73647 17.6177 5.9681ZM12 20C15.866 20 19 16.866 19 13C19 9.13401 15.866 6 12 6C8.13401 6 5 9.13401 5 13C5 16.866 8.13401 20 12 20ZM11 8H13V14H11V8ZM8 1H16V3H8V1Z"></path></svg>',
   'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
   'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',

package/esm/components/TsIcon/icons/t-shirt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>

package/esm/components/TsLoader/TsLoader.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import './TsLoader.css';
 export const TsLoader = ({ size = 'md' }) => {
+    // #########
+    // Rendering
     return React.createElement("div", { className: `ts-loader ts-loader--${size}` });
 };
 //# sourceMappingURL=TsLoader.js.map

package/esm/components/TsLoader/TsLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsLoader.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAiB,EAAE,EAAE;IACzD,OAAO,6BAAK,SAAS,EAAE,wBAAwB,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC"}
+{"version":3,"file":"TsLoader.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAiB,EAAE,EAAE;IACzD,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAE,wBAAwB,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC"}

package/esm/components/TsSwitcher/TsSwitcher.css

@@ -0,0 +1,35 @@
+.ts-content-switcher {
+  display: flex;
+  width: 100%;
+}
+.ts-content-switcher > div {
+  margin-right: 8px;
+}
+.ts-switcher {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  background: #ebecf7;
+  color: #3643ba;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.ts-switcher--selected {
+  background: #3643ba;
+  color: #ffffff;
+}
+.ts-switcher-icon {
+  margin-right: 8px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsSwitcher/TsSwitcher.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsSwitcherProps } from './TsSwitcher.types';
+import './TsSwitcher.css';
+export declare const TsSwitcher: ({ defaultSwitch, switchs, onChange }: TsSwitcherProps) => React.JSX.Element;

package/esm/components/TsSwitcher/TsSwitcher.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsSwitcher.css';
+export const TsSwitcher = ({ defaultSwitch, switchs, onChange }) => {
+    const [selectedSwitch, setSelectedSwitch] = useState(defaultSwitch ?? '');
+    // ########
+    // Handlers
+    const handleChange = (val) => {
+        setSelectedSwitch(val);
+        onChange(val);
+    };
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-content-switcher" }, switchs.map(s => (React.createElement("div", { key: s.value, className: `ts-switcher ${selectedSwitch === s.value ? 'ts-switcher--selected' : ''}`, onClick: () => handleChange(s.value) },
+        s.icon && (React.createElement("div", { className: "ts-switcher-icon" },
+            React.createElement(TsIcon, { name: s.icon }))),
+        React.createElement("div", { className: "ts-switcher-label" }, s.label))))));
+};
+//# sourceMappingURL=TsSwitcher.js.map

package/esm/components/TsSwitcher/TsSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSwitcher.js","sourceRoot":"","sources":["../../../src/components/TsSwitcher/TsSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAClF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAS,aAAa,IAAI,EAAE,CAAC,CAAC;IAElF,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACnC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QACvB,QAAQ,CAAC,GAAG,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB,IACjC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAChB,6BACE,GAAG,EAAE,CAAC,CAAC,KAAK,EACZ,SAAS,EAAE,eAAe,cAAc,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EACrF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;QAEnC,CAAC,CAAC,IAAI,IAAI,CACT,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,oBAAC,MAAM,IAAC,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI,CACpB,CACP;QACD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,CAAC,CAAC,KAAK,CAAO,CAC9C,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsSwitcher/TsSwitcher.types.d.ts

@@ -0,0 +1,10 @@
+export type TsSwitchProps = {
+    icon?: string;
+    label: string;
+    value: string;
+};
+export type TsSwitcherProps = {
+    defaultSwitch?: string;
+    switchs: TsSwitchProps[];
+    onChange: (val: string) => void;
+};

package/esm/components/TsSwitcher/TsSwitcher.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsSwitcher.types.js.map

package/esm/components/TsSwitcher/TsSwitcher.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSwitcher.types.js","sourceRoot":"","sources":["../../../src/components/TsSwitcher/TsSwitcher.types.ts"],"names":[],"mappings":""}

package/esm/components/TsSwitcher/__stories__/TsSwitcher.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { icons } from '../../TsIcon/icons';
+import { TsSwitcher } from '../TsSwitcher';
+
+<Meta title="Components/Switcher" />
+
+export const switcherArgTypes = {};
+
+# Switcher
+
+Content switchers allow users to toggle between two or more content sections within the same space on the screen.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      switchs: [
+        { icon: 'check', label: 'Section 1', value: 'section-1' },
+        { icon: 'delete-bin', label: 'Section 2', value: 'section-2' },
+      ],
+      onChange: () => {},
+    }}
+    argTypes={switcherArgTypes}
+  >
+    {args => <TsSwitcher {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSwitcher} />

package/esm/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
+export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';

package/esm/index.js

@@ -6,6 +6,7 @@ export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
+export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

package/lib/components/TsIcon/icons/index.js

@@ -60,6 +60,7 @@ exports.icons = {
     'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
     'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g>	<g>		<path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>		<path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>		<path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6			l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>	</g></g></svg>',
     'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
+    't-shirt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>',
     'timer': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6177 5.9681L19.0711 4.51472L20.4853 5.92893L19.0319 7.38231C20.2635 8.92199 21 10.875 21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C14.125 4 16.078 4.73647 17.6177 5.9681ZM12 20C15.866 20 19 16.866 19 13C19 9.13401 15.866 6 12 6C8.13401 6 5 9.13401 5 13C5 16.866 8.13401 20 12 20ZM11 8H13V14H11V8ZM8 1H16V3H8V1Z"></path></svg>',
     'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
     'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',

package/lib/components/TsIcon/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TsIcon/icons/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,OAAO,EAAE,iqBAAiqB;IAC1qB,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,YAAY,EAAE,gPAAgP;IAC9P,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,qBAAqB,EAAE,q2GAAq2G;IAC53G,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,sBAAsB,EAAE,s9DAAs9D;IAC9+D,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,YAAY,EAAE,qaAAqa;IACnb,SAAS,EAAE,2/BAA2/B;IACtgC,iBAAiB,EAAE,4nBAA4nB;IAC/oB,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,OAAO,EAAE,4cAA4c;IACrd,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TsIcon/icons/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAA4B;IAC5C,YAAY,EAAE,qXAAqX;IACnY,KAAK,EAAE,mJAAmJ;IAC1J,qBAAqB,EAAE,+PAA+P;IACtR,cAAc,EAAE,gXAAgX;IAChY,uBAAuB,EAAE,giBAAgiB;IACzjB,gBAAgB,EAAE,ylBAAylB;IAC3mB,yBAAyB,EAAE,oSAAoS;IAC/T,uBAAuB,EAAE,2PAA2P;IACpR,YAAY,EAAE,wOAAwO;IACtP,eAAe,EAAE,oYAAoY;IACrZ,kBAAkB,EAAE,yXAAyX;IAC7Y,YAAY,EAAE,uOAAuO;IACrP,aAAa,EAAE,uOAAuO;IACtP,eAAe,EAAE,+WAA+W;IAChY,UAAU,EAAE,wOAAwO;IACpP,OAAO,EAAE,iqBAAiqB;IAC1qB,qBAAqB,EAAE,kUAAkU;IACzV,oBAAoB,EAAE,ikBAAikB;IACvlB,cAAc,EAAE,mbAAmb;IACnc,qBAAqB,EAAE,wUAAwU;IAC/V,cAAc,EAAE,uVAAuV;IACvW,OAAO,EAAE,wNAAwN;IACjO,cAAc,EAAE,0NAA0N;IAC1O,cAAc,EAAE,mNAAmN;IACnO,eAAe,EAAE,2NAA2N;IAC5O,YAAY,EAAE,kNAAkN;IAChO,QAAQ,EAAE,4UAA4U;IACtV,cAAc,EAAE,ogBAAogB;IACphB,OAAO,EAAE,2TAA2T;IACpU,eAAe,EAAE,oWAAoW;IACrX,YAAY,EAAE,gPAAgP;IAC9P,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,YAAY,EAAE,icAAic;IAC/c,QAAQ,EAAE,sMAAsM;IAChN,gBAAgB,EAAE,yZAAyZ;IAC3a,YAAY,EAAE,0UAA0U;IACxV,mBAAmB,EAAE,i8DAAi8D;IACt9D,qBAAqB,EAAE,q2GAAq2G;IAC53G,mBAAmB,EAAE,i7DAAi7D;IACt8D,iBAAiB,EAAE,g7DAAg7D;IACn8D,sBAAsB,EAAE,wiEAAwiE;IAChkE,sBAAsB,EAAE,s9DAAs9D;IAC9+D,cAAc,EAAE,wOAAwO;IACxP,OAAO,EAAE,6oBAA6oB;IACtpB,SAAS,EAAE,2cAA2c;IACtd,MAAM,EAAE,sSAAsS;IAC9S,MAAM,EAAE,uxBAAuxB;IAC/xB,eAAe,EAAE,01BAA01B;IAC32B,MAAM,EAAE,sYAAsY;IAC9Y,YAAY,EAAE,qaAAqa;IACnb,SAAS,EAAE,2/BAA2/B;IACtgC,iBAAiB,EAAE,4nBAA4nB;IAC/oB,MAAM,EAAE,wQAAwQ;IAChR,QAAQ,EAAE,2eAA2e;IACrf,iBAAiB,EAAE,mzBAAmzB;IACt0B,QAAQ,EAAE,gPAAgP;IAC1P,SAAS,EAAE,0rBAA0rB;IACrsB,OAAO,EAAE,4cAA4c;IACrd,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}

package/lib/components/TsIcon/icons/index.ts

@@ -57,6 +57,7 @@ export const icons: { [k: string]: string } = {
   'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
   'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g>	<g>		<path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>		<path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>		<path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6			l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>	</g></g></svg>',
   'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
+  't-shirt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>',
   'timer': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6177 5.9681L19.0711 4.51472L20.4853 5.92893L19.0319 7.38231C20.2635 8.92199 21 10.875 21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C14.125 4 16.078 4.73647 17.6177 5.9681ZM12 20C15.866 20 19 16.866 19 13C19 9.13401 15.866 6 12 6C8.13401 6 5 9.13401 5 13C5 16.866 8.13401 20 12 20ZM11 8H13V14H11V8ZM8 1H16V3H8V1Z"></path></svg>',
   'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
   'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',

package/lib/components/TsIcon/icons/t-shirt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>

package/lib/components/TsLoader/TsLoader.js

@@ -4,6 +4,8 @@ exports.TsLoader = void 0;
 const React = require("react");
 require("./TsLoader.css");
 const TsLoader = ({ size = 'md' }) => {
+    // #########
+    // Rendering
     return React.createElement("div", { className: `ts-loader ts-loader--${size}` });
 };
 exports.TsLoader = TsLoader;

package/lib/components/TsLoader/TsLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TsLoader.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAiB,EAAE,EAAE;IACzD,OAAO,6BAAK,SAAS,EAAE,wBAAwB,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB"}
+{"version":3,"file":"TsLoader.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAiB,EAAE,EAAE;IACzD,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAE,wBAAwB,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC;AAJW,QAAA,QAAQ,YAInB"}

package/lib/components/TsSwitcher/TsSwitcher.css

@@ -0,0 +1,35 @@
+.ts-content-switcher {
+  display: flex;
+  width: 100%;
+}
+.ts-content-switcher > div {
+  margin-right: 8px;
+}
+.ts-switcher {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  background: #ebecf7;
+  color: #3643ba;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.ts-switcher--selected {
+  background: #3643ba;
+  color: #ffffff;
+}
+.ts-switcher-icon {
+  margin-right: 8px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/components/TsSwitcher/TsSwitcher.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsSwitcherProps } from './TsSwitcher.types';
+import './TsSwitcher.css';
+export declare const TsSwitcher: ({ defaultSwitch, switchs, onChange }: TsSwitcherProps) => React.JSX.Element;

package/lib/components/TsSwitcher/TsSwitcher.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsSwitcher = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TsIcon_1 = require("../TsIcon/TsIcon");
+require("./TsSwitcher.css");
+const TsSwitcher = ({ defaultSwitch, switchs, onChange }) => {
+    const [selectedSwitch, setSelectedSwitch] = (0, react_1.useState)(defaultSwitch ?? '');
+    // ########
+    // Handlers
+    const handleChange = (val) => {
+        setSelectedSwitch(val);
+        onChange(val);
+    };
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-content-switcher" }, switchs.map(s => (React.createElement("div", { key: s.value, className: `ts-switcher ${selectedSwitch === s.value ? 'ts-switcher--selected' : ''}`, onClick: () => handleChange(s.value) },
+        s.icon && (React.createElement("div", { className: "ts-switcher-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: s.icon }))),
+        React.createElement("div", { className: "ts-switcher-label" }, s.label))))));
+};
+exports.TsSwitcher = TsSwitcher;
+//# sourceMappingURL=TsSwitcher.js.map

package/lib/components/TsSwitcher/TsSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSwitcher.js","sourceRoot":"","sources":["../../../src/components/TsSwitcher/TsSwitcher.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAiC;AACjC,6CAA0C;AAE1C,4BAA0B;AAEnB,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAClF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAS,aAAa,IAAI,EAAE,CAAC,CAAC;IAElF,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;QACnC,iBAAiB,CAAC,GAAG,CAAC,CAAC;QACvB,QAAQ,CAAC,GAAG,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB,IACjC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAChB,6BACE,GAAG,EAAE,CAAC,CAAC,KAAK,EACZ,SAAS,EAAE,eAAe,cAAc,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EACrF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;QAEnC,CAAC,CAAC,IAAI,IAAI,CACT,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,oBAAC,eAAM,IAAC,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI,CACpB,CACP;QACD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,CAAC,CAAC,KAAK,CAAO,CAC9C,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,UAAU,cA8BrB"}

package/lib/components/TsSwitcher/TsSwitcher.types.d.ts

@@ -0,0 +1,10 @@
+export type TsSwitchProps = {
+    icon?: string;
+    label: string;
+    value: string;
+};
+export type TsSwitcherProps = {
+    defaultSwitch?: string;
+    switchs: TsSwitchProps[];
+    onChange: (val: string) => void;
+};

package/lib/components/TsSwitcher/TsSwitcher.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsSwitcher.types.js.map

package/lib/components/TsSwitcher/TsSwitcher.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSwitcher.types.js","sourceRoot":"","sources":["../../../src/components/TsSwitcher/TsSwitcher.types.ts"],"names":[],"mappings":""}

package/lib/components/TsSwitcher/__stories__/TsSwitcher.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { icons } from '../../TsIcon/icons';
+import { TsSwitcher } from '../TsSwitcher';
+
+<Meta title="Components/Switcher" />
+
+export const switcherArgTypes = {};
+
+# Switcher
+
+Content switchers allow users to toggle between two or more content sections within the same space on the screen.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      switchs: [
+        { icon: 'check', label: 'Section 1', value: 'section-1' },
+        { icon: 'delete-bin', label: 'Section 2', value: 'section-2' },
+      ],
+      onChange: () => {},
+    }}
+    argTypes={switcherArgTypes}
+  >
+    {args => <TsSwitcher {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSwitcher} />

package/lib/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
+export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';

package/lib/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./components/TsIcon/TsIcon"), exports);
 __exportStar(require("./components/TsInput/TsBooleanInput/TsBooleanInput"), exports);
 __exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
 __exportStar(require("./components/TsLoader/TsLoader"), exports);
+__exportStar(require("./components/TsSwitcher/TsSwitcher"), exports);
 __exportStar(require("./components/TsTabs/TsTabs"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeader"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeaderProfile"), exports);

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,6DAA2C;AAC3C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,qEAAmD;AACnD,6DAA2C;AAC3C,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/TsIcon/icons/index.ts

@@ -57,6 +57,7 @@ export const icons: { [k: string]: string } = {
   'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
   'seedling-circle': '<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve"><path d="M9,18c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S14,18,9,18z M9,16.2c4,0,7.2-3.2,7.2-7.2S13,1.8,9,1.8S1.8,5,1.8,9S5,16.2,9,16.2z"/><g>	<g>		<path d="M8.5,11.1C8,9.1,6.9,8.4,4.7,8.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1C4.6,9.5,5.2,11.5,8.5,11.1z"/>		<path d="M9.2,9.6c2-2.7,1.8-4.5-0.9-6.8c0,0-0.1,0-0.2,0C8,2.8,8,2.8,7.9,2.9C7.2,3.6,5.3,6.2,9.2,9.6"/>		<path d="M13.3,9.5C13.3,9.5,13.4,9.5,13.3,9.5c0.1,0,0.1,0.1,0.2,0.1v0.1v0.1c-0.1,0.8-0.6,3-4.1,3.1c-0.2,0.5-0.2,1.1,0,1.6			l-0.9,0.3c-0.2-0.9-0.2-1.8,0-2.7C8.7,11.5,9,11,9.4,10.6s0.9-0.7,1.5-0.9C11.7,9.5,12.5,9.4,13.3,9.5"/>	</g></g></svg>',
   'square': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5Z"></path></svg>',
+  't-shirt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>',
   'timer': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6177 5.9681L19.0711 4.51472L20.4853 5.92893L19.0319 7.38231C20.2635 8.92199 21 10.875 21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4C14.125 4 16.078 4.73647 17.6177 5.9681ZM12 20C15.866 20 19 16.866 19 13C19 9.13401 15.866 6 12 6C8.13401 6 5 9.13401 5 13C5 16.866 8.13401 20 12 20ZM11 8H13V14H11V8ZM8 1H16V3H8V1Z"></path></svg>',
   'tools': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.32943 3.27152C6.56252 2.83314 7.9923 3.10743 8.97927 4.0944C10.1002 5.21531 10.3019 6.90735 9.5843 8.23378L20.293 18.9436L18.8788 20.3579L8.16982 9.64869C6.84325 10.3668 5.15069 10.1653 4.02952 9.04415C3.04227 8.0569 2.7681 6.62659 3.20701 5.39326L5.44373 7.62994C6.02952 8.21572 6.97927 8.21572 7.56505 7.62994C8.15084 7.04415 8.15084 6.0944 7.56505 5.50862L5.32943 3.27152ZM15.6968 5.15506L18.8788 3.38729L20.293 4.80151L18.5252 7.98349L16.7574 8.33704L14.6361 10.4584L13.2219 9.04415L15.3432 6.92283L15.6968 5.15506ZM8.97927 13.2868L10.3935 14.701L5.09018 20.0043C4.69966 20.3948 4.06649 20.3948 3.67597 20.0043C3.31334 19.6417 3.28744 19.0698 3.59826 18.6773L3.67597 18.5901L8.97927 13.2868Z"></path></svg>',
   'user': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path></svg>',

package/src/components/TsIcon/icons/t-shirt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.99805 3C8.99805 4.65685 10.3412 6 11.998 6C13.6549 6 14.998 4.65685 14.998 3H20.998C21.5503 3 21.998 3.44772 21.998 4V11C21.998 11.5523 21.5503 12 20.998 12H18.997L18.998 20C18.998 20.5523 18.5503 21 17.998 21H5.99805C5.44576 21 4.99805 20.5523 4.99805 20L4.99705 11.999L2.99805 12C2.44576 12 1.99805 11.5523 1.99805 11V4C1.99805 3.44772 2.44576 3 2.99805 3H8.99805ZM19.998 4.999H16.581L16.5642 5.04018C15.8115 6.7223 14.1566 7.91251 12.2149 7.99538L11.998 8C9.96331 8 8.21245 6.7846 7.43186 5.04018L7.41405 4.999H3.99805V9.999L6.9968 9.998L6.99705 19H16.998L16.9968 10L19.998 9.999V4.999Z"></path></svg>

package/src/components/TsLoader/TsLoader.tsx

@@ -3,5 +3,7 @@ import { TsLoaderProps } from './TsLoader.types';
 import './TsLoader.css';
 
 export const TsLoader = ({ size = 'md' }: TsLoaderProps) => {
+  // #########
+  // Rendering
   return <div className={`ts-loader ts-loader--${size}`} />;
 };

package/src/components/TsSwitcher/TsSwitcher.css

@@ -0,0 +1,35 @@
+.ts-content-switcher {
+  display: flex;
+  width: 100%;
+}
+.ts-content-switcher > div {
+  margin-right: 8px;
+}
+.ts-switcher {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  background: #ebecf7;
+  color: #3643ba;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.ts-switcher--selected {
+  background: #3643ba;
+  color: #ffffff;
+}
+.ts-switcher-icon {
+  margin-right: 8px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/components/TsSwitcher/TsSwitcher.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import { TsSwitcherProps } from './TsSwitcher.types';
+import './TsSwitcher.css';
+
+export const TsSwitcher = ({ defaultSwitch, switchs, onChange }: TsSwitcherProps) => {
+  const [selectedSwitch, setSelectedSwitch] = useState<string>(defaultSwitch ?? '');
+
+  // ########
+  // Handlers
+  const handleChange = (val: string) => {
+    setSelectedSwitch(val);
+    onChange(val);
+  };
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-content-switcher">
+      {switchs.map(s => (
+        <div
+          key={s.value}
+          className={`ts-switcher ${selectedSwitch === s.value ? 'ts-switcher--selected' : ''}`}
+          onClick={() => handleChange(s.value)}
+        >
+          {s.icon && (
+            <div className="ts-switcher-icon">
+              <TsIcon name={s.icon} />
+            </div>
+          )}
+          <div className="ts-switcher-label">{s.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/TsSwitcher/TsSwitcher.types.ts

@@ -0,0 +1,2 @@
+export type TsSwitchProps = { icon?: string; label: string; value: string };
+export type TsSwitcherProps = { defaultSwitch?: string; switchs: TsSwitchProps[]; onChange: (val: string) => void };

package/src/components/TsSwitcher/__stories__/TsSwitcher.stories.mdx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { icons } from '../../TsIcon/icons';
+import { TsSwitcher } from '../TsSwitcher';
+
+<Meta title="Components/Switcher" />
+
+export const switcherArgTypes = {};
+
+# Switcher
+
+Content switchers allow users to toggle between two or more content sections within the same space on the screen.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      switchs: [
+        { icon: 'check', label: 'Section 1', value: 'section-1' },
+        { icon: 'delete-bin', label: 'Section 2', value: 'section-2' },
+      ],
+      onChange: () => {},
+    }}
+    argTypes={switcherArgTypes}
+  >
+    {args => <TsSwitcher {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSwitcher} />

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/TsIcon/TsIcon';
 export * from './components/TsInput/TsBooleanInput/TsBooleanInput';
 export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
+export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';