@dktunited-techoff/techoff-suite-ui 1.9.6 → 1.10.1

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

@@ -63,6 +63,7 @@ export const icons = {
     '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>',
     '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>',
+    'tool': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></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,mBAAmB,EAAE,u3fAAu3f;IAC54f,kBAAkB,EAAE,2hIAA2hI;IAC/iI,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,SAAS,EAAE,k1CAAk1C;IAC71C,KAAK,EAAE,mwBAAmwB;IAC1wB,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,oBAAoB,EAAE,+WAA+W;IACrY,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,mBAAmB,EAAE,u3fAAu3f;IAC54f,kBAAkB,EAAE,2hIAA2hI;IAC/iI,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,SAAS,EAAE,k1CAAk1C;IAC71C,KAAK,EAAE,mwBAAmwB;IAC1wB,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,oBAAoB,EAAE,+WAA+W;IACrY,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,MAAM,EAAE,smBAAsmB;IAC9mB,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}

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

@@ -63,6 +63,7 @@ export const icons: { [k: string]: string } = {
   '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>',
   '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>',
+  'tool': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></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/tool.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></svg>

package/esm/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/TsTooltip/TsTooltip.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import './TsTooltip.css';
+export declare const TsTooltip: ({ children, align, icon }: TsTooltipProps & PropsWithChildren) => React.JSX.Element;

package/esm/components/TsTooltip/TsTooltip.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsTooltip.css';
+export const TsTooltip = ({ children, align, icon = 'information-circle' }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-tooltip", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        React.createElement(TsIcon, { name: icon }),
+        showTooltip && React.createElement("div", { className: `ts-tooltip-container ts-tooltip-container--${align}` }, children)));
+};
+//# sourceMappingURL=TsTooltip.js.map

package/esm/components/TsTooltip/TsTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTooltip.js","sourceRoot":"","sources":["../../../src/components/TsTooltip/TsTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAG,oBAAoB,EAAsC,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7G,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI;QAErB,WAAW,IAAI,6BAAK,SAAS,EAAE,8CAA8C,KAAK,EAAE,IAAG,QAAQ,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+export type TsTooltipProps = {
+    align: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+    icon?: string;
+};

package/esm/components/TsTooltip/TsTooltip.types.js

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

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/esm/index.d.ts

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

package/esm/index.js

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

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,oCAAoC,CAAC;AACnD,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,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

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

@@ -66,6 +66,7 @@ exports.icons = {
     '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>',
     '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>',
+    'tool': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></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,mBAAmB,EAAE,u3fAAu3f;IAC54f,kBAAkB,EAAE,2hIAA2hI;IAC/iI,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,SAAS,EAAE,k1CAAk1C;IAC71C,KAAK,EAAE,mwBAAmwB;IAC1wB,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,oBAAoB,EAAE,+WAA+W;IACrY,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,mBAAmB,EAAE,u3fAAu3f;IAC54f,kBAAkB,EAAE,2hIAA2hI;IAC/iI,UAAU,EAAE,mOAAmO;IAC/O,MAAM,EAAE,iXAAiX;IACzX,eAAe,EAAE,oSAAoS;IACrT,SAAS,EAAE,k1CAAk1C;IAC71C,KAAK,EAAE,mwBAAmwB;IAC1wB,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,oBAAoB,EAAE,+WAA+W;IACrY,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,MAAM,EAAE,smBAAsmB;IAC9mB,OAAO,EAAE,oyBAAoyB;IAC7yB,MAAM,EAAE,8ZAA8Z;CACva,CAAC"}

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

@@ -63,6 +63,7 @@ export const icons: { [k: string]: string } = {
   '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>',
   '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>',
+  'tool': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></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/tool.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></svg>

package/lib/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/TsTooltip/TsTooltip.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import './TsTooltip.css';
+export declare const TsTooltip: ({ children, align, icon }: TsTooltipProps & PropsWithChildren) => React.JSX.Element;

package/lib/components/TsTooltip/TsTooltip.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsTooltip = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TsIcon_1 = require("../TsIcon/TsIcon");
+require("./TsTooltip.css");
+const TsTooltip = ({ children, align, icon = 'information-circle' }) => {
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-tooltip", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        React.createElement(TsIcon_1.TsIcon, { name: icon }),
+        showTooltip && React.createElement("div", { className: `ts-tooltip-container ts-tooltip-container--${align}` }, children)));
+};
+exports.TsTooltip = TsTooltip;
+//# sourceMappingURL=TsTooltip.js.map

package/lib/components/TsTooltip/TsTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTooltip.js","sourceRoot":"","sources":["../../../src/components/TsTooltip/TsTooltip.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AAEpD,6CAA0C;AAC1C,2BAAyB;AAElB,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAG,oBAAoB,EAAsC,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE/D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7G,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,GAAI;QAErB,WAAW,IAAI,6BAAK,SAAS,EAAE,8CAA8C,KAAK,EAAE,IAAG,QAAQ,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB"}

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

@@ -0,0 +1,4 @@
+export type TsTooltipProps = {
+    align: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+    icon?: string;
+};

package/lib/components/TsTooltip/TsTooltip.types.js

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

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/lib/index.d.ts

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

package/lib/index.js

@@ -24,6 +24,7 @@ __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("./components/TsTooltip/TsTooltip"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeader"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeaderProfile"), exports);
 __exportStar(require("./layouts/TsNavigation/TsNavigation"), 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,qEAAmD;AACnD,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,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}

package/package.json

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

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

@@ -63,6 +63,7 @@ export const icons: { [k: string]: string } = {
   '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>',
   '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>',
+  'tool': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></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/tool.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6601 15.9342C18.3032 15.9342 21.2543 12.9831 21.2543 9.33996C21.2543 8.58056 21.1293 7.85001 20.889 7.16751L18.2071 9.84942C17.0824 10.9741 15.2656 10.9741 14.1506 9.84942C13.0259 8.72475 13.0259 6.90797 14.1506 5.79291L16.8325 3.11101C16.15 2.87069 15.4194 2.74573 14.6601 2.74573C11.0169 2.74573 8.06583 5.69679 8.06583 9.33996C8.06583 10.2435 8.24847 11.0991 8.57529 11.8777L3 17.453L6.54704 21L12.1223 15.4247C12.901 15.7515 13.7565 15.9342 14.6601 15.9342Z" stroke="black" stroke-width="1.5"/></svg>

package/src/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/TsTooltip/TsTooltip.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PropsWithChildren, useState } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsTooltip.css';
+
+export const TsTooltip = ({ children, align, icon = 'information-circle' }: TsTooltipProps & PropsWithChildren) => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-tooltip" onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>
+      <TsIcon name={icon} />
+
+      {showTooltip && <div className={`ts-tooltip-container ts-tooltip-container--${align}`}>{children}</div>}
+    </div>
+  );
+};

package/src/components/TsTooltip/TsTooltip.types.ts

@@ -0,0 +1,12 @@
+export type TsTooltipProps = {
+  align:
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left-bottom'
+    | 'left-top'
+    | 'right-bottom'
+    | 'right-top';
+  icon?: string;
+};

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/src/index.ts

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