@hbuesing/ui-library 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 - present Henrik Buesing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# ui-library
+Collection of reusable ui components for react based applications

package/dist/components/images/index.d.ts

@@ -0,0 +1 @@
+export * from "./svgIcon";

package/dist/components/images/svgIcon.d.ts

@@ -0,0 +1,9 @@
+import './images.scss';
+interface ISvgIcon {
+    src: string;
+    color?: string;
+    height?: number;
+    width?: number;
+}
+export declare function SVG(props: ISvgIcon): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input/baseInput.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from "react";
+import './input.scss';
+export interface IBaseInput extends ComponentPropsWithoutRef<'input'> {
+    label: string;
+    value: string;
+    valueChanged: (value: string) => void;
+    iconColor?: string;
+    iconSrc?: string;
+    inputColor?: string;
+}
+export declare function BaseInput(props: IBaseInput): import("react/jsx-runtime").JSX.Element;

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export * from "./textInput";

package/dist/components/input/textInput.d.ts

@@ -0,0 +1,9 @@
+import { IBaseInput } from "./baseInput";
+import './input.scss';
+interface ITextInput extends IBaseInput {
+    tooltipIcon?: string;
+    tooltipText?: string;
+    tooltipClose?: string;
+}
+export declare function TextInput(props: ITextInput): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.css

@@ -0,0 +1,2 @@
+.uil-svg{height:var(--uil-xxxl);width:var(--uil-xxxl)}:root{--uil-black:#000;--uil-black-alt:#222;--uil-white:#fff;--uil-grey:#f3f3f3;--uil-grey-dark:#878787;--uil-outline-focus:#1e90ff;--uil-outline-disabled:#8b0000;--uil-xxxs:.125rem;--uil-xxs:.25rem;--uil-xs:.5rem;--uil-s:.75rem;--uil-m:1rem;--uil-l:1.25rem;--uil-xl:1.5rem;--uil-xxl:1.75rem;--uil-xxxl:2rem;--uil-font-base:var(--uil-l)}.uil-input-wrapper{display:block;position:relative}.uil-input-wrapper .uil-label{background:linear-gradient(0deg,var(--uil-white) 9px,transparent 0);cursor:text;font-weight:700;left:.25rem;opacity:.6;padding:0 .125rem;position:absolute;top:25%;transition:top .25s ease-in-out}.uil-input-wrapper .uil-input,.uil-input-wrapper .uil-label{color:var(--uil-black);font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.uil-input-wrapper .uil-input{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:0;box-sizing:border-box;padding:var(--uil-xs);width:100%}.uil-input-wrapper .uil-input::-moz-placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input::placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input:focus{outline:1px solid var(--uil-outline-focus)}.uil-input-wrapper .uil-input:disabled{background-color:var(--uil-grey);border:2px solid var(--uil-outline-disabled);color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-label{background:transparent;color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-icon{fill:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled:not(:-moz-placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-input:disabled:not(:placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-icon{fill:var(--uil-black);opacity:.5;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%)}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:focus~.uil-label,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-icon{opacity:1}.uil-input-wrapper .uil-input:focus~.uil-icon,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-icon{opacity:1}.uil-tooltip-wrapper{position:relative}.uil-tooltip-wrapper .uil-tooltip-icon{fill:var(--uil-black-alt);cursor:pointer;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:-moz-placeholder-shown),~.uil-input-wrapper:focus-within){visibility:hidden}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:placeholder-shown),~.uil-input-wrapper:focus-within){visibility:hidden}.uil-tooltip-wrapper .uil-tooltip{background-color:rgba(34,34,34,.9);border-radius:3px;box-sizing:border-box;color:var(--uil-white);left:0;padding:var(--uil-s);position:absolute;top:0;width:100%;z-index:1}.uil-tooltip-wrapper .uil-tooltip .uil-tooltip-button{background-color:transparent;border:none;border-bottom:1px solid var(--uil-white);color:var(--uil-white);display:block;margin-bottom:var(--uil-m);margin-left:auto;padding:0;width:-moz-fit-content;width:fit-content}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["images.scss","input.scss"],"names":[],"mappings":"AAoBA,SACE,sBAAuB,CACvB,qBACF,CCvBA,MACE,gBAAoB,CACpB,oBAAwB,CACxB,gBAAoB,CACpB,kBAAmB,CACnB,uBAAwB,CACxB,2BAA8B,CAC9B,8BAAiC,CACjC,kBAAmB,CACnB,gBAAiB,CACjB,cAAe,CACf,cAAe,CACf,YAAa,CACb,eAAgB,CAChB,eAAgB,CAChB,iBAAkB,CAClB,eAAgB,CAChB,4BACF,CAEA,mBAEE,aAAc,CADd,iBAEF,CACA,8BASE,mEAA4E,CAL5E,WAAY,CAEZ,eAAiB,CAHjB,WAAa,CAOb,UAAY,CACZ,iBAAmB,CAVnB,iBAAkB,CAClB,OAAQ,CAUR,+BACF,CACA,4DANE,sBAAuB,CAHvB,8BAA+B,CAE/B,gCAiBF,CAVA,8BAME,iCAAkC,CAClC,iCAAkC,CAClC,eAAgB,CAPhB,qBAAsB,CAQtB,qBAAsB,CALtB,UAMF,CACA,gDACE,iBAAkB,CAElB,QAAS,CADT,OAEF,CAJA,2CACE,iBAAkB,CAElB,QAAS,CADT,OAEF,CACA,oCACE,0CACF,CACA,uCAGE,gCAAiC,CADjC,4CAA6C,CAE7C,0BAA2B,CAH3B,kBAIF,CACA,kDAEE,sBAAuB,CACvB,0BAA2B,CAF3B,kBAGF,CACA,iDAEE,yBAA0B,CAD1B,kBAEF,CACA,+EACE,kEACF,CAFA,0EACE,kEACF,CACA,6BAKE,qBAAsB,CACtB,UAAY,CALZ,iBAAkB,CAElB,mBAAoB,CADpB,OAAQ,CAER,0BAGF,CACA,sEAEE,SAAU,CADV,QAEF,CAHA,gHAEE,SAAU,CADV,QAEF,CACA,qEACE,SACF,CAFA,8GACE,SACF,CAEA,qBACE,iBACF,CACA,uCAIE,yBAA0B,CAH1B,cAAe,CACf,uBAAmB,CAAnB,kBAAmB,CACnB,sBAAkB,CAAlB,iBAEF,CACA,yIACE,iBACF,CAFA,oIACE,iBACF,CACA,kCAQE,kCAAuC,CAEvC,iBAAkB,CALlB,qBAAsB,CAEtB,sBAAuB,CAJvB,MAAO,CAMP,oBAAqB,CARrB,iBAAkB,CAClB,KAAM,CAEN,UAAW,CAEX,SAKF,CACA,sDAME,4BAA6B,CAC7B,WAAY,CAEZ,wCAAyC,CAJzC,sBAAuB,CAJvB,aAAc,CAGd,0BAA2B,CAD3B,gBAAiB,CAKjB,SAAU,CANV,sBAAkB,CAAlB,iBAQF","file":"index.css","sourcesContent":[":root {\n  --uil-black: #000000;\n  --uil-black-alt: #222222;\n  --uil-white: #ffffff;\n  --uil-grey: #f3f3f3;\n  --uil-grey-dark: #878787;\n  --uil-outline-focus: #1E90FFFF;\n  --uil-outline-disabled: #8B0000FF;\n  --uil-xxxs: .125rem;\n  --uil-xxs: .25rem;\n  --uil-xs: .5rem;\n  --uil-s: .75rem;\n  --uil-m: 1rem;\n  --uil-l: 1.25rem;\n  --uil-xl: 1.5rem;\n  --uil-xxl: 1.75rem;\n  --uil-xxxl: 2rem;\n  --uil-font-base: var(--uil-l) ;\n}\n\n.uil-svg {\n  height: var(--uil-xxxl);\n  width: var(--uil-xxxl);\n}",":root {\n  --uil-black: #000000;\n  --uil-black-alt: #222222;\n  --uil-white: #ffffff;\n  --uil-grey: #f3f3f3;\n  --uil-grey-dark: #878787;\n  --uil-outline-focus: #1E90FFFF;\n  --uil-outline-disabled: #8B0000FF;\n  --uil-xxxs: .125rem;\n  --uil-xxs: .25rem;\n  --uil-xs: .5rem;\n  --uil-s: .75rem;\n  --uil-m: 1rem;\n  --uil-l: 1.25rem;\n  --uil-xl: 1.5rem;\n  --uil-xxl: 1.75rem;\n  --uil-xxxl: 2rem;\n  --uil-font-base: var(--uil-l) ;\n}\n\n.uil-input-wrapper {\n  position: relative;\n  display: block;\n}\n.uil-input-wrapper .uil-label {\n  position: absolute;\n  top: 25%;\n  left: 0.25rem;\n  cursor: text;\n  font-size: var(--uil-font-base);\n  font-weight: bold;\n  line-height: var(--uil-font-base);\n  color: var(--uil-black);\n  background: linear-gradient(0deg, var(--uil-white) 9px, rgba(0, 0, 0, 0) 0%);\n  opacity: 0.6;\n  padding: 0 0.125rem;\n  transition: top 0.25s ease-in-out;\n}\n.uil-input-wrapper .uil-input {\n  box-sizing: border-box;\n  font-size: var(--uil-font-base);\n  line-height: var(--uil-font-base);\n  width: 100%;\n  color: var(--uil-black);\n  background-color: var(--uil-white);\n  border: 1px solid var(--uil-black);\n  border-radius: 0;\n  padding: var(--uil-xs);\n}\n.uil-input-wrapper .uil-input::placeholder {\n  color: transparent;\n  width: 0;\n  height: 0;\n}\n.uil-input-wrapper .uil-input:focus {\n  outline: 1px solid var(--uil-outline-focus);\n}\n.uil-input-wrapper .uil-input:disabled {\n  cursor: not-allowed;\n  border: 2px solid var(--uil-outline-disabled);\n  background-color: var(--uil-grey);\n  color: var(--uil-grey-dark);\n}\n.uil-input-wrapper .uil-input:disabled ~ .uil-label {\n  cursor: not-allowed;\n  background: transparent;\n  color: var(--uil-grey-dark);\n}\n.uil-input-wrapper .uil-input:disabled ~ .uil-icon {\n  cursor: not-allowed;\n  fill: var(--uil-grey-dark);\n}\n.uil-input-wrapper .uil-input:disabled:not(:placeholder-shown) ~ .uil-label {\n  background: linear-gradient(0deg, var(--uil-grey) 8px, rgba(0, 0, 0, 0) 0%);\n}\n.uil-input-wrapper .uil-icon {\n  position: absolute;\n  top: 50%;\n  right: var(--uil-xs);\n  transform: translate(0%, -50%);\n  fill: var(--uil-black);\n  opacity: 0.5;\n}\n.uil-input-wrapper .uil-input:focus ~ .uil-label, .uil-input-wrapper .uil-input:not(:placeholder-shown) ~ .uil-label {\n  top: -30%;\n  opacity: 1;\n}\n.uil-input-wrapper .uil-input:focus ~ .uil-icon, .uil-input-wrapper .uil-input:not(:placeholder-shown) ~ .uil-icon {\n  opacity: 1;\n}\n\n.uil-tooltip-wrapper {\n  position: relative;\n}\n.uil-tooltip-wrapper .uil-tooltip-icon {\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  fill: var(--uil-black-alt);\n}\n.uil-tooltip-wrapper .uil-tooltip-icon:has(~ .uil-input-wrapper > .uil-input:not(:placeholder-shown), ~ .uil-input-wrapper:focus-within) {\n  visibility: hidden;\n}\n.uil-tooltip-wrapper .uil-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  box-sizing: border-box;\n  z-index: 1;\n  color: var(--uil-white);\n  background-color: rgba(34, 34, 34, 0.9);\n  padding: var(--uil-s);\n  border-radius: 3px;\n}\n.uil-tooltip-wrapper .uil-tooltip .uil-tooltip-button {\n  display: block;\n  width: fit-content;\n  margin-left: auto;\n  margin-bottom: var(--uil-m);\n  color: var(--uil-white);\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  border-bottom: 1px solid var(--uil-white);\n}"]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './components/input';
+export { SVG } from './components/images';

package/dist/index.js

@@ -0,0 +1,2 @@
+var i=require("react/jsx-runtime"),r=require("react");function n(){return n=Object.assign?Object.assign.bind():function(i){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var e in n)({}).hasOwnProperty.call(n,e)&&(i[e]=n[e])}return i},n.apply(null,arguments)}function e(i,r){if(null==i)return{};var n={};for(var e in i)if({}.hasOwnProperty.call(i,e)){if(r.indexOf(e)>=0)continue;n[e]=i[e]}return n}function l(r){var n=r.src,e=r.color,l=r.height,t=r.width;if(!n.includes(".svg"))throw new Error("Provided src is not an svg image");return i.jsx("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:e,height:l+"px",width:t+"px"},children:i.jsx("use",{href:n})})}var t=["label","valueChanged","iconColor","iconSrc","inputColor"];function o(r){var o=r.label,s=r.valueChanged,a=r.iconColor,c=r.iconSrc,u=r.inputColor,h=e(r,t);return i.jsxs("label",{className:"uil-input-wrapper",children:[i.jsx("input",n({className:"uil-input",onChange:function(i){return s(i.target.value)},placeholder:o,style:{color:u}},h)),c&&i.jsx("div",{className:"uil-icon",children:i.jsx(l,{src:c,width:24,height:24,color:a})}),i.jsx("span",{className:"uil-label",style:{color:u},children:o})]})}var s=["tooltipIcon","tooltipText","tooltipClose"];exports.SVG=l,exports.TextInput=function(t){var a=t.tooltipIcon,c=t.tooltipText,u=t.tooltipClose,h=e(t,s),p=r.useState(!1),d=p[0],x=p[1];function v(){x(!1)}return i.jsx(i.Fragment,{children:a?i.jsxs("div",{className:"uil-tooltip-wrapper",children:[d&&i.jsxs("div",{className:"uil-tooltip",onClick:v,children:[u&&i.jsx("button",{className:"uil-tooltip-button",onClick:v,children:u}),i.jsx("span",{children:c})]}),i.jsx("div",{className:"uil-tooltip-icon",onClick:function(){return x(!d)},children:i.jsx(l,{src:a,height:16,width:16})}),i.jsx(o,n({},h))]}):i.jsx(o,n({},h))})};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/components/input/textInput.tsx"],"sourcesContent":["import React, {CSSProperties} from 'react';\nimport './images.scss';\n\ninterface ISvgIcon {\n  src: string;\n  color?: string;\n  height?: number;\n  width?: number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    src,\n    color,\n    height,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image')\n  }\n\n  const style: CSSProperties = {\n    fill: color,\n    height: `${height}px`,\n    width: `${width}px`\n  }\n\n  return (\n    <svg aria-hidden={true} className={'uil-svg'} style={style}>\n      <use href={src}/>\n    </svg>\n  );\n}","import React, {ComponentPropsWithoutRef} from \"react\";\nimport {SVG} from \"../images/svgIcon\";\nimport './input.scss';\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    label,\n    valueChanged,\n    iconColor,\n    iconSrc,\n    inputColor,\n    ...inputProps\n  } = props;\n\n  return (\n    <label className={'uil-input-wrapper'}>\n      <input\n        className={'uil-input'}\n        onChange={(e) => valueChanged(e.target.value)}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from \"./baseInput\";\nimport {SVG} from '../images/svgIcon';\nimport './input.scss';\n\ninterface ITextInput extends IBaseInput {\n  tooltipIcon?: string;\n  tooltipText?: string;\n  tooltipClose?: string\n}\n\nexport function TextInput(props: ITextInput) {\n  const {\n    tooltipIcon,\n    tooltipText,\n    tooltipClose,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'} onClick={closeTooltip}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon'} onClick={() => setTooltipVisible(!tooltipVisible)}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}"],"names":["SVG","props","src","color","height","width","includes","Error","_jsx","jsx","className","style","fill","children","href","BaseInput","label","valueChanged","iconColor","iconSrc","inputColor","inputProps","_objectWithoutPropertiesLoose","_excluded","_jsxs","onChange","e","target","value","placeholder","tooltipIcon","tooltipText","tooltipClose","_useState","useState","tooltipVisible","setTooltipVisible","closeTooltip","_Fragment","Fragment","jsxs","onClick","_extends"],"mappings":"yZAUM,SAAUA,EAAIC,GAClB,IACEC,EAIED,EAJFC,IACAC,EAGEF,EAHFE,MACAC,EAEEH,EAFFG,OACAC,EACEJ,EADFI,MAGF,IAAKH,EAAII,SAAS,QAChB,MAAU,IAAAC,MAAM,oCASlB,OACEC,EAAkBC,IAAA,MAAA,CAAA,eAAA,EAAMC,UAAW,UAAWC,MAPnB,CAC3BC,KAAMT,EACNC,OAAWA,EAAU,KACrBC,MAAUA,EAAK,MAI2CQ,SACxDL,aAAKM,KAAMZ,KAGjB,4ECpBgBa,EAAUd,GACxB,IACEe,EAMEf,EANFe,MACAC,EAKEhB,EALFgB,aACAC,EAIEjB,EAJFiB,UACAC,EAGElB,EAHFkB,QACAC,EAEEnB,EAFFmB,WACGC,EAAUC,EACXrB,EAAKsB,GAET,OACEC,OAAO,QAAA,CAAAd,UAAW,oBAAmBG,SAAA,CACnCL,iBACEE,UAAW,YACXe,SAAU,SAACC,GAAC,OAAKT,EAAaS,EAAEC,OAAOC,MAAM,EAC7CC,YAAab,EACbL,MAAO,CAACR,MAAOiB,IACXC,IAGLF,GACCX,MAAA,MAAA,CAAKE,UAAW,oBACdF,EAAAA,IAACR,GAAIE,IAAKiB,EAASd,MAAO,GAAID,OAAQ,GAAID,MAAOe,MAIrDV,EAAAC,IAAA,OAAA,CAAMC,UAAW,YAAaC,MAAO,CAACR,MAAOiB,GAAWP,SAAGG,MAGjE,oFC/BM,SAAoBf,GACxB,IACE6B,EAIE7B,EAJF6B,YACAC,EAGE9B,EAHF8B,YACAC,EAEE/B,EAFF+B,aACGX,EAAUC,EACXrB,EAAKsB,GAETU,EAA4CC,YAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAExC,SAASI,IACPD,GAAkB,EACpB,CAEA,OACE5B,EAAAC,IAAA6B,EAAAC,SAAA,CAAA1B,SACGiB,EACCN,EAAAgB,KAAA,MAAA,CAAK9B,UAAW,sBAAqBG,SAAA,CAClCsB,GACCX,EAAKgB,KAAA,MAAA,CAAA9B,UAAW,cAAe+B,QAASJ,YACrCL,GACCxB,EAAAA,IAAQ,SAAA,CAAAE,UAAW,qBAAsB+B,QAASJ,EAC/CxB,SAAAmB,IAILxB,EAAAA,IAAO,OAAA,CAAAK,SAAAkB,OAIXvB,EAAAA,IAAK,MAAA,CAAAE,UAAW,mBAAoB+B,QAAS,WAAA,OAAML,GAAmBD,EAAe,EACnFtB,SAAAL,MAACR,EAAG,CAACE,IAAK4B,EAAa1B,OAAQ,GAAIC,MAAO,OAG5CG,MAACO,EAAS2B,EAAKrB,CAAAA,EAAAA,OAGjBb,EAAAC,IAACM,EAAS2B,EAAA,CAAA,EAAKrB,KAIvB"}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import{jsx as i,jsxs as l,Fragment as n}from"react/jsx-runtime";import{useState as r}from"react";function o(){return o=Object.assign?Object.assign.bind():function(i){for(var l=1;l<arguments.length;l++){var n=arguments[l];for(var r in n)({}).hasOwnProperty.call(n,r)&&(i[r]=n[r])}return i},o.apply(null,arguments)}function t(i,l){if(null==i)return{};var n={};for(var r in i)if({}.hasOwnProperty.call(i,r)){if(l.indexOf(r)>=0)continue;n[r]=i[r]}return n}function e(l){var n=l.src,r=l.color,o=l.height,t=l.width;if(!n.includes(".svg"))throw new Error("Provided src is not an svg image");return i("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:r,height:o+"px",width:t+"px"},children:i("use",{href:n})})}var c=["label","valueChanged","iconColor","iconSrc","inputColor"];function a(n){var r=n.label,a=n.valueChanged,s=n.iconColor,u=n.iconSrc,h=n.inputColor,p=t(n,c);return l("label",{className:"uil-input-wrapper",children:[i("input",o({className:"uil-input",onChange:function(i){return a(i.target.value)},placeholder:r,style:{color:h}},p)),u&&i("div",{className:"uil-icon",children:i(e,{src:u,width:24,height:24,color:s})}),i("span",{className:"uil-label",style:{color:h},children:r})]})}var s=["tooltipIcon","tooltipText","tooltipClose"];function u(c){var u=c.tooltipIcon,h=c.tooltipText,p=c.tooltipClose,d=t(c,s),v=r(!1),f=v[0],g=v[1];function m(){g(!1)}return i(n,{children:u?l("div",{className:"uil-tooltip-wrapper",children:[f&&l("div",{className:"uil-tooltip",onClick:m,children:[p&&i("button",{className:"uil-tooltip-button",onClick:m,children:p}),i("span",{children:h})]}),i("div",{className:"uil-tooltip-icon",onClick:function(){return g(!f)},children:i(e,{src:u,height:16,width:16})}),i(a,o({},d))]}):i(a,o({},d))})}export{e as SVG,u as TextInput};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/components/input/textInput.tsx"],"sourcesContent":["import React, {CSSProperties} from 'react';\nimport './images.scss';\n\ninterface ISvgIcon {\n  src: string;\n  color?: string;\n  height?: number;\n  width?: number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    src,\n    color,\n    height,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image')\n  }\n\n  const style: CSSProperties = {\n    fill: color,\n    height: `${height}px`,\n    width: `${width}px`\n  }\n\n  return (\n    <svg aria-hidden={true} className={'uil-svg'} style={style}>\n      <use href={src}/>\n    </svg>\n  );\n}","import React, {ComponentPropsWithoutRef} from \"react\";\nimport {SVG} from \"../images/svgIcon\";\nimport './input.scss';\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    label,\n    valueChanged,\n    iconColor,\n    iconSrc,\n    inputColor,\n    ...inputProps\n  } = props;\n\n  return (\n    <label className={'uil-input-wrapper'}>\n      <input\n        className={'uil-input'}\n        onChange={(e) => valueChanged(e.target.value)}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from \"./baseInput\";\nimport {SVG} from '../images/svgIcon';\nimport './input.scss';\n\ninterface ITextInput extends IBaseInput {\n  tooltipIcon?: string;\n  tooltipText?: string;\n  tooltipClose?: string\n}\n\nexport function TextInput(props: ITextInput) {\n  const {\n    tooltipIcon,\n    tooltipText,\n    tooltipClose,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'} onClick={closeTooltip}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon'} onClick={() => setTooltipVisible(!tooltipVisible)}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}"],"names":["SVG","props","src","color","height","width","includes","Error","_jsx","className","style","fill","children","href","BaseInput","label","valueChanged","iconColor","iconSrc","inputColor","inputProps","_objectWithoutPropertiesLoose","_excluded","_jsxs","onChange","e","target","value","placeholder","TextInput","tooltipIcon","tooltipText","tooltipClose","_useState","useState","tooltipVisible","setTooltipVisible","closeTooltip","_Fragment","onClick","_extends"],"mappings":"ocAUM,SAAUA,EAAIC,GAClB,IACEC,EAIED,EAJFC,IACAC,EAGEF,EAHFE,MACAC,EAEEH,EAFFG,OACAC,EACEJ,EADFI,MAGF,IAAKH,EAAII,SAAS,QAChB,MAAU,IAAAC,MAAM,oCASlB,OACEC,EAAkB,MAAA,CAAA,eAAA,EAAMC,UAAW,UAAWC,MAPnB,CAC3BC,KAAMR,EACNC,OAAWA,EAAU,KACrBC,MAAUA,EAAK,MAI2CO,SACxDJ,SAAKK,KAAMX,KAGjB,4ECpBgBY,EAAUb,GACxB,IACEc,EAMEd,EANFc,MACAC,EAKEf,EALFe,aACAC,EAIEhB,EAJFgB,UACAC,EAGEjB,EAHFiB,QACAC,EAEElB,EAFFkB,WACGC,EAAUC,EACXpB,EAAKqB,GAET,OACEC,EAAO,QAAA,CAAAd,UAAW,oBAAmBG,SAAA,CACnCJ,aACEC,UAAW,YACXe,SAAU,SAACC,GAAC,OAAKT,EAAaS,EAAEC,OAAOC,MAAM,EAC7CC,YAAab,EACbL,MAAO,CAACP,MAAOgB,IACXC,IAGLF,GACCV,EAAA,MAAA,CAAKC,UAAW,oBACdD,EAACR,GAAIE,IAAKgB,EAASb,MAAO,GAAID,OAAQ,GAAID,MAAOc,MAIrDT,EAAA,OAAA,CAAMC,UAAW,YAAaC,MAAO,CAACP,MAAOgB,GAAWP,SAAGG,MAGjE,oDC/BM,SAAUc,EAAU5B,GACxB,IACE6B,EAIE7B,EAJF6B,YACAC,EAGE9B,EAHF8B,YACAC,EAEE/B,EAFF+B,aACGZ,EAAUC,EACXpB,EAAKqB,GAETW,EAA4CC,GAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAExC,SAASI,IACPD,GAAkB,EACpB,CAEA,OACE5B,EAAA8B,EAAA,CAAA1B,SACGkB,EACCP,EAAA,MAAA,CAAKd,UAAW,sBAAqBG,SAAA,CAClCuB,GACCZ,EAAK,MAAA,CAAAd,UAAW,cAAe8B,QAASF,YACrCL,GACCxB,EAAQ,SAAA,CAAAC,UAAW,qBAAsB8B,QAASF,EAC/CzB,SAAAoB,IAILxB,EAAO,OAAA,CAAAI,SAAAmB,OAIXvB,EAAK,MAAA,CAAAC,UAAW,mBAAoB8B,QAAS,WAAA,OAAMH,GAAmBD,EAAe,EACnFvB,SAAAJ,EAACR,EAAG,CAACE,IAAK4B,EAAa1B,OAAQ,GAAIC,MAAO,OAG5CG,EAACM,EAAS0B,EAAKpB,CAAAA,EAAAA,OAGjBZ,EAACM,EAAS0B,EAAA,CAAA,EAAKpB,KAIvB"}

package/dist/index.modern.mjs

@@ -0,0 +1,2 @@
+import{jsx as i,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useState as n}from"react";function t(){return t=Object.assign?Object.assign.bind():function(i){for(var l=1;l<arguments.length;l++){var o=arguments[l];for(var n in o)({}).hasOwnProperty.call(o,n)&&(i[n]=o[n])}return i},t.apply(null,arguments)}function r(i,l){if(null==i)return{};var o={};for(var n in i)if({}.hasOwnProperty.call(i,n)){if(l.indexOf(n)>=0)continue;o[n]=i[n]}return o}function e(l){const{src:o,color:n,height:t,width:r}=l;if(!o.includes(".svg"))throw new Error("Provided src is not an svg image");return i("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:n,height:`${t}px`,width:`${r}px`},children:i("use",{href:o})})}const c=["label","valueChanged","iconColor","iconSrc","inputColor"];function a(o){const{label:n,valueChanged:a,iconColor:s,iconSrc:u,inputColor:h}=o,p=r(o,c);return l("label",{className:"uil-input-wrapper",children:[i("input",t({className:"uil-input",onChange:i=>a(i.target.value),placeholder:n,style:{color:h}},p)),u&&i("div",{className:"uil-icon",children:i(e,{src:u,width:24,height:24,color:s})}),i("span",{className:"uil-label",style:{color:h},children:n})]})}const s=["tooltipIcon","tooltipText","tooltipClose"];function u(c){const{tooltipIcon:u,tooltipText:h,tooltipClose:p}=c,d=r(c,s),[f,v]=n(!1);function g(){v(!1)}return i(o,{children:u?l("div",{className:"uil-tooltip-wrapper",children:[f&&l("div",{className:"uil-tooltip",onClick:g,children:[p&&i("button",{className:"uil-tooltip-button",onClick:g,children:p}),i("span",{children:h})]}),i("div",{className:"uil-tooltip-icon",onClick:()=>v(!f),children:i(e,{src:u,height:16,width:16})}),i(a,t({},d))]}):i(a,t({},d))})}export{e as SVG,u as TextInput};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.mjs","sources":["../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/components/input/textInput.tsx"],"sourcesContent":["import React, {CSSProperties} from 'react';\nimport './images.scss';\n\ninterface ISvgIcon {\n  src: string;\n  color?: string;\n  height?: number;\n  width?: number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    src,\n    color,\n    height,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image')\n  }\n\n  const style: CSSProperties = {\n    fill: color,\n    height: `${height}px`,\n    width: `${width}px`\n  }\n\n  return (\n    <svg aria-hidden={true} className={'uil-svg'} style={style}>\n      <use href={src}/>\n    </svg>\n  );\n}","import React, {ComponentPropsWithoutRef} from \"react\";\nimport {SVG} from \"../images/svgIcon\";\nimport './input.scss';\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    label,\n    valueChanged,\n    iconColor,\n    iconSrc,\n    inputColor,\n    ...inputProps\n  } = props;\n\n  return (\n    <label className={'uil-input-wrapper'}>\n      <input\n        className={'uil-input'}\n        onChange={(e) => valueChanged(e.target.value)}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from \"./baseInput\";\nimport {SVG} from '../images/svgIcon';\nimport './input.scss';\n\ninterface ITextInput extends IBaseInput {\n  tooltipIcon?: string;\n  tooltipText?: string;\n  tooltipClose?: string\n}\n\nexport function TextInput(props: ITextInput) {\n  const {\n    tooltipIcon,\n    tooltipText,\n    tooltipClose,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'} onClick={closeTooltip}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon'} onClick={() => setTooltipVisible(!tooltipVisible)}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}"],"names":["SVG","props","src","color","height","width","includes","Error","_jsx","className","style","fill","children","href","BaseInput","label","valueChanged","iconColor","iconSrc","inputColor","inputProps","_objectWithoutPropertiesLoose","_excluded","_jsxs","onChange","e","target","value","placeholder","TextInput","tooltipIcon","tooltipText","tooltipClose","tooltipVisible","setTooltipVisible","useState","closeTooltip","_Fragment","onClick","_extends"],"mappings":"6cAUgBA,EAAIC,GAClB,MAAMC,IACJA,EAAGC,MACHA,EAAKC,OACLA,EAAMC,MACNA,GACEJ,EAEJ,IAAKC,EAAII,SAAS,QAChB,MAAU,IAAAC,MAAM,oCASlB,OACEC,EAAkB,MAAA,CAAA,eAAA,EAAMC,UAAW,UAAWC,MAPnB,CAC3BC,KAAMR,EACNC,OAAQ,GAAGA,MACXC,MAAO,GAAGA,OAIgDO,SACxDJ,SAAKK,KAAMX,KAGjB,8ECpBgBY,EAAUb,GACxB,MAAMc,MACJA,EAAKC,aACLA,EAAYC,UACZA,EAASC,QACTA,EAAOC,WACPA,GAEElB,EADCmB,EAAUC,EACXpB,EAAKqB,GAET,OACEC,EAAO,QAAA,CAAAd,UAAW,oBAAmBG,SAAA,CACnCJ,YACEC,CAAAA,UAAW,YACXe,SAAWC,GAAMT,EAAaS,EAAEC,OAAOC,OACvCC,YAAab,EACbL,MAAO,CAACP,MAAOgB,IACXC,IAGLF,GACCV,EAAA,MAAA,CAAKC,UAAW,oBACdD,EAACR,GAAIE,IAAKgB,EAASb,MAAO,GAAID,OAAQ,GAAID,MAAOc,MAIrDT,EAAA,OAAA,CAAMC,UAAW,YAAaC,MAAO,CAACP,MAAOgB,GAAWP,SAAGG,MAGjE,sDC/BgB,SAAAc,EAAU5B,GACxB,MAAM6B,YACJA,EAAWC,YACXA,EAAWC,aACXA,GAEE/B,EADCmB,EAAUC,EACXpB,EAAKqB,IAEFW,EAAgBC,GAAqBC,GAAS,GAErD,SAASC,IACPF,GAAkB,EACpB,CAEA,OACE1B,EAAA6B,EAAA,CAAAzB,SACGkB,EACCP,EAAA,MAAA,CAAKd,UAAW,sBAAqBG,SAAA,CAClCqB,GACCV,EAAK,MAAA,CAAAd,UAAW,cAAe6B,QAASF,YACrCJ,GACCxB,EAAQ,SAAA,CAAAC,UAAW,qBAAsB6B,QAASF,EAC/CxB,SAAAoB,IAILxB,EAAO,OAAA,CAAAI,SAAAmB,OAIXvB,EAAK,MAAA,CAAAC,UAAW,mBAAoB6B,QAASA,IAAMJ,GAAmBD,GACpErB,SAAAJ,EAACR,EAAG,CAACE,IAAK4B,EAAa1B,OAAQ,GAAIC,MAAO,OAG5CG,EAACM,EAASyB,EAAA,GAAKnB,OAGjBZ,EAACM,EAASyB,EAAA,CAAA,EAAKnB,KAIvB"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],i):i((e||self).uiLibrary={},e.jsxRuntime,e.react)}(this,function(e,i,n){function t(){return t=Object.assign?Object.assign.bind():function(e){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},t.apply(null,arguments)}function r(e,i){if(null==e)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(i.indexOf(t)>=0)continue;n[t]=e[t]}return n}function l(e){var n=e.src,t=e.color,r=e.height,l=e.width;if(!n.includes(".svg"))throw new Error("Provided src is not an svg image");return i.jsx("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:t,height:r+"px",width:l+"px"},children:i.jsx("use",{href:n})})}var o=["label","valueChanged","iconColor","iconSrc","inputColor"];function s(e){var n=e.label,s=e.valueChanged,a=e.iconColor,c=e.iconSrc,u=e.inputColor,d=r(e,o);return i.jsxs("label",{className:"uil-input-wrapper",children:[i.jsx("input",t({className:"uil-input",onChange:function(e){return s(e.target.value)},placeholder:n,style:{color:u}},d)),c&&i.jsx("div",{className:"uil-icon",children:i.jsx(l,{src:c,width:24,height:24,color:a})}),i.jsx("span",{className:"uil-label",style:{color:u},children:n})]})}var a=["tooltipIcon","tooltipText","tooltipClose"];e.SVG=l,e.TextInput=function(e){var o=e.tooltipIcon,c=e.tooltipText,u=e.tooltipClose,d=r(e,a),p=n.useState(!1),h=p[0],f=p[1];function x(){f(!1)}return i.jsx(i.Fragment,{children:o?i.jsxs("div",{className:"uil-tooltip-wrapper",children:[h&&i.jsxs("div",{className:"uil-tooltip",onClick:x,children:[u&&i.jsx("button",{className:"uil-tooltip-button",onClick:x,children:u}),i.jsx("span",{children:c})]}),i.jsx("div",{className:"uil-tooltip-icon",onClick:function(){return f(!h)},children:i.jsx(l,{src:o,height:16,width:16})}),i.jsx(s,t({},d))]}):i.jsx(s,t({},d))})}});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/components/input/textInput.tsx"],"sourcesContent":["import React, {CSSProperties} from 'react';\nimport './images.scss';\n\ninterface ISvgIcon {\n  src: string;\n  color?: string;\n  height?: number;\n  width?: number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    src,\n    color,\n    height,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image')\n  }\n\n  const style: CSSProperties = {\n    fill: color,\n    height: `${height}px`,\n    width: `${width}px`\n  }\n\n  return (\n    <svg aria-hidden={true} className={'uil-svg'} style={style}>\n      <use href={src}/>\n    </svg>\n  );\n}","import React, {ComponentPropsWithoutRef} from \"react\";\nimport {SVG} from \"../images/svgIcon\";\nimport './input.scss';\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    label,\n    valueChanged,\n    iconColor,\n    iconSrc,\n    inputColor,\n    ...inputProps\n  } = props;\n\n  return (\n    <label className={'uil-input-wrapper'}>\n      <input\n        className={'uil-input'}\n        onChange={(e) => valueChanged(e.target.value)}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from \"./baseInput\";\nimport {SVG} from '../images/svgIcon';\nimport './input.scss';\n\ninterface ITextInput extends IBaseInput {\n  tooltipIcon?: string;\n  tooltipText?: string;\n  tooltipClose?: string\n}\n\nexport function TextInput(props: ITextInput) {\n  const {\n    tooltipIcon,\n    tooltipText,\n    tooltipClose,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'} onClick={closeTooltip}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon'} onClick={() => setTooltipVisible(!tooltipVisible)}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}"],"names":["SVG","props","src","color","height","width","includes","Error","_jsx","jsx","className","style","fill","children","href","BaseInput","label","valueChanged","iconColor","iconSrc","inputColor","inputProps","_objectWithoutPropertiesLoose","_excluded","_jsxs","onChange","e","target","value","placeholder","tooltipIcon","tooltipText","tooltipClose","_useState","useState","tooltipVisible","setTooltipVisible","closeTooltip","_Fragment","Fragment","jsxs","onClick","_extends"],"mappings":"yqBAUM,SAAUA,EAAIC,GAClB,IACEC,EAIED,EAJFC,IACAC,EAGEF,EAHFE,MACAC,EAEEH,EAFFG,OACAC,EACEJ,EADFI,MAGF,IAAKH,EAAII,SAAS,QAChB,MAAU,IAAAC,MAAM,oCASlB,OACEC,EAAkBC,IAAA,MAAA,CAAA,eAAA,EAAMC,UAAW,UAAWC,MAPnB,CAC3BC,KAAMT,EACNC,OAAWA,EAAU,KACrBC,MAAUA,EAAK,MAI2CQ,SACxDL,aAAKM,KAAMZ,KAGjB,4ECpBgBa,EAAUd,GACxB,IACEe,EAMEf,EANFe,MACAC,EAKEhB,EALFgB,aACAC,EAIEjB,EAJFiB,UACAC,EAGElB,EAHFkB,QACAC,EAEEnB,EAFFmB,WACGC,EAAUC,EACXrB,EAAKsB,GAET,OACEC,OAAO,QAAA,CAAAd,UAAW,oBAAmBG,SAAA,CACnCL,iBACEE,UAAW,YACXe,SAAU,SAACC,GAAC,OAAKT,EAAaS,EAAEC,OAAOC,MAAM,EAC7CC,YAAab,EACbL,MAAO,CAACR,MAAOiB,IACXC,IAGLF,GACCX,MAAA,MAAA,CAAKE,UAAW,oBACdF,EAAAA,IAACR,GAAIE,IAAKiB,EAASd,MAAO,GAAID,OAAQ,GAAID,MAAOe,MAIrDV,EAAAC,IAAA,OAAA,CAAMC,UAAW,YAAaC,MAAO,CAACR,MAAOiB,GAAWP,SAAGG,MAGjE,wEC/BM,SAAoBf,GACxB,IACE6B,EAIE7B,EAJF6B,YACAC,EAGE9B,EAHF8B,YACAC,EAEE/B,EAFF+B,aACGX,EAAUC,EACXrB,EAAKsB,GAETU,EAA4CC,YAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAExC,SAASI,IACPD,GAAkB,EACpB,CAEA,OACE5B,EAAAC,IAAA6B,EAAAC,SAAA,CAAA1B,SACGiB,EACCN,EAAAgB,KAAA,MAAA,CAAK9B,UAAW,sBAAqBG,SAAA,CAClCsB,GACCX,EAAKgB,KAAA,MAAA,CAAA9B,UAAW,cAAe+B,QAASJ,YACrCL,GACCxB,EAAAA,IAAQ,SAAA,CAAAE,UAAW,qBAAsB+B,QAASJ,EAC/CxB,SAAAmB,IAILxB,EAAAA,IAAO,OAAA,CAAAK,SAAAkB,OAIXvB,EAAAA,IAAK,MAAA,CAAAE,UAAW,mBAAoB+B,QAAS,WAAA,OAAML,GAAmBD,EAAe,EACnFtB,SAAAL,MAACR,EAAG,CAACE,IAAK4B,EAAa1B,OAAQ,GAAIC,MAAO,OAG5CG,MAACO,EAAS2B,EAAKrB,CAAAA,EAAAA,OAGjBb,EAAAC,IAACM,EAAS2B,EAAA,CAAA,EAAKrB,KAIvB"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "private": false,
+  "name": "@hbuesing/ui-library",
+  "version": "1.0.0",
+  "description": "Collection of reusable ui components for react based applications",
+  "keywords": [
+    "react",
+    "react-component",
+    "ui"
+  ],
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist && mkdir dist",
+    "lint": "npx eslint src",
+    "build": "npm run lint && microbundle build --jsx react",
+    "dev": "microbundle -w --jsx react",
+    "stats": "microbundle --visualize"
+  },
+  "author": "Henrik Buesing",
+  "license": "MIT",
+  "homepage": "https://github.com/HenrikBuesing/ui-library/tree/main#README.md",
+  "bugs": "https://github.com/HenrikBuesing/ui-library/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HenrikBuesing/ui-library.git"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.0.3",
+    "@eslint/js": "^9.4.0",
+    "@types/react": "^18.3.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "globals": "^15.4.0",
+    "microbundle": "^0.15.1",
+    "react": "^18.3.1",
+    "sass": "^1.77.4",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.12.0"
+  }
+}