ekm-ui 0.3.39 → 0.3.43

package/dist/stacked-list-item.mjs

@@ -1,4 +1,4 @@
-export { a as StackedListItem } from './chunk-NQ2DHV6K.mjs';
+export { a as StackedListItem } from './chunk-WYNI4KBI.mjs';
 import './chunk-XFCPRHEY.mjs';
 import './chunk-EHJJX6ZZ.mjs';
 import './chunk-ZFBRBOQI.mjs';
@@ -16,8 +16,8 @@ import './chunk-NTGEZMHP.mjs';
 import './chunk-7X4WYXA2.mjs';
 import './chunk-RMX72FR3.mjs';
 import './chunk-2IL2LP47.mjs';
-import './chunk-IKPLDZJI.mjs';
-import './chunk-N4UVO5CM.mjs';
+import './chunk-ZHCGY4YB.mjs';
+import './chunk-5DQUZENZ.mjs';
 import './chunk-ZWJSMASL.mjs';
 import './chunk-OT256LE6.mjs';
 import './chunk-AHKENQVI.mjs';
@@ -32,7 +32,7 @@ import './chunk-QOVVHEU2.mjs';
 import './chunk-D6H235SZ.mjs';
 import './chunk-PJMH47GY.mjs';
 import './chunk-KAQJAKQH.mjs';
-import './chunk-CVNRLWG6.mjs';
+import './chunk-DZABAR36.mjs';
 import './chunk-7Q4BF7BT.mjs';
 import './chunk-F6ZWBNIM.mjs';
 import './chunk-PT4DPY4L.mjs';

package/dist/textinput.mjs

@@ -1,4 +1,4 @@
-export { a as TextInput } from './chunk-N4UVO5CM.mjs';
+export { a as TextInput } from './chunk-5DQUZENZ.mjs';
 import './chunk-PUJZGK7Y.mjs';
 import './chunk-23SJGKDR.mjs';
 //# sourceMappingURL=out.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.3.39",
+  "version": "0.3.43",
   "sideEffects": [
     "**/*.css"
   ],

package/src/checkbox.tsx

@@ -9,10 +9,11 @@ export const Checkbox = forwardRef(function Checkbox(props, ref) {
       <input
         id={props.id}
         name={props.name}
+        onChange={props.onChange}
         ref={ref}
         type="checkbox"
+        checked={props.checked}
         className={twMerge(props.disabled && "opacity-40", props.className && props.className, "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600")}
-        {...props}
         />
       {props.label && (
         <label id={`${props.id}-lbl`} htmlFor={props.id} className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">

package/src/textinput.tsx

@@ -10,7 +10,7 @@ const textInputProps = variantProps({
       success:
         "bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",
       failure:
-        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
+        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
       gray: "text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
     },
   },
@@ -26,7 +26,7 @@ const iconProps = variantProps({
       success:
         "bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",
       failure:
-        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
+        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
       gray: "text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
     },
   },
@@ -39,14 +39,14 @@ const addonProps = variantProps({
   base: "block p-2.5 w-full text-sm border min-w-0 flex-1 rounded-none",
   variants: {
     position: {
-      left: "rounded-s-lg",
+      left: "rounded-r-lg",
       right: "rounded-l-lg",
     },
     color: {
       success:
         "bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",
       failure:
-        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
+        "bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",
       gray: "text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
     },
   },
@@ -84,12 +84,12 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
       <div className={props.className && props.className}>
         <div className={disabled ? "flex cursor-not-allowed opacity-50" : "flex"}>
         {position == "left" &&
-          (<span className="rounded-e-0 inline-flex items-center rounded-s-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
+          (<span className="rounded-e-0 inline-flex items-center rounded-l-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
             {addon}
           </span>)
         }
           <input
-            {...addonProps({ color })}
+            {...addonProps({ color, position })}
             type={type ? type : "text"}
             id={id}
             ref={props.ref}
@@ -99,7 +99,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
             value={props.value}
             />
           {position == "right" && 
-          (<span className="rounded-e-0 inline-flex items-center rounded-r-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
+          (<span className="rounded-e-0 inline-flex items-center rounded-r-lg border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400">
             {addon}
           </span>)
         }

package/dist/chunk-CVNRLWG6.mjs

@@ -1,11 +0,0 @@
-import { a as a$3 } from './chunk-GBY2NNWZ.mjs';
-import { a as a$1 } from './chunk-PUJZGK7Y.mjs';
-import { e, a as a$2 } from './chunk-23SJGKDR.mjs';
-import { forwardRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var a=e(a$1());var i=forwardRef(function(e,t){return jsxs("div",{className:"flex items-center",children:[jsx("input",a$2({id:e.id,name:e.name,ref:t,type:"checkbox",className:a$3(e.disabled&&"opacity-40",e.className&&e.className,"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600")},e)),e.label&&jsx("label",{id:`${e.id}-lbl`,htmlFor:e.id,className:"ms-2 text-sm font-medium text-gray-900 dark:text-gray-300",children:e.label})]})});i.propTypes={id:a.default.string.isRequired,label:a.default.string,checked:a.default.bool,disabled:a.default.bool,onChange:a.default.func};i.displayName="Checkbox";
-
-export { i as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-CVNRLWG6.mjs.map

package/dist/chunk-CVNRLWG6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/checkbox.tsx"],"names":["import_prop_types","forwardRef","jsx","jsxs","Checkbox","props","ref","__spreadValues","twMerge","PropTypes"],"mappings":"kIAEA,IAAAA,EAAsB,OADtB,OAAS,cAAAC,MAAkB,QAMvB,OACE,OAAAC,EADF,QAAAC,MAAA,oBAFG,IAAMC,EAAWH,EAAW,SAAkBI,EAAOC,EAAK,CAC/D,OACEH,EAAC,OAAI,UAAU,oBACb,UAAAD,EAAC,QAAAK,EAAA,CACC,GAAIF,EAAM,GACV,KAAMA,EAAM,KACZ,IAAKC,EACL,KAAK,WACL,UAAWE,EAAQH,EAAM,UAAY,aAAcA,EAAM,WAAaA,EAAM,UAAW,qLAAqL,GACxQA,EACJ,EACDA,EAAM,OACLH,EAAC,SAAM,GAAI,GAAGG,EAAM,SAAU,QAASA,EAAM,GAAI,UAAU,4DACxD,SAAAA,EAAM,MACT,GAEJ,CAEJ,CAAC,EAEDD,EAAS,UAAY,CAEjB,GAAI,EAAAK,QAAU,OAAO,WAErB,MAAO,EAAAA,QAAU,OAEjB,QAAS,EAAAA,QAAU,KAEnB,SAAU,EAAAA,QAAU,KAEpB,SAAU,EAAAA,QAAU,IACxB,EAEAL,EAAS,YAAc","sourcesContent":["//@ts-nocheck\nimport { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport { twMerge } from 'tailwind-merge'\n\nexport const Checkbox = forwardRef(function Checkbox(props, ref) {\n  return (\n    <div className=\"flex items-center\">\n      <input\n        id={props.id}\n        name={props.name}\n        ref={ref}\n        type=\"checkbox\"\n        className={twMerge(props.disabled && \"opacity-40\", props.className && props.className, \"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\")}\n        {...props}\n        />\n      {props.label && (\n        <label id={`${props.id}-lbl`} htmlFor={props.id} className=\"ms-2 text-sm font-medium text-gray-900 dark:text-gray-300\">\n          {props.label}\n        </label>\n      )}\n    </div>\n  )\n})\n\nCheckbox.propTypes = {\n    /** String for id of checkbox */\n    id: PropTypes.string.isRequired,\n    /** String for label placed after checkbox */\n    label: PropTypes.string,\n    /** Bool to determine if checkbox has been checked */\n    checked: PropTypes.bool,\n    /** Bool for disabled state of checkbox */\n    disabled: PropTypes.bool,\n    /** function to handle checked value */\n    onChange: PropTypes.func,\n}\n\nCheckbox.displayName = \"Checkbox\";"]}

package/dist/chunk-N4UVO5CM.mjs

@@ -1,11 +0,0 @@
-import { a } from './chunk-PUJZGK7Y.mjs';
-import { e, b, a as a$1 } from './chunk-23SJGKDR.mjs';
-import { forwardRef } from 'react';
-import { variantProps } from 'classname-variants/react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var d=e(a());var p=variantProps({base:"block p-2.5 w-full text-sm border text-sm rounded-lg",variants:{color:{success:"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",failure:"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",gray:"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"}},defaultVariants:{color:"gray"}}),v=variantProps({base:"block p-2.5 w-full text-sm border text-sm rounded-lg ps-10",variants:{color:{success:"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",failure:"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",gray:"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"}},defaultVariants:{color:"gray"}}),w=variantProps({base:"block p-2.5 w-full text-sm border min-w-0 flex-1 rounded-none",variants:{position:{left:"rounded-s-lg",right:"rounded-l-lg"},color:{success:"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500",failure:"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500",gray:"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"}},defaultVariants:{color:"gray",position:"left"}}),k=forwardRef(function(e,y){let{color:t,disabled:l,type:a,placeholder:n,id:g,icon:u,addon:s,position:i}=e;return u?jsx("div",{className:e.className&&e.className,children:jsxs("div",{className:"relative",children:[jsx("div",{className:"pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5",children:u}),jsx("input",b(a$1({},v({color:t})),{type:a||"text",id:g,ref:y,placeholder:n||"Enter your text here...",name:e.name,disabled:l,onChange:e.onChange,value:e.value}))]})}):s?jsx("div",{className:e.className&&e.className,children:jsxs("div",{className:l?"flex cursor-not-allowed opacity-50":"flex",children:[i=="left"&&jsx("span",{className:"rounded-e-0 inline-flex items-center rounded-s-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",children:s}),jsx("input",b(a$1({},w({color:t})),{type:a||"text",id:g,ref:e.ref,placeholder:n||"Enter your text here...",name:e.name,onChange:e.onChange,value:e.value})),i=="right"&&jsx("span",{className:"rounded-e-0 inline-flex items-center rounded-r-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",children:s})]})}):jsx("div",{className:e.className&&e.className,children:jsx("div",{className:l?"relative cursor-not-allowed opacity-50":"relative",children:jsx("input",a$1({type:a||"text",id:g,ref:e.ref,placeholder:n||"Enter your text here...",name:e.name,onChange:e.onChange,value:e.value},p({color:t})))})})});k.propTypes={id:d.default.string.isRequired,placeholder:d.default.string,color:d.default.oneOf(["gray","failure","success"]),icon:d.default.element,addon:d.default.element,disabled:d.default.bool,position:d.default.oneOf(["left","right"])};k.displayName="TextInput";
-
-export { k as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-N4UVO5CM.mjs.map

package/dist/chunk-N4UVO5CM.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/textinput.tsx"],"names":["import_prop_types","forwardRef","variantProps","jsx","jsxs","textInputProps","iconProps","addonProps","TextInput","props","ref","color","disabled","type","placeholder","id","icon","addon","position","__spreadProps","__spreadValues","PropTypes"],"mappings":"gGAGA,IAAAA,EAAsB,OAFtB,OAAS,cAAAC,MAAkB,QAC3B,OAAS,gBAAAC,MAAoB,2BA6DrB,OACE,OAAAC,EADF,QAAAC,MAAA,oBA1DR,IAAMC,EAAiBH,EAAa,CAClC,KAAM,uDACN,SAAU,CACR,MAAO,CACL,QACE,wOACF,QACE,iOACF,KAAM,wNACR,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CAAC,EAEKI,EAAYJ,EAAa,CAC7B,KAAM,6DACN,SAAU,CACR,MAAO,CACL,QACE,wOACF,QACE,iOACF,KAAM,wNACR,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CAAC,EAEKK,EAAaL,EAAa,CAC9B,KAAM,gEACN,SAAU,CACR,SAAU,CACR,KAAM,eACN,MAAO,cACT,EACA,MAAO,CACL,QACE,wOACF,QACE,iOACF,KAAM,wNACR,CACF,EACA,gBAAiB,CACf,MAAO,OACP,SAAU,MACZ,CACF,CAAC,EAEYM,EAAYP,EAAW,SAAmBQ,EAAOC,EAAK,CACjE,GAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,YAAAC,EAAa,GAAAC,EAAI,KAAAC,EAAM,MAAAC,EAAO,SAAAC,CAAS,EAAIT,EAC1E,OAAIO,EAEAb,EAAC,OAAI,UAAWM,EAAM,WAAaA,EAAM,UACvC,SAAAL,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAU,0EACZ,SAAAa,EACH,EACEb,EAAC,QAAAgB,EAAAC,EAAA,GACKd,EAAU,CAAE,MAAAK,CAAM,CAAC,GADxB,CAEC,KAAME,GAAc,OACpB,GAAIE,EACJ,IAAKL,EACL,YAAaI,GAAe,0BAC5B,KAAML,EAAM,KACZ,SAAUG,EACV,SAAUH,EAAM,SAChB,MAAOA,EAAM,OACb,GACN,EACF,EAEOQ,EAEPd,EAAC,OAAI,UAAWM,EAAM,WAAaA,EAAM,UACvC,SAAAL,EAAC,OAAI,UAAWQ,EAAW,qCAAuC,OACjE,UAAAM,GAAY,QACVf,EAAC,QAAK,UAAU,2KACd,SAAAc,EACH,EAEAd,EAAC,QAAAgB,EAAAC,EAAA,GACKb,EAAW,CAAE,MAAAI,CAAM,CAAC,GADzB,CAEC,KAAME,GAAc,OACpB,GAAIE,EACJ,IAAKN,EAAM,IACX,YAAaK,GAAe,0BAC5B,KAAML,EAAM,KACZ,SAAUA,EAAM,SAChB,MAAOA,EAAM,OACb,EACDS,GAAY,SACZf,EAAC,QAAK,UAAU,2KACd,SAAAc,EACH,GAEF,EACF,EAIAd,EAAC,OAAI,UAAWM,EAAM,WAAaA,EAAM,UACvC,SAAAN,EAAC,OACC,UACES,EAAW,yCAA2C,WAGxD,SAAAT,EAAC,QAAAiB,EAAA,CACC,KAAMP,GAAc,OACpB,GAAIE,EACJ,IAAKN,EAAM,IACX,YAAaK,GAAe,0BAC5B,KAAML,EAAM,KACZ,SAAUA,EAAM,SAChB,MAAOA,EAAM,OACTJ,EAAe,CAAE,MAAAM,CAAM,CAAC,EAC5B,EACJ,EACF,CAGN,CAAC,EAEDH,EAAU,UAAY,CAEpB,GAAI,EAAAa,QAAU,OAAO,WAErB,YAAa,EAAAA,QAAU,OAEvB,MAAO,EAAAA,QAAU,MAAM,CAAC,OAAQ,UAAW,SAAS,CAAC,EAErD,KAAM,EAAAA,QAAU,QAEhB,MAAO,EAAAA,QAAU,QAEjB,SAAU,EAAAA,QAAU,KAEpB,SAAU,EAAAA,QAAU,MAAM,CAAC,OAAQ,OAAO,CAAC,CAC7C,EAEAb,EAAU,YAAc","sourcesContent":["//@ts-nocheck\nimport { forwardRef } from \"react\";\nimport { variantProps } from \"classname-variants/react\";\nimport PropTypes from \"prop-types\";\n\nconst textInputProps = variantProps({\n  base: \"block p-2.5 w-full text-sm border text-sm rounded-lg\",\n  variants: {\n    color: {\n      success:\n        \"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500\",\n      failure:\n        \"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500\",\n      gray: \"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\",\n    },\n  },\n  defaultVariants: {\n    color: \"gray\",\n  },\n});\n\nconst iconProps = variantProps({\n  base: \"block p-2.5 w-full text-sm border text-sm rounded-lg ps-10\",\n  variants: {\n    color: {\n      success:\n        \"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500\",\n      failure:\n        \"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500\",\n      gray: \"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\",\n    },\n  },\n  defaultVariants: {\n    color: \"gray\",\n  },\n});\n\nconst addonProps = variantProps({\n  base: \"block p-2.5 w-full text-sm border min-w-0 flex-1 rounded-none\",\n  variants: {\n    position: {\n      left: \"rounded-s-lg\",\n      right: \"rounded-l-lg\",\n    },\n    color: {\n      success:\n        \"bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500\",\n      failure:\n        \"bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500\",\n      gray: \"text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\",\n    },\n  },\n  defaultVariants: {\n    color: \"gray\",\n    position: \"left\"\n  },\n});\n\nexport const TextInput = forwardRef(function TextInput(props, ref) {\n  const { color, disabled, type, placeholder, id, icon, addon, position } = props;\n  if (icon) {\n    return (\n      <div className={props.className && props.className}>\n        <div className=\"relative\">\n          <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5\">\n            {icon}\n          </div>\n            <input\n              {...iconProps({ color })}\n              type={type ? type : \"text\"}\n              id={id}\n              ref={ref}\n              placeholder={placeholder || \"Enter your text here...\"}\n              name={props.name}\n              disabled={disabled}\n              onChange={props.onChange}\n              value={props.value}\n              />\n        </div>\n      </div>\n    );\n  } else if (addon) {\n    return (\n      <div className={props.className && props.className}>\n        <div className={disabled ? \"flex cursor-not-allowed opacity-50\" : \"flex\"}>\n        {position == \"left\" &&\n          (<span className=\"rounded-e-0 inline-flex items-center rounded-s-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400\">\n            {addon}\n          </span>)\n        }\n          <input\n            {...addonProps({ color })}\n            type={type ? type : \"text\"}\n            id={id}\n            ref={props.ref}\n            placeholder={placeholder || \"Enter your text here...\"}\n            name={props.name}\n            onChange={props.onChange}\n            value={props.value}\n            />\n          {position == \"right\" && \n          (<span className=\"rounded-e-0 inline-flex items-center rounded-r-md border border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400\">\n            {addon}\n          </span>)\n        }\n        </div>\n      </div>\n    );\n  } else {\n    return (\n      <div className={props.className && props.className}>\n        <div\n          className={\n            disabled ? \"relative cursor-not-allowed opacity-50\" : \"relative\"\n          }\n          >\n          <input\n            type={type ? type : \"text\"}\n            id={id}\n            ref={props.ref}\n            placeholder={placeholder || \"Enter your text here...\"}\n            name={props.name}\n            onChange={props.onChange}\n            value={props.value}\n            {...textInputProps({ color })}\n            />\n        </div>\n      </div>\n    );\n  }\n});\n\nTextInput.propTypes = {\n  /** Unique id for the TextInput Component */\n  id: PropTypes.string.isRequired,\n  /** Optional placeholder text for TextInput Component */\n  placeholder: PropTypes.string,\n  /** Optional color defaults to gray. Failure and Success options available*/\n  color: PropTypes.oneOf([\"gray\", \"failure\", \"success\"]),\n  /** Optional icon TextInput Component */\n  icon: PropTypes.element,\n  /** Optional addon TextInput Component */\n  addon: PropTypes.element,\n  /** Optional to disable component */\n  disabled: PropTypes.bool,\n  /** Optional for position of Addon */\n  position: PropTypes.oneOf([\"left\", \"right\"]),\n};\n\nTextInput.displayName = \"TextInput\";\n"]}