npm - pillardash-ui-react - Versions diffs - 0.1.142 → 0.1.144 - Mend

pillardash-ui-react 0.1.142 → 0.1.144

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/cjs/components/Form/Input/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime");module.exports=function(r){var a=r.id,s=r.label,i=r.value,l=r.size,n=void 0===l?"md":l,o=r.onChange,c=r.placeholder,d=r.error,x=r.required,m=void 0!==x&&x,p=r.helpText,h=r.type,u=void 0===h?"text":h,b=r.className,g=void 0===b?"":b,v=r.disabled,y=void 0!==v&&v,f=r.icon,N=r.iconPosition,j=void 0===N?"left":N,_=r.rightIcon,k=r.block,q=e.__rest(r,["id","label","value","size","onChange","placeholder","error","required","helpText","type","className","disabled","icon","iconPosition","rightIcon","block"]),w={id:a,value:i,onChange:function(e){o&&o(e)},placeholder:c,disabled:y,className:"w-full rounded-[12px] border ".concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[n]," ").concat(d?"border-red-500":"border-gray-200"," ").concat(y?"bg-gray-100 text-gray-500 placeholder-gray-300":"bg-gray-100 placeholder-gray-400 text-dark"," focus:outline-none focus:ring-1 focus:ring-primary ").concat(g," ").concat(f&&"left"===j?"pl-10":""," ").concat(f&&"right"===j?"pr-10":""),"aria-invalid":!!d,"aria-describedby":d?"".concat(a,"-error"):p?"".concat(a,"-help"):void 0};return t.jsxs("div",{className:"mb-4 ".concat(k&&"w-full"),children:[s&&t.jsxs("label",{htmlFor:a,className:"mb-1 block text-sm font-medium text-gray-600",children:[s,m&&t.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),t.jsxs("div",{className:"relative",children:[f&&"left"===j&&t.jsx("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",children:f}),"textarea"==u?t.jsx("textarea",e.__assign({},w,{rows:4,className:"".concat(w.className," resize-none")},q)):t.jsx("input",e.__assign({},w,{type:u},q)),f&&"right"===j&&t.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",children:f}),_&&t.jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer",children:_})]}),p&&!d&&t.jsx("p",{id:"".concat(a,"-help"),className:"mt-1 text-sm text-gray-500",children:p}),d&&t.jsx("p",{id:"".concat(a,"-error"),className:"mt-1 text-sm text-red-500",children:d})]})};
+"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime");module.exports=function(a){var t=a.id,s=a.label,l=a.value,i=a.size,o=void 0===i?"md":i,c=a.onChange,n=a.placeholder,d=a.error,x=a.required,m=void 0!==x&&x,p=a.helpText,g=a.type,h=void 0===g?"text":g,b=a.className,u=void 0===b?"":b,y=a.disabled,v=void 0!==y&&y,f=a.icon,N=a.iconPosition,j=void 0===N?"left":N,k=a.rightIcon,_=a.block,q=e.__rest(a,["id","label","value","size","onChange","placeholder","error","required","helpText","type","className","disabled","icon","iconPosition","rightIcon","block"]),w={id:t,value:l,onChange:function(e){c&&c(e)},placeholder:n,disabled:v,className:"w-full rounded-[12px] border ".concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[o]," ").concat(d?"border-red-500":"border-gray-200"," ").concat(v?"bg-gray-100 text-gray-500 placeholder-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:placeholder-gray-600":"bg-gray-100 placeholder-gray-400 text-dark dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"," focus:outline-none focus:ring-1 focus:ring-primary ").concat(u," ").concat(f&&"left"===j?"pl-10":""," ").concat(f&&"right"===j?"pr-10":""),"aria-invalid":!!d,"aria-describedby":d?"".concat(t,"-error"):p?"".concat(t,"-help"):void 0};return r.jsxs("div",{className:"mb-4 ".concat(_&&"w-full"),children:[s&&r.jsxs("label",{htmlFor:t,className:"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300",children:[s,m&&r.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),r.jsxs("div",{className:"relative",children:[f&&"left"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",children:f}),"textarea"==h?r.jsx("textarea",e.__assign({},w,{rows:4,className:"".concat(w.className," resize-none")},q)):r.jsx("input",e.__assign({},w,{type:h},q)),f&&"right"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3",children:f}),k&&r.jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer",children:k})]}),p&&!d&&r.jsx("p",{id:"".concat(t,"-help"),className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:p}),d&&r.jsx("p",{id:"".concat(t,"-error"),className:"mt-1 text-sm text-red-500",children:d})]})};
 //# sourceMappingURL=Input.js.map

package/dist/cjs/components/Form/Input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../../../src/components/Form/Input/Input.tsx"],"sourcesContent":["import React, { ChangeEvent, InputHTMLAttributes, TextareaHTMLAttributes } from \"react\";\nexport type InputElement = HTMLInputElement \| HTMLTextAreaElement \| HTMLSelectElement;\nexport interface InputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"onChange\" \| \"size\"\n > {\n id?: string;\n value: string;\n onChange?: (value: React.ChangeEvent<InputElement>) => void;\n placeholder?: string;\n error?: string;\n label?: string;\n required?: boolean;\n helpText?: string;\n icon?: React.ReactNode;\n iconPosition?: \"left\" \| \"right\";\n rightIcon?: React.ReactNode;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n block?: boolean\n}\n\nconst Input: React.FC<InputProps> = ({\n id,\n label,\n value,\n size = \"md\",\n onChange,\n placeholder,\n error,\n required = false,\n helpText,\n type = \"text\",\n className = \"\",\n disabled = false,\n icon,\n iconPosition = \"left\",\n rightIcon,\n block,\n\n ...restProps\n}) => {\n // Handle input change\n const handleChange = (e: ChangeEvent<InputElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n const sizeClasses = {\n sm: \"text-xs px-3 py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm px-4 py-2 text-base min-h-[40px]\",\n lg: \"text-base px-4 py-3 text-lg min-h-[48px]\",\n };\n\n // const iconSizeClasses = {\n // sm: \"h-4 w-4\",\n // md: \"h-5 w-5\",\n // lg: \"h-6 w-6\",\n // };\n\n const commonProps = {\n id,\n value,\n onChange: handleChange,\n placeholder,\n disabled,\n className: `w-full rounded-[12px] border ${\n sizeClasses[size]\n } ${\n error ? \"border-red-500\" : \"border-gray-200\"\n } ${\n disabled\n ? \"bg-gray-100 text-gray-500 placeholder-gray-300\"\n : \"bg-gray-100 placeholder-gray-400 text-dark\"\n } focus:outline-none focus:ring-1 focus:ring-primary ${className} ${\n icon && iconPosition === \"left\" ? \"pl-10\" : \"\"\n } ${icon && iconPosition === \"right\" ? \"pr-10\" : \"\"}`,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error ? `${id}-error` : helpText ? `${id}-help` : undefined,\n };\n\n return (\n <div className={`mb-4 ${block && \"w-full\"}`}>\n {label && <label htmlFor={id} className='mb-1 block text-sm font-medium text-gray-600'>\n {label}\n {required && <span className='ml-1 text-red-500'>*</span>}\n </label>}\n\n <div className='relative'>\n {icon && iconPosition === \"left\" && (\n <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>\n {icon}\n </div>\n )}\n {type == \"textarea\" ? (\n <textarea\n {...commonProps}\n rows={4}\n className={`${commonProps.className} resize-none`}\n {...(restProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}\n />\n ) : (\n <input\n {...commonProps}\n type={type}\n {...(restProps as InputHTMLAttributes<HTMLInputElement>)}\n />\n )}\n\n {icon && iconPosition === \"right\" && (\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>\n {icon}\n </div>\n )}\n {rightIcon && (\n <div className='absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer'>\n {rightIcon}\n </div>\n )}\n </div>\n\n {helpText && !error && (\n <p id={`${id}-help`} className='mt-1 text-sm text-gray-500'>\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${id}-error`} className='mt-1 text-sm text-red-500'>\n {error}\n </p>\n )}\n </div>\n );\n};\n\nexport default Input;\n"],"names":["_a","id","label","value","_b","size","onChange","placeholder","error","_c","required","helpText","_d","type","_e","className","_f","disabled","icon","_g","iconPosition","rightIcon","block","restProps","__rest","commonProps","e","concat","sm","md","lg","undefined","_jsxs","children","htmlFor","_jsx","__assign","rows"],"mappings":"qHAuBoC,SAACA,GACjC,IAAAC,EAAED,EAAAC,GACFC,UACAC,EAAKH,EAAAG,MACLC,SAAAC,OAAI,IAAAD,EAAG,OACPE,EAAQN,EAAAM,SACRC,EAAWP,EAAAO,YACXC,EAAKR,EAAAQ,MACLC,EAAAT,EAAAU,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAQX,EAAAW,SACRC,EAAAZ,EAAAa,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAAAd,EAAAe,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,aAAAC,OAAQ,IAAAD,KACRE,EAAIlB,EAAAkB,KACJC,iBAAAC,OAAY,IAAAD,EAAG,SACfE,EAASrB,EAAAqB,UACTC,EAAKtB,EAAAsB,MAEFC,EAASC,EAAAA,OAAAxB,EAlBqB,8JAuC3ByB,EAAc,CAChBxB,GAAEA,EACFE,MAAKA,EACLG,SArBiB,SAACoB,GACdpB,GACAA,EAASoB,EAEjB,EAkBInB,YAAWA,EACXU,SAAQA,EACRF,UAAW,gCAAAY,OAlBK,CAChBC,GAAI,2CACJC,GAAI,2CACJC,GAAI,4CAgBYzB,GAAK,KAAAsB,OAEjBnB,EAAQ,iBAAmB,8BAE3BS,EACM,~~iDACA~~,~~6CAA4C,~~wDAAAU,~~OACCZ~~,cACnDG,GAAyB,SAAjBE,EAA0B,QAAU,GAAE,KAAAO,OAC9CT,GAAyB,UAAjBE,EAA2B,QAAU,IACjD,iBAAkBZ,EAClB,mBAAoBA,EAAQ,GAAAmB,OAAG1B,YAAaU,EAAW,GAAAgB,OAAG1B,EAAE,cAAU8B,GAG1E,OACIC,EAAAA,KAAA,MAAA,CAAKjB,UAAW,QAAAY,OAAQL,GAAS,UAAUW,SAAA,CACtC/B,GAAS8B,EAAAA,KAAA,QAAA,CAAOE,QAASjC,EAAIc,UAAU,~~yDACnCb~~,EACAQ,GAAYyB,EAAAA,YAAMpB,UAAU,oBAAmBkB,SAAA,SAGpDD,OAAA,MAAA,CAAKjB,UAAU,qBACVG,GAAyB,SAAjBE,GACLe,EAAAA,IAAA,MAAA,CAAKpB,UAAU,uEAAsEkB,SAChFf,IAGA,YAARL,EACGsB,EAAAA,IAAA,WAAAC,EAAAA,SAAA,CAAA,EACQX,GACJY,KAAM,EACNtB,UAAW,GAAAY,OAAGF,EAAYV,UAAS,iBAC9BQ,IAGTY,EAAAA,IAAA,QAAAC,EAAAA,SAAA,CAAA,EACQX,EAAW,CACfZ,KAAMA,GACDU,IAIZL,GAAyB,UAAjBE,GACLe,EAAAA,IAAA,MAAA,CAAKpB,UAAU,wEAAuEkB,SACjFf,IAGRG,GACGc,EAAAA,IAAA,MAAA,CAAKpB,UAAU,oEACVM,OAKZV,IAAaH,GACV2B,EAAAA,IAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,SAASc,UAAU,~~6BAA4BkB~~,~~SACtDtB~~,IAIRH,GACG2B,EAAAA,IAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,UAAUc,UAAU,4BAA2BkB,SACtDzB,MAKrB"}
1	+ {"version":3,"file":"Input.js","sources":["../../../../../src/components/Form/Input/Input.tsx"],"sourcesContent":["import React, { ChangeEvent, InputHTMLAttributes, TextareaHTMLAttributes } from \"react\";\nexport type InputElement = HTMLInputElement \| HTMLTextAreaElement \| HTMLSelectElement;\nexport interface InputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"onChange\" \| \"size\"\n > {\n id?: string;\n value: string;\n onChange?: (value: React.ChangeEvent<InputElement>) => void;\n placeholder?: string;\n error?: string;\n label?: string;\n required?: boolean;\n helpText?: string;\n icon?: React.ReactNode;\n iconPosition?: \"left\" \| \"right\";\n rightIcon?: React.ReactNode;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n block?: boolean\n}\n\nconst Input: React.FC<InputProps> = ({\n id,\n label,\n value,\n size = \"md\",\n onChange,\n placeholder,\n error,\n required = false,\n helpText,\n type = \"text\",\n className = \"\",\n disabled = false,\n icon,\n iconPosition = \"left\",\n rightIcon,\n block,\n\n ...restProps\n}) => {\n // Handle input change\n const handleChange = (e: ChangeEvent<InputElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n const sizeClasses = {\n sm: \"text-xs px-3 py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm px-4 py-2 text-base min-h-[40px]\",\n lg: \"text-base px-4 py-3 text-lg min-h-[48px]\",\n };\n\n // const iconSizeClasses = {\n // sm: \"h-4 w-4\",\n // md: \"h-5 w-5\",\n // lg: \"h-6 w-6\",\n // };\n\n const commonProps = {\n id,\n value,\n onChange: handleChange,\n placeholder,\n disabled,\n className: `w-full rounded-[12px] border ${\n sizeClasses[size]\n } ${\n error ? \"border-red-500\" : \"border-gray-200\"\n } ${\n disabled\n ? \"bg-gray-100 text-gray-500 placeholder-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:placeholder-gray-600\"\n : \"bg-gray-100 placeholder-gray-400 text-dark dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500\"\n } focus:outline-none focus:ring-1 focus:ring-primary ${className} ${\n icon && iconPosition === \"left\" ? \"pl-10\" : \"\"\n } ${icon && iconPosition === \"right\" ? \"pr-10\" : \"\"}`,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error ? `${id}-error` : helpText ? `${id}-help` : undefined,\n };\n\n return (\n <div className={`mb-4 ${block && \"w-full\"}`}>\n {label && <label htmlFor={id} className='mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300'>\n {label}\n {required && <span className='ml-1 text-red-500'>*</span>}\n </label>}\n\n <div className='relative'>\n {icon && iconPosition === \"left\" && (\n <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>\n {icon}\n </div>\n )}\n {type == \"textarea\" ? (\n <textarea\n {...commonProps}\n rows={4}\n className={`${commonProps.className} resize-none`}\n {...(restProps as TextareaHTMLAttributes<HTMLTextAreaElement>)}\n />\n ) : (\n <input\n {...commonProps}\n type={type}\n {...(restProps as InputHTMLAttributes<HTMLInputElement>)}\n />\n )}\n\n {icon && iconPosition === \"right\" && (\n <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>\n {icon}\n </div>\n )}\n {rightIcon && (\n <div className='absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer'>\n {rightIcon}\n </div>\n )}\n </div>\n\n {helpText && !error && (\n <p id={`${id}-help`} className='mt-1 text-sm text-gray-500 dark:text-gray-400'>\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${id}-error`} className='mt-1 text-sm text-red-500'>\n {error}\n </p>\n )}\n </div>\n );\n};\n\nexport default Input;\n"],"names":["_a","id","label","value","_b","size","onChange","placeholder","error","_c","required","helpText","_d","type","_e","className","_f","disabled","icon","_g","iconPosition","rightIcon","block","restProps","__rest","commonProps","e","concat","sm","md","lg","undefined","_jsxs","children","htmlFor","_jsx","__assign","rows"],"mappings":"qHAuBoC,SAACA,GACjC,IAAAC,EAAED,EAAAC,GACFC,UACAC,EAAKH,EAAAG,MACLC,SAAAC,OAAI,IAAAD,EAAG,OACPE,EAAQN,EAAAM,SACRC,EAAWP,EAAAO,YACXC,EAAKR,EAAAQ,MACLC,EAAAT,EAAAU,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAQX,EAAAW,SACRC,EAAAZ,EAAAa,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAAAd,EAAAe,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,aAAAC,OAAQ,IAAAD,KACRE,EAAIlB,EAAAkB,KACJC,iBAAAC,OAAY,IAAAD,EAAG,SACfE,EAASrB,EAAAqB,UACTC,EAAKtB,EAAAsB,MAEFC,EAASC,EAAAA,OAAAxB,EAlBqB,8JAuC3ByB,EAAc,CAChBxB,GAAEA,EACFE,MAAKA,EACLG,SArBiB,SAACoB,GACdpB,GACAA,EAASoB,EAEjB,EAkBInB,YAAWA,EACXU,SAAQA,EACRF,UAAW,gCAAAY,OAlBK,CAChBC,GAAI,2CACJC,GAAI,2CACJC,GAAI,4CAgBYzB,GAAK,KAAAsB,OAEjBnB,EAAQ,iBAAmB,8BAE3BS,EACM,+GACA,2GAA0G,wDAAAU,OAC7DZ,cACnDG,GAAyB,SAAjBE,EAA0B,QAAU,GAAE,KAAAO,OAC9CT,GAAyB,UAAjBE,EAA2B,QAAU,IACjD,iBAAkBZ,EAClB,mBAAoBA,EAAQ,GAAAmB,OAAG1B,YAAaU,EAAW,GAAAgB,OAAG1B,EAAE,cAAU8B,GAG1E,OACIC,EAAAA,KAAA,MAAA,CAAKjB,UAAW,QAAAY,OAAQL,GAAS,UAAUW,SAAA,CACtC/B,GAAS8B,EAAAA,KAAA,QAAA,CAAOE,QAASjC,EAAIc,UAAU,4EACnCb,EACAQ,GAAYyB,EAAAA,YAAMpB,UAAU,oBAAmBkB,SAAA,SAGpDD,OAAA,MAAA,CAAKjB,UAAU,qBACVG,GAAyB,SAAjBE,GACLe,EAAAA,IAAA,MAAA,CAAKpB,UAAU,uEAAsEkB,SAChFf,IAGA,YAARL,EACGsB,EAAAA,IAAA,WAAAC,EAAAA,SAAA,CAAA,EACQX,GACJY,KAAM,EACNtB,UAAW,GAAAY,OAAGF,EAAYV,UAAS,iBAC9BQ,IAGTY,EAAAA,IAAA,QAAAC,EAAAA,SAAA,CAAA,EACQX,EAAW,CACfZ,KAAMA,GACDU,IAIZL,GAAyB,UAAjBE,GACLe,EAAAA,IAAA,MAAA,CAAKpB,UAAU,wEAAuEkB,SACjFf,IAGRG,GACGc,EAAAA,IAAA,MAAA,CAAKpB,UAAU,oEACVM,OAKZV,IAAaH,GACV2B,EAAAA,IAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,SAASc,UAAU,gDAA+CkB,SACzEtB,IAIRH,GACG2B,EAAAA,IAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,UAAUc,UAAU,4BAA2BkB,SACtDzB,MAKrB"}

package/dist/cjs/components/Form/Input/InputWithPrefix.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime");require("react"),require("lucide-react");module.exports=function(t){var a=t.id,n=t.label,s=t.value,l=t.size,i=void 0===l?"md":l,c=t.onChange,o=t.placeholder,d=t.error,x=t.required,m=void 0!==x&&x,p=t.helpText,h=t.type,b=void 0===h?"text":h,u=t.className,g=void 0===u?"":u,v=t.disabled,f=void 0!==v&&v,y=t.icon,N=t.iconPosition,j=void 0===N?"left":N,C=t.rightIcon,q=t.prefixContent,z=t.prefixClassName,_=void 0===z?"":z;t.onPrefixChange;var P,k,w=e.__rest(t,["id","label","value","size","onChange","placeholder","error","required","helpText","type","className","disabled","icon","iconPosition","rightIcon","prefixContent","prefixClassName","onPrefixChange"]),I="\n        flex-1 rounded-none rounded-r-[12px] border-l-0 ".concat({sm:"text-xs py-1.5 text-sm min-h-[32px]",md:"text-sm py-2 text-base min-h-[40px]",lg:"text-base py-3 text-lg min-h-[48px]"}[i]," \n        ").concat(d?"border-red-500":"border-gray-200","\n        ").concat(f?"bg-gray-100 text-gray-500 placeholder-gray-300":"bg-gray-100 placeholder-gray-400 text-dark","\n        focus:outline-none\n        ").concat((P="",k="",y&&"left"===j&&(P="pl-10"),y&&"right"===j&&(k="pr-10"),C&&(k="pr-10"),"".concat(P," ").concat(k)),"\n        ").concat(g,"\n    "),T="\n        flex items-center rounded-l-[12px] border border-r-0 ".concat({sm:"px-1 text-xs",md:"px-2 text-sm",lg:"px-4 text-base"}[i],"\n        ").concat(d?"border-red-500":"border-gray-200","\n        ").concat(f?"bg-gray-50":"","\n        ").concat(_,"\n    "),F={id:a,value:s,onChange:function(e){c&&c(e)},placeholder:o,disabled:f,className:I,"aria-invalid":!!d,"aria-describedby":d?"".concat(a,"-error"):p?"".concat(a,"-help"):void 0};return r.jsxs("div",{className:"mb-4",children:[n&&r.jsxs("label",{htmlFor:a,className:"mb-1 block text-sm font-medium text-gray-600",children:[n,m&&r.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),r.jsx("div",{className:"relative",children:r.jsxs("div",{className:"flex",children:[q&&r.jsx("div",{className:T,children:q}),r.jsxs("div",{className:"relative ".concat(q?"flex-1":"w-full"),children:[y&&"left"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10",children:y}),r.jsx("input",e.__assign({},F,{type:b,className:"".concat(F.className," ").concat(q?"w-full border px-3":"rounded-l-[12px] border-l")},w)),y&&"right"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 z-10",children:y}),C&&r.jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-10",children:C})]})]})}),p&&!d&&r.jsx("p",{id:"".concat(a,"-help"),className:"mt-1 text-sm text-gray-500",children:p}),d&&r.jsx("p",{id:"".concat(a,"-error"),className:"mt-1 text-sm text-red-500",children:d})]})};
+"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime");require("react"),require("lucide-react");module.exports=function(a){var t=a.id,n=a.label,s=a.value,l=a.size,d=void 0===l?"md":l,i=a.onChange,c=a.placeholder,o=a.error,x=a.required,g=void 0!==x&&x,m=a.helpText,p=a.type,b=void 0===p?"text":p,h=a.className,y=void 0===h?"":h,u=a.disabled,v=void 0!==u&&u,f=a.icon,N=a.iconPosition,j=void 0===N?"left":N,k=a.rightIcon,C=a.prefixContent,q=a.prefixClassName,z=void 0===q?"":q;a.onPrefixChange;var _,P,w=e.__rest(a,["id","label","value","size","onChange","placeholder","error","required","helpText","type","className","disabled","icon","iconPosition","rightIcon","prefixContent","prefixClassName","onPrefixChange"]),I="\n        flex-1 rounded-none rounded-r-[12px] border-l-0 ".concat({sm:"text-xs py-1.5 text-sm min-h-[32px]",md:"text-sm py-2 text-base min-h-[40px]",lg:"text-base py-3 text-lg min-h-[48px]"}[d]," \n        ").concat(o?"border-red-500":"border-gray-200 dark:border-gray-700","\n        ").concat(v?"bg-gray-100 text-gray-500 placeholder-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:placeholder-gray-600":"bg-gray-100 placeholder-gray-400 text-dark dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500","\n        focus:outline-none\n        ").concat((_="",P="",f&&"left"===j&&(_="pl-10"),f&&"right"===j&&(P="pr-10"),k&&(P="pr-10"),"".concat(_," ").concat(P)),"\n        ").concat(y,"\n    "),T="\n        flex items-center rounded-l-[12px] border border-r-0 ".concat({sm:"px-1 text-xs",md:"px-2 text-sm",lg:"px-4 text-base"}[d],"\n        ").concat(o?"border-red-500":"border-gray-200 dark:border-gray-700","\n        ").concat(v?"bg-gray-50 dark:bg-gray-800":"bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200","\n        ").concat(z,"\n    "),F={id:t,value:s,onChange:function(e){i&&i(e)},placeholder:c,disabled:v,className:I,"aria-invalid":!!o,"aria-describedby":o?"".concat(t,"-error"):m?"".concat(t,"-help"):void 0};return r.jsxs("div",{className:"mb-4",children:[n&&r.jsxs("label",{htmlFor:t,className:"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300",children:[n,g&&r.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),r.jsx("div",{className:"relative",children:r.jsxs("div",{className:"flex",children:[C&&r.jsx("div",{className:T,children:C}),r.jsxs("div",{className:"relative ".concat(C?"flex-1":"w-full"),children:[f&&"left"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10",children:f}),r.jsx("input",e.__assign({},F,{type:b,className:"".concat(F.className," ").concat(C?"w-full border px-3":"rounded-l-[12px] border-l")},w)),f&&"right"===j&&r.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 z-10",children:f}),k&&r.jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-10",children:k})]})]})}),m&&!o&&r.jsx("p",{id:"".concat(t,"-help"),className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:m}),o&&r.jsx("p",{id:"".concat(t,"-error"),className:"mt-1 text-sm text-red-500",children:o})]})};
 //# sourceMappingURL=InputWithPrefix.js.map

package/dist/cjs/components/Form/Input/InputWithPrefix.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputWithPrefix.js","sources":["../../../../../src/components/Form/Input/InputWithPrefix.tsx"],"sourcesContent":["import React, { ChangeEvent, InputHTMLAttributes, TextareaHTMLAttributes, useState } from \"react\";\nimport { ChevronDown, DollarSign, Phone, User } from \"lucide-react\";\n\nexport interface InputWithPrefixProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"onChange\" \| \"size\" \| \"prefix\"\n > {\n id?: string;\n value: string;\n onChange?: (value: React.ChangeEvent<HTMLInputElement>) => void;\n placeholder?: string;\n error?: string;\n label?: string;\n required?: boolean;\n helpText?: string;\n icon?: React.ReactNode;\n iconPosition?: \"left\" \| \"right\";\n rightIcon?: React.ReactNode;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n\n // New props for prefix functionality\n prefixContent?: React.ReactNode;\n prefixClassName?: string;\n onPrefixChange?: (value: any) => void;\n}\n\nconst InputWithPrefix: React.FC<InputWithPrefixProps> = ({\n id,\n label,\n value,\n size = \"md\",\n onChange,\n placeholder,\n error,\n required = false,\n helpText,\n type = \"text\",\n className = \"\",\n disabled = false,\n icon,\n iconPosition = \"left\",\n rightIcon,\n prefixContent,\n prefixClassName = \"\",\n onPrefixChange,\n ...restProps\n }) => {\n // Handle input change\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n const sizeClasses = {\n sm: \"text-xs py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm py-2 text-base min-h-[40px]\",\n lg: \"text-base py-3 text-lg min-h-[48px]\",\n };\n\n const prefixSizeClasses = {\n sm: \"px-1 text-xs\",\n md: \"px-2 text-sm\",\n lg: \"px-4 text-base\",\n };\n\n const inputPaddingClasses = {\n sm: \"pl-3 pr-3\",\n md: \"pl-4 pr-4\",\n lg: \"pl-4 pr-4\",\n };\n\n // Determine if we need extra padding for icons\n const getIconPadding = () => {\n let leftPadding = \"\";\n let rightPadding = \"\";\n\n if (icon && iconPosition === \"left\") {\n leftPadding = \"pl-10\";\n }\n if (icon && iconPosition === \"right\") {\n rightPadding = \"pr-10\";\n }\n if (rightIcon) {\n rightPadding = \"pr-10\";\n }\n\n return `${leftPadding} ${rightPadding}`;\n };\n\n const baseInputClasses = `\n flex-1 rounded-none rounded-r-[12px] border-l-0 ${sizeClasses[size]} \n ${error ? \"border-red-500\" : \"border-gray-200\"}\n ${disabled ? \"bg-gray-100 text-gray-500 placeholder-gray-300\" : \"bg-gray-100 placeholder-gray-400 text-dark\"}\n focus:outline-none\n ${getIconPadding()}\n ${className}\n `;\n\n const prefixClasses = `\n flex items-center rounded-l-[12px] border border-r-0 ${prefixSizeClasses[size]}\n ${error ? \"border-red-500\" : \"border-gray-200\"}\n ${disabled ? \"bg-gray-50\" : \"\"}\n ${prefixClassName}\n `;\n\n const commonInputProps = {\n id,\n value,\n onChange: handleChange,\n placeholder,\n disabled,\n className: baseInputClasses,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error ? `${id}-error` : helpText ? `${id}-help` : undefined,\n };\n\n return (\n <div className='mb-4'>\n {label && (\n <label htmlFor={id} className='mb-1 block text-sm font-medium text-gray-600'>\n {label}\n {required && <span className='ml-1 text-red-500'></span>}\n </label>\n )}\n\n <div className='relative'>\n <div className='flex'>\n {/ Prefix Section /}\n {prefixContent && (\n <div className={prefixClasses}>\n {prefixContent}\n </div>\n )}\n\n {/ Input Section /}\n <div className={`relative ${prefixContent ? \"flex-1\" : \"w-full\"}`}>\n {icon && iconPosition === \"left\" && (\n <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10\">\n {icon}\n </div>\n )}\n\n <input\n {...commonInputProps}\n type={type}\n className={`${commonInputProps.className} ${!prefixContent ? \"rounded-l-[12px] border-l\" : \"w-full border px-3\"}`}\n {...(restProps as InputHTMLAttributes<HTMLInputElement>)}\n />\n\n {icon && iconPosition === \"right\" && (\n <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 z-10\">\n {icon}\n </div>\n )}\n\n {rightIcon && (\n <div className=\"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-10\">\n {rightIcon}\n </div>\n )}\n </div>\n </div>\n </div>\n\n {helpText && !error && (\n <p id={`${id}-help`} className=\"mt-1 text-sm text-gray-500\">\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${id}-error`} className=\"mt-1 text-sm text-red-500\">\n {error}\n </p>\n )}\n </div>\n );\n};\n\n\nexport default InputWithPrefix;\n\nexport const InputWithPrefixDemo = () => {\n const [phoneNumber, setPhoneNumber] = useState('');\n const [amount, setAmount] = useState('');\n const [username, setUsername] = useState('');\n const [selectedCountry, setSelectedCountry] = useState('+234');\n const [selectedCurrency, setSelectedCurrency] = useState('USD');\n\n const countries = [\n { code: '+234', flag: '🇳🇬', country: 'Nigeria' },\n { code: '+1', flag: '🇺🇸', country: 'United States' },\n { code: '+44', flag: '🇬🇧', country: 'United Kingdom' },\n { code: '+91', flag: '🇮🇳', country: 'India' },\n { code: '+86', flag: '🇨🇳', country: 'China' },\n ];\n\n const currencies = ['USD', 'EUR', 'GBP', 'NGN', 'JPY'];\n\n return (\n <div className=\"max-w-2xl mx-auto p-8 bg-gray-50 min-h-screen\">\n <h1 className=\"text-3xl font-bold text-gray-900 mb-8\">InputWithPrefix Component Demo</h1>\n\n <div className=\"bg-white rounded-lg shadow-sm p-6 space-y-6\">\n {/ Phone Number with Country Code Selector /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Phone Number with Country Code</h2>\n <InputWithPrefix\n id=\"phone\"\n label=\"Phone Number\"\n value={phoneNumber}\n onChange={(e) => setPhoneNumber(e.target.value)}\n placeholder=\"Enter your phone number\"\n icon={<Phone className=\"h-5 w-5 text-gray-400\" />}\n iconPosition=\"right\"\n required\n prefixContent={\n <div className=\"flex items-center\">\n <select\n value={selectedCountry}\n onChange={(e) => setSelectedCountry(e.target.value)}\n className=\"bg-transparent border-none outline-none text-sm font-medium text-gray-700 pr-2\"\n >\n {countries.map((country) => (\n <option key={country.code} value={country.code}>\n {country.flag} {country.code}\n </option>\n ))}\n </select>\n <ChevronDown className=\"h-4 w-4 text-gray-400\" />\n </div>\n }\n prefixClassName=\"min-w-[120px] justify-between\"\n />\n </div>\n\n {/ Amount with Currency Selector /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Amount with Currency</h2>\n <InputWithPrefix\n id=\"amount\"\n label=\"Amount\"\n value={amount}\n onChange={(e) => setAmount(e.target.value)}\n placeholder=\"0.00\"\n type=\"number\"\n prefixContent={\n <div className=\"flex items-center\">\n <select\n value={selectedCurrency}\n onChange={(e) => setSelectedCurrency(e.target.value)}\n className=\"bg-transparent border-none outline-none text-sm font-medium text-gray-700 pr-2\"\n >\n {currencies.map((currency) => (\n <option key={currency} value={currency}>\n {currency}\n </option>\n ))}\n </select>\n <ChevronDown className=\"h-4 w-4 text-gray-400\" />\n </div>\n }\n prefixClassName=\"min-w-[80px] justify-between\"\n />\n </div>\n\n {/ Username with @ symbol /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Username with @ Symbol</h2>\n <InputWithPrefix\n id=\"username\"\n label=\"Username\"\n value={username}\n onChange={(e) => setUsername(e.target.value)}\n placeholder=\"your-username\"\n icon={<User className=\"h-5 w-5 text-gray-400\" />}\n iconPosition=\"right\"\n prefixContent={\n <span className=\"text-gray-600 font-medium\">@</span>\n }\n helpText=\"Choose a unique username\"\n />\n </div>\n\n {/ Static Currency Symbol /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Price with Static Currency</h2>\n <InputWithPrefix\n id=\"price\"\n label=\"Price\"\n value=\"\"\n onChange={() => {}}\n placeholder=\"0.00\"\n type=\"number\"\n prefixContent={\n <DollarSign className=\"h-5 w-5 text-gray-600\" />\n }\n prefixClassName=\"min-w-[50px] justify-center\"\n />\n </div>\n\n {/ Custom HTML in Prefix */}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Custom Prefix Content</h2>\n <InputWithPrefix\n id=\"custom\"\n label=\"Website URL\"\n value=\"\"\n onChange={() => {}}\n placeholder=\"your-site\"\n prefixContent={\n <div className=\"flex items-center space-x-1\">\n <span className=\"text-blue-600 font-medium\">https://</span>\n <div className=\"h-4 w-px bg-gray-300\"></div>\n </div>\n }\n prefixClassName=\"min-w-[90px]\"\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_a","id","label","value","_b","size","onChange","placeholder","error","_c","required","helpText","_d","type","_e","className","_f","disabled","icon","_g","iconPosition","rightIcon","prefixContent","_h","prefixClassName","onPrefixChange","leftPadding","rightPadding","restProps","__rest","baseInputClasses","concat","sm","md","lg","prefixClasses","commonInputProps","e","undefined","_jsxs","children","htmlFor","_jsx","__assign"],"mappings":"8JA4BwD,SAACA,GACI,IAAAC,EAAED,EAAAC,GACFC,EAAKF,EAAAE,MACLC,EAAKH,EAAAG,MACLC,EAAAJ,EAAAK,KAAAA,OAAI,IAAAD,EAAG,OACPE,aACAC,EAAWP,EAAAO,YACXC,EAAKR,EAAAQ,MACLC,aAAAC,cAAgBD,EAChBE,aACAC,EAAAZ,EAAAa,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAAAd,EAAAe,UAAAA,OAAS,IAAAD,EAAG,KACZE,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAIlB,EAAAkB,KACJC,EAAAnB,EAAAoB,aAAAA,OAAY,IAAAD,EAAG,OAAMA,EACrBE,EAASrB,EAAAqB,UACTC,EAAatB,EAAAsB,cACbC,oBAAAC,aAAkB,GAAED,EACNvB,EAAAyB,mBA8B/DC,EACAC,EA9BoDC,EAASC,EAAAA,OAAA7B,EAnBhB,yMAgE/C8B,EAAmB,6DAAAC,OApCL,CAChBC,GAAI,sCACJC,GAAI,sCACJC,GAAI,uCAkC0D7B,GAAK,eAAA0B,OACjEvB,EAAQ,iBAAmB,kBAAiB,cAAAuB,OAC5Cd,EAAW,iDAAmD,+FAnB5DS,EAAc,GACdC,EAAe,GAEfT,GAAyB,SAAjBE,IACRM,EAAc,SAEdR,GAAyB,UAAjBE,IACRO,EAAe,SAEfN,IACAM,EAAe,SAGZ,GAAAI,OAAGL,EAAW,KAAAK,OAAIJ,IAQP,cAAAI,OAChBhB,YAGAoB,EAAgB,kEAAAJ,OAvCI,CACtBC,GAAI,eACJC,GAAI,eACJC,GAAI,kBAqCqE7B,GAAK,cAAA0B,OAC5EvB,EAAQ,iBAAmB,kBAAiB,cAAAuB,OAC5Cd,EAAW,aAAe,GAAE,cAAAc,OAC5BP,YAGAY,EAAmB,CACrBnC,GAAEA,EACFE,MAAKA,EACLG,SA7DiB,SAAC+B,GACd/B,GACAA,EAAS+B,EAEjB,EA0DI9B,YAAWA,EACXU,SAAQA,EACRF,UAAWe,EACX,iBAAkBtB,EAClB,mBAAoBA,EAAQ,GAAAuB,OAAG9B,YAAaU,EAAW,GAAAoB,OAAG9B,EAAE,cAAUqC,GAG1E,OACIC,EAAAA,KAAA,MAAA,CAAKxB,UAAU,OAAMyB,SAAA,CAChBtC,GACGqC,EAAAA,cAAOE,QAASxC,EAAIc,UAAU,+CAA8CyB,SAAA,CACvEtC,EACAQ,GAAYgC,EAAAA,IAAA,OAAA,CAAM3B,UAAU,sCAIrC2B,EAAAA,IAAA,MAAA,CAAK3B,UAAU,WAAUyB,SACrBD,EAAAA,YAAKxB,UAAU,OAAMyB,SAAA,CAEhBlB,GACGoB,EAAAA,IAAA,MAAA,CAAK3B,UAAWoB,EAAaK,SACxBlB,IAKTiB,cAAKxB,UAAW,mBAAYO,EAAgB,SAAW,UAAUkB,SAAA,CAC5DtB,GAAyB,SAAjBE,GACLsB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,4EAA2EyB,SACrFtB,IAITwB,EAAAA,IAAA,QAAAC,WAAA,CAAA,EACQP,GACJvB,KAAMA,EACNE,UAAW,GAAAgB,OAAGK,EAAiBrB,sBAAcO,EAA8C,qBAA9B,8BACxDM,IAGRV,GAAyB,UAAjBE,GACLsB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,sFACVG,IAIRG,GACGqB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,yEACVM,YAOpBV,IAAaH,GACVkC,WAAGzC,GAAI,UAAGA,EAAE,SAASc,UAAU,6BAA4ByB,SACtD7B,IAIRH,GACGkC,EAAAA,SAAGzC,GAAI,UAAGA,EAAE,UAAUc,UAAU,4BAA2ByB,SACtDhC,MAKrB"}
1	+ {"version":3,"file":"InputWithPrefix.js","sources":["../../../../../src/components/Form/Input/InputWithPrefix.tsx"],"sourcesContent":["import React, { ChangeEvent, InputHTMLAttributes, TextareaHTMLAttributes, useState } from \"react\";\nimport { ChevronDown, DollarSign, Phone, User } from \"lucide-react\";\n\nexport interface InputWithPrefixProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>,\n \"onChange\" \| \"size\" \| \"prefix\"\n > {\n id?: string;\n value: string;\n onChange?: (value: React.ChangeEvent<HTMLInputElement>) => void;\n placeholder?: string;\n error?: string;\n label?: string;\n required?: boolean;\n helpText?: string;\n icon?: React.ReactNode;\n iconPosition?: \"left\" \| \"right\";\n rightIcon?: React.ReactNode;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n\n // New props for prefix functionality\n prefixContent?: React.ReactNode;\n prefixClassName?: string;\n onPrefixChange?: (value: any) => void;\n}\n\nconst InputWithPrefix: React.FC<InputWithPrefixProps> = ({\n id,\n label,\n value,\n size = \"md\",\n onChange,\n placeholder,\n error,\n required = false,\n helpText,\n type = \"text\",\n className = \"\",\n disabled = false,\n icon,\n iconPosition = \"left\",\n rightIcon,\n prefixContent,\n prefixClassName = \"\",\n onPrefixChange,\n ...restProps\n }) => {\n // Handle input change\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n };\n\n const sizeClasses = {\n sm: \"text-xs py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm py-2 text-base min-h-[40px]\",\n lg: \"text-base py-3 text-lg min-h-[48px]\",\n };\n\n const prefixSizeClasses = {\n sm: \"px-1 text-xs\",\n md: \"px-2 text-sm\",\n lg: \"px-4 text-base\",\n };\n\n const inputPaddingClasses = {\n sm: \"pl-3 pr-3\",\n md: \"pl-4 pr-4\",\n lg: \"pl-4 pr-4\",\n };\n\n // Determine if we need extra padding for icons\n const getIconPadding = () => {\n let leftPadding = \"\";\n let rightPadding = \"\";\n\n if (icon && iconPosition === \"left\") {\n leftPadding = \"pl-10\";\n }\n if (icon && iconPosition === \"right\") {\n rightPadding = \"pr-10\";\n }\n if (rightIcon) {\n rightPadding = \"pr-10\";\n }\n\n return `${leftPadding} ${rightPadding}`;\n };\n\n const baseInputClasses = `\n flex-1 rounded-none rounded-r-[12px] border-l-0 ${sizeClasses[size]} \n ${error ? \"border-red-500\" : \"border-gray-200 dark:border-gray-700\"}\n ${disabled ? \"bg-gray-100 text-gray-500 placeholder-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:placeholder-gray-600\" : \"bg-gray-100 placeholder-gray-400 text-dark dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500\"}\n focus:outline-none\n ${getIconPadding()}\n ${className}\n `;\n\n const prefixClasses = `\n flex items-center rounded-l-[12px] border border-r-0 ${prefixSizeClasses[size]}\n ${error ? \"border-red-500\" : \"border-gray-200 dark:border-gray-700\"}\n ${disabled ? \"bg-gray-50 dark:bg-gray-800\" : \"bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200\"}\n ${prefixClassName}\n `;\n\n const commonInputProps = {\n id,\n value,\n onChange: handleChange,\n placeholder,\n disabled,\n className: baseInputClasses,\n \"aria-invalid\": !!error,\n \"aria-describedby\": error ? `${id}-error` : helpText ? `${id}-help` : undefined,\n };\n\n return (\n <div className='mb-4'>\n {label && (\n <label htmlFor={id} className='mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300'>\n {label}\n {required && <span className='ml-1 text-red-500'></span>}\n </label>\n )}\n\n <div className='relative'>\n <div className='flex'>\n {/ Prefix Section /}\n {prefixContent && (\n <div className={prefixClasses}>\n {prefixContent}\n </div>\n )}\n\n {/ Input Section /}\n <div className={`relative ${prefixContent ? \"flex-1\" : \"w-full\"}`}>\n {icon && iconPosition === \"left\" && (\n <div className=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10\">\n {icon}\n </div>\n )}\n\n <input\n {...commonInputProps}\n type={type}\n className={`${commonInputProps.className} ${!prefixContent ? \"rounded-l-[12px] border-l\" : \"w-full border px-3\"}`}\n {...(restProps as InputHTMLAttributes<HTMLInputElement>)}\n />\n\n {icon && iconPosition === \"right\" && (\n <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 z-10\">\n {icon}\n </div>\n )}\n\n {rightIcon && (\n <div className=\"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-10\">\n {rightIcon}\n </div>\n )}\n </div>\n </div>\n </div>\n\n {helpText && !error && (\n <p id={`${id}-help`} className=\"mt-1 text-sm text-gray-500 dark:text-gray-400\">\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${id}-error`} className=\"mt-1 text-sm text-red-500\">\n {error}\n </p>\n )}\n </div>\n );\n};\n\n\nexport default InputWithPrefix;\n\nexport const InputWithPrefixDemo = () => {\n const [phoneNumber, setPhoneNumber] = useState('');\n const [amount, setAmount] = useState('');\n const [username, setUsername] = useState('');\n const [selectedCountry, setSelectedCountry] = useState('+234');\n const [selectedCurrency, setSelectedCurrency] = useState('USD');\n\n const countries = [\n { code: '+234', flag: '🇳🇬', country: 'Nigeria' },\n { code: '+1', flag: '🇺🇸', country: 'United States' },\n { code: '+44', flag: '🇬🇧', country: 'United Kingdom' },\n { code: '+91', flag: '🇮🇳', country: 'India' },\n { code: '+86', flag: '🇨🇳', country: 'China' },\n ];\n\n const currencies = ['USD', 'EUR', 'GBP', 'NGN', 'JPY'];\n\n return (\n <div className=\"max-w-2xl mx-auto p-8 bg-gray-50 min-h-screen\">\n <h1 className=\"text-3xl font-bold text-gray-900 mb-8\">InputWithPrefix Component Demo</h1>\n\n <div className=\"bg-white rounded-lg shadow-sm p-6 space-y-6\">\n {/ Phone Number with Country Code Selector /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Phone Number with Country Code</h2>\n <InputWithPrefix\n id=\"phone\"\n label=\"Phone Number\"\n value={phoneNumber}\n onChange={(e) => setPhoneNumber(e.target.value)}\n placeholder=\"Enter your phone number\"\n icon={<Phone className=\"h-5 w-5 text-gray-400\" />}\n iconPosition=\"right\"\n required\n prefixContent={\n <div className=\"flex items-center\">\n <select\n value={selectedCountry}\n onChange={(e) => setSelectedCountry(e.target.value)}\n className=\"bg-transparent border-none outline-none text-sm font-medium text-gray-700 pr-2\"\n >\n {countries.map((country) => (\n <option key={country.code} value={country.code}>\n {country.flag} {country.code}\n </option>\n ))}\n </select>\n <ChevronDown className=\"h-4 w-4 text-gray-400\" />\n </div>\n }\n prefixClassName=\"min-w-[120px] justify-between\"\n />\n </div>\n\n {/ Amount with Currency Selector /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Amount with Currency</h2>\n <InputWithPrefix\n id=\"amount\"\n label=\"Amount\"\n value={amount}\n onChange={(e) => setAmount(e.target.value)}\n placeholder=\"0.00\"\n type=\"number\"\n prefixContent={\n <div className=\"flex items-center\">\n <select\n value={selectedCurrency}\n onChange={(e) => setSelectedCurrency(e.target.value)}\n className=\"bg-transparent border-none outline-none text-sm font-medium text-gray-700 pr-2\"\n >\n {currencies.map((currency) => (\n <option key={currency} value={currency}>\n {currency}\n </option>\n ))}\n </select>\n <ChevronDown className=\"h-4 w-4 text-gray-400\" />\n </div>\n }\n prefixClassName=\"min-w-[80px] justify-between\"\n />\n </div>\n\n {/ Username with @ symbol /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Username with @ Symbol</h2>\n <InputWithPrefix\n id=\"username\"\n label=\"Username\"\n value={username}\n onChange={(e) => setUsername(e.target.value)}\n placeholder=\"your-username\"\n icon={<User className=\"h-5 w-5 text-gray-400\" />}\n iconPosition=\"right\"\n prefixContent={\n <span className=\"text-gray-600 font-medium\">@</span>\n }\n helpText=\"Choose a unique username\"\n />\n </div>\n\n {/ Static Currency Symbol /}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Price with Static Currency</h2>\n <InputWithPrefix\n id=\"price\"\n label=\"Price\"\n value=\"\"\n onChange={() => {}}\n placeholder=\"0.00\"\n type=\"number\"\n prefixContent={\n <DollarSign className=\"h-5 w-5 text-gray-600\" />\n }\n prefixClassName=\"min-w-[50px] justify-center\"\n />\n </div>\n\n {/ Custom HTML in Prefix */}\n <div>\n <h2 className=\"text-lg font-semibold text-gray-800 mb-4\">Custom Prefix Content</h2>\n <InputWithPrefix\n id=\"custom\"\n label=\"Website URL\"\n value=\"\"\n onChange={() => {}}\n placeholder=\"your-site\"\n prefixContent={\n <div className=\"flex items-center space-x-1\">\n <span className=\"text-blue-600 font-medium\">https://</span>\n <div className=\"h-4 w-px bg-gray-300\"></div>\n </div>\n }\n prefixClassName=\"min-w-[90px]\"\n />\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_a","id","label","value","_b","size","onChange","placeholder","error","_c","required","helpText","_d","type","_e","className","_f","disabled","icon","_g","iconPosition","rightIcon","prefixContent","_h","prefixClassName","onPrefixChange","leftPadding","rightPadding","restProps","__rest","baseInputClasses","concat","sm","md","lg","prefixClasses","commonInputProps","e","undefined","_jsxs","children","htmlFor","_jsx","__assign"],"mappings":"8JA4BwD,SAACA,GACI,IAAAC,EAAED,EAAAC,GACFC,EAAKF,EAAAE,MACLC,EAAKH,EAAAG,MACLC,EAAAJ,EAAAK,KAAAA,OAAI,IAAAD,EAAG,OACPE,aACAC,EAAWP,EAAAO,YACXC,EAAKR,EAAAQ,MACLC,aAAAC,cAAgBD,EAChBE,aACAC,EAAAZ,EAAAa,KAAAA,OAAI,IAAAD,EAAG,OAAMA,EACbE,EAAAd,EAAAe,UAAAA,OAAS,IAAAD,EAAG,KACZE,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAIlB,EAAAkB,KACJC,EAAAnB,EAAAoB,aAAAA,OAAY,IAAAD,EAAG,OAAMA,EACrBE,EAASrB,EAAAqB,UACTC,EAAatB,EAAAsB,cACbC,oBAAAC,aAAkB,GAAED,EACNvB,EAAAyB,mBA8B/DC,EACAC,EA9BoDC,EAASC,EAAAA,OAAA7B,EAnBhB,yMAgE/C8B,EAAmB,6DAAAC,OApCL,CAChBC,GAAI,sCACJC,GAAI,sCACJC,GAAI,uCAkC0D7B,GAAK,eAAA0B,OACjEvB,EAAQ,iBAAmB,uCAAsC,cAAAuB,OACjEd,EAAW,+GAAiH,6JAnB1HS,EAAc,GACdC,EAAe,GAEfT,GAAyB,SAAjBE,IACRM,EAAc,SAEdR,GAAyB,UAAjBE,IACRO,EAAe,SAEfN,IACAM,EAAe,SAGZ,GAAAI,OAAGL,EAAW,KAAAK,OAAIJ,IAQP,cAAAI,OAChBhB,YAGAoB,EAAgB,kEAAAJ,OAvCI,CACtBC,GAAI,eACJC,GAAI,eACJC,GAAI,kBAqCqE7B,GAAK,cAAA0B,OAC5EvB,EAAQ,iBAAmB,uCAAsC,cAAAuB,OACjEd,EAAW,8BAAgC,gEAA+D,cAAAc,OAC1GP,YAGAY,EAAmB,CACrBnC,GAAEA,EACFE,MAAKA,EACLG,SA7DiB,SAAC+B,GACd/B,GACAA,EAAS+B,EAEjB,EA0DI9B,YAAWA,EACXU,SAAQA,EACRF,UAAWe,EACX,iBAAkBtB,EAClB,mBAAoBA,EAAQ,GAAAuB,OAAG9B,YAAaU,EAAW,GAAAoB,OAAG9B,EAAE,cAAUqC,GAG1E,OACIC,EAAAA,KAAA,MAAA,CAAKxB,UAAU,OAAMyB,SAAA,CAChBtC,GACGqC,EAAAA,cAAOE,QAASxC,EAAIc,UAAU,kEAAiEyB,SAAA,CAC1FtC,EACAQ,GAAYgC,EAAAA,IAAA,OAAA,CAAM3B,UAAU,sCAIrC2B,EAAAA,IAAA,MAAA,CAAK3B,UAAU,WAAUyB,SACrBD,EAAAA,YAAKxB,UAAU,OAAMyB,SAAA,CAEhBlB,GACGoB,EAAAA,IAAA,MAAA,CAAK3B,UAAWoB,EAAaK,SACxBlB,IAKTiB,cAAKxB,UAAW,mBAAYO,EAAgB,SAAW,UAAUkB,SAAA,CAC5DtB,GAAyB,SAAjBE,GACLsB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,4EAA2EyB,SACrFtB,IAITwB,EAAAA,IAAA,QAAAC,WAAA,CAAA,EACQP,GACJvB,KAAMA,EACNE,UAAW,GAAAgB,OAAGK,EAAiBrB,sBAAcO,EAA8C,qBAA9B,8BACxDM,IAGRV,GAAyB,UAAjBE,GACLsB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,sFACVG,IAIRG,GACGqB,EAAAA,IAAA,MAAA,CAAK3B,UAAU,yEACVM,YAOpBV,IAAaH,GACVkC,WAAGzC,GAAI,UAAGA,EAAE,SAASc,UAAU,gDAA+CyB,SACzE7B,IAIRH,GACGkC,EAAAA,SAAGzC,GAAI,UAAGA,EAAE,UAAUc,UAAU,4BAA2ByB,SACtDhC,MAKrB"}

package/dist/cjs/components/Form/Input/TagInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),a=require("react"),l=function(l){var r=l.id,n=l.label,s=l.value,o=void 0===s?[]:s,i=l.size,d=void 0===i?"md":i,c=l.onChange,u=l.placeholder,m=void 0===u?"Type to search or add tags...":u,x=l.error,g=l.required,p=void 0!==g&&g,h=l.helpText,b=l.className,v=void 0===b?"":b,f=l.disabled,y=void 0!==f&&f,j=l.predefinedTags,w=void 0===j?[]:j,N=l.tagBackgroundColor,C=void 0===N?"bg-primary":N,T=l.tagTextColor,k=void 0===T?"text-white":T,L=l.maxTags,S=l.allowCustomTags,_=void 0===S||S;e.__rest(l,["id","label","value","size","onChange","placeholder","error","required","helpText","className","disabled","predefinedTags","tagBackgroundColor","tagTextColor","maxTags","allowCustomTags"]);var A=a.useState(""),E=A[0],M=A[1],R=a.useState(!1),z=R[0],B=R[1],D=a.useRef(null),q=a.useRef(null),I={sm:"text-xs px-2 py-0.5",md:"text-sm px-2 py-1",lg:"text-base px-3 py-1.5"},F=a.useMemo((function(){return E?w.filter((function(e){return e.label.toLowerCase().includes(E.toLowerCase())&&!o.some((function(t){return t===e.value}))})):w.filter((function(e){return!o.some((function(t){return t===e.value}))}))}),[E,w,o]);a.useEffect((function(){var e=function(e){q.current&&!q.current.contains(e.target)&&B(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[]);var J=function(t){if(t&&!(L&&o.length>=L)&&!o.find((function(e){return e.toLowerCase()===t.toLowerCase()}))){var a,l=w.find((function(e){return e.label.toLowerCase()===t.toLowerCase()||e.value.toLowerCase()===t.toLowerCase()}));if(l)a=l.value;else{if(!_)return;a=t}var r=e.__spreadArray(e.__spreadArray([],o,!0),[a],!1);null==c||c(r),M(""),B(!1)}},O=function(e){var t=o.filter((function(t){return t!==e}));null==c||c(t)};return t.jsxs("div",{className:"mb-4",children:[n&&t.jsxs("label",{htmlFor:r,className:"mb-1 block text-sm font-medium text-gray-600",children:[n,p&&t.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),t.jsxs("div",{className:"relative",ref:q,children:[t.jsxs("div",{className:"w-full rounded-[12px] border ".concat(x?"border-red-500":"border-gray-200"," ").concat(y?"bg-gray-100 text-gray-500":"bg-gray-100 text-dark"," focus-within:outline-none focus-within:ring-1 focus-within:ring-primary ").concat(v," ").concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[d]," flex flex-wrap items-center gap-1"),children:[o.map((function(e){return t.jsxs("span",{className:"inline-flex items-center rounded-full ".concat(C," ").concat(k," ").concat(I[d]," font-medium"),children:[e,!y&&t.jsx("button",{type:"button",onClick:function(){return O(e)},className:"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20",children:t.jsx("svg",{className:"h-3 w-3",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]},e)})),t.jsx("input",{ref:D,id:r,type:"text",value:E,onChange:function(e){var t=e.target.value;M(t),B(!0)},onKeyDown:function(e){"Enter"===e.key&&E.trim()?(e.preventDefault(),J(E.trim())):"Backspace"===e.key&&!E&&o.length>0?O(o[o.length-1]):"Escape"===e.key&&(B(!1),M(""))},onFocus:function(){B(!0)},placeholder:0===o.length?m:"",disabled:y||L&&o.length>=L,className:"flex-1 border-none bg-transparent outline-none placeholder-gray-400 min-w-[120px]","aria-invalid":!!x,"aria-describedby":x?"".concat(o,"-error"):h?"".concat(o,"-help"):void 0})]}),z&&!y&&(F.length>0||E&&_)&&t.jsxs("div",{className:"absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-[12px] shadow-lg backdrop-blur-sm bg-white/95 max-h-60 overflow-auto p-4",children:[F.length>0&&t.jsx("div",{className:"flex flex-wrap gap-2 mb-3",children:F.map((function(e){return t.jsx("button",{type:"button",onClick:function(){return function(e){J(e.value)}(e)},className:"inline-flex items-center rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-200 ".concat(I[d]," font-medium"),children:e.label},e.value)}))}),E&&_&&!w.some((function(e){return e.label.toLowerCase()===E.toLowerCase()}))&&t.jsxs(t.Fragment,{children:[F.length>0&&t.jsx("div",{className:"border-t border-gray-100 pt-3 mb-2",children:t.jsx("span",{className:"text-xs text-gray-500 font-medium",children:"CREATE NEW TAG"})}),t.jsx("div",{className:"flex flex-wrap gap-2",children:t.jsxs("button",{type:"button",onClick:function(){return J(E)},className:"inline-flex items-center rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200 ".concat(I[d]," font-medium border border-blue-200"),children:[t.jsx("svg",{className:"w-3 h-3 mr-1",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{fillRule:"evenodd",d:"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z",clipRule:"evenodd"})}),E]})})]}),0===F.length&&(!E||!_)&&t.jsx("div",{className:"text-center py-4 text-gray-500 text-sm",children:"No matching tags found"})]})]}),L&&t.jsxs("div",{className:"mt-1 text-xs text-gray-500",children:[o.length,"/",L," tags"]}),h&&!x&&t.jsx("p",{id:"".concat(o,"-help"),className:"mt-1 text-sm text-gray-500",children:h}),x&&t.jsx("p",{id:"".concat(o,"-error"),className:"mt-1 text-sm text-red-500",children:x})]})};exports.TagInputDemo=function(){var e=a.useState([]),r=e[0],n=e[1],s=a.useState([]),o=s[0],i=s[1];return t.jsxs("div",{className:"max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen",children:[t.jsx("h1",{className:"text-2xl font-bold mb-8 text-gray-900",children:"TagInput Component Demo"}),t.jsxs("div",{className:"space-y-8",children:[t.jsx(l,{id:"skills",label:"Skills & Technologies",value:r,onChange:n,predefinedTags:[{label:"React",value:"react"},{label:"JavaScript",value:"javascript"},{label:"TypeScript",value:"typescript"},{label:"Node.js",value:"nodejs"},{label:"Python",value:"python"},{label:"CSS",value:"css"},{label:"HTML",value:"html"},{label:"Vue.js",value:"vuejs"},{label:"Angular",value:"angular"},{label:"Next.js",value:"nextjs"}],placeholder:"Search or add skills...",helpText:"Select from predefined options or add your own custom tags",size:"md"}),t.jsx(l,{id:"custom-tags",label:"Project Categories (Custom Colors)",value:o,onChange:i,predefinedTags:[{label:"Web Development",value:"web"},{label:"Mobile App",value:"mobile"},{label:"AI/ML",value:"ai"},{label:"UI/UX Design",value:"design"}],placeholder:"Add project categories...",tagBackgroundColor:"bg-purple-500",tagTextColor:"text-white",maxTags:5,size:"lg",helpText:"Maximum 5 tags allowed with custom purple styling"}),t.jsxs("div",{className:"mt-8 p-4 bg-white rounded-lg border",children:[t.jsx("h3",{className:"font-medium mb-2",children:"Selected Skills:"}),t.jsx("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(r,null,2)})]}),t.jsxs("div",{className:"p-4 bg-white rounded-lg border",children:[t.jsx("h3",{className:"font-medium mb-2",children:"Selected Categories:"}),t.jsx("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(o,null,2)})]})]})]})},exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/tslib/tslib.es6.js"),a=require("react/jsx-runtime"),t=require("react"),r=function(r){var l=r.id,n=r.label,s=r.value,o=void 0===s?[]:s,i=r.size,d=void 0===i?"md":i,c=r.onChange,u=r.placeholder,g=void 0===u?"Type to search or add tags...":u,m=r.error,x=r.required,p=void 0!==x&&x,b=r.helpText,h=r.className,v=void 0===h?"":h,f=r.disabled,y=void 0!==f&&f,j=r.predefinedTags,w=void 0===j?[]:j,N=r.tagBackgroundColor,k=void 0===N?"bg-primary":N,C=r.tagTextColor,T=void 0===C?"text-white":C,L=r.maxTags,S=r.allowCustomTags,_=void 0===S||S;e.__rest(r,["id","label","value","size","onChange","placeholder","error","required","helpText","className","disabled","predefinedTags","tagBackgroundColor","tagTextColor","maxTags","allowCustomTags"]);var A=t.useState(""),E=A[0],M=A[1],R=t.useState(!1),z=R[0],B=R[1],D=t.useRef(null),q=t.useRef(null),I={sm:"text-xs px-2 py-0.5",md:"text-sm px-2 py-1",lg:"text-base px-3 py-1.5"},F=t.useMemo((function(){return E?w.filter((function(e){return e.label.toLowerCase().includes(E.toLowerCase())&&!o.some((function(a){return a===e.value}))})):w.filter((function(e){return!o.some((function(a){return a===e.value}))}))}),[E,w,o]);t.useEffect((function(){var e=function(e){q.current&&!q.current.contains(e.target)&&B(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[]);var J=function(a){if(a&&!(L&&o.length>=L)&&!o.find((function(e){return e.toLowerCase()===a.toLowerCase()}))){var t,r=w.find((function(e){return e.label.toLowerCase()===a.toLowerCase()||e.value.toLowerCase()===a.toLowerCase()}));if(r)t=r.value;else{if(!_)return;t=a}var l=e.__spreadArray(e.__spreadArray([],o,!0),[t],!1);null==c||c(l),M(""),B(!1)}},O=function(e){var a=o.filter((function(a){return a!==e}));null==c||c(a)};return a.jsxs("div",{className:"mb-4",children:[n&&a.jsxs("label",{htmlFor:l,className:"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300",children:[n,p&&a.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),a.jsxs("div",{className:"relative",ref:q,children:[a.jsxs("div",{className:"w-full rounded-[12px] border ".concat(m?"border-red-500":"border-gray-200 dark:border-gray-700"," ").concat(y?"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500":"bg-gray-100 text-dark dark:bg-gray-800 dark:text-gray-100"," focus-within:outline-none focus-within:ring-1 focus-within:ring-primary ").concat(v," ").concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[d]," flex flex-wrap items-center gap-1"),children:[o.map((function(e){return a.jsxs("span",{className:"inline-flex items-center rounded-full ".concat(k," ").concat(T," ").concat(I[d]," font-medium"),children:[e,!y&&a.jsx("button",{type:"button",onClick:function(){return O(e)},className:"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20",children:a.jsx("svg",{className:"h-3 w-3",fill:"currentColor",viewBox:"0 0 20 20",children:a.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]},e)})),a.jsx("input",{ref:D,id:l,type:"text",value:E,onChange:function(e){var a=e.target.value;M(a),B(!0)},onKeyDown:function(e){"Enter"===e.key&&E.trim()?(e.preventDefault(),J(E.trim())):"Backspace"===e.key&&!E&&o.length>0?O(o[o.length-1]):"Escape"===e.key&&(B(!1),M(""))},onFocus:function(){B(!0)},placeholder:0===o.length?g:"",disabled:y||L&&o.length>=L,className:"min-w-[120px] flex-1 border-none bg-transparent outline-none placeholder-gray-400 dark:placeholder-gray-500","aria-invalid":!!m,"aria-describedby":m?"".concat(o,"-error"):b?"".concat(o,"-help"):void 0})]}),z&&!y&&(F.length>0||E&&_)&&a.jsxs("div",{className:"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[12px] border border-gray-200 bg-white/95 p-4 shadow-lg backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/95",children:[F.length>0&&a.jsx("div",{className:"flex flex-wrap gap-2 mb-3",children:F.map((function(e){return a.jsx("button",{type:"button",onClick:function(){return function(e){J(e.value)}(e)},className:"inline-flex items-center rounded-full bg-gray-200 text-gray-700 transition-colors duration-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 ".concat(I[d]," font-medium"),children:e.label},e.value)}))}),E&&_&&!w.some((function(e){return e.label.toLowerCase()===E.toLowerCase()}))&&a.jsxs(a.Fragment,{children:[F.length>0&&a.jsx("div",{className:"mb-2 border-t border-gray-100 pt-3 dark:border-gray-700",children:a.jsx("span",{className:"text-xs font-medium text-gray-500 dark:text-gray-400",children:"CREATE NEW TAG"})}),a.jsx("div",{className:"flex flex-wrap gap-2",children:a.jsxs("button",{type:"button",onClick:function(){return J(E)},className:"inline-flex items-center rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200 ".concat(I[d]," font-medium border border-blue-200"),children:[a.jsx("svg",{className:"w-3 h-3 mr-1",fill:"currentColor",viewBox:"0 0 20 20",children:a.jsx("path",{fillRule:"evenodd",d:"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z",clipRule:"evenodd"})}),E]})})]}),0===F.length&&(!E||!_)&&a.jsx("div",{className:"py-4 text-center text-sm text-gray-500 dark:text-gray-400",children:"No matching tags found"})]})]}),L&&a.jsxs("div",{className:"mt-1 text-xs text-gray-500 dark:text-gray-400",children:[o.length,"/",L," tags"]}),b&&!m&&a.jsx("p",{id:"".concat(o,"-help"),className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:b}),m&&a.jsx("p",{id:"".concat(o,"-error"),className:"mt-1 text-sm text-red-500",children:m})]})};exports.TagInputDemo=function(){var e=t.useState([]),l=e[0],n=e[1],s=t.useState([]),o=s[0],i=s[1];return a.jsxs("div",{className:"max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen",children:[a.jsx("h1",{className:"text-2xl font-bold mb-8 text-gray-900",children:"TagInput Component Demo"}),a.jsxs("div",{className:"space-y-8",children:[a.jsx(r,{id:"skills",label:"Skills & Technologies",value:l,onChange:n,predefinedTags:[{label:"React",value:"react"},{label:"JavaScript",value:"javascript"},{label:"TypeScript",value:"typescript"},{label:"Node.js",value:"nodejs"},{label:"Python",value:"python"},{label:"CSS",value:"css"},{label:"HTML",value:"html"},{label:"Vue.js",value:"vuejs"},{label:"Angular",value:"angular"},{label:"Next.js",value:"nextjs"}],placeholder:"Search or add skills...",helpText:"Select from predefined options or add your own custom tags",size:"md"}),a.jsx(r,{id:"custom-tags",label:"Project Categories (Custom Colors)",value:o,onChange:i,predefinedTags:[{label:"Web Development",value:"web"},{label:"Mobile App",value:"mobile"},{label:"AI/ML",value:"ai"},{label:"UI/UX Design",value:"design"}],placeholder:"Add project categories...",tagBackgroundColor:"bg-purple-500",tagTextColor:"text-white",maxTags:5,size:"lg",helpText:"Maximum 5 tags allowed with custom purple styling"}),a.jsxs("div",{className:"mt-8 p-4 bg-white rounded-lg border",children:[a.jsx("h3",{className:"font-medium mb-2",children:"Selected Skills:"}),a.jsx("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(l,null,2)})]}),a.jsxs("div",{className:"p-4 bg-white rounded-lg border",children:[a.jsx("h3",{className:"font-medium mb-2",children:"Selected Categories:"}),a.jsx("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(o,null,2)})]})]})]})},exports.default=r;
 //# sourceMappingURL=TagInput.js.map

package/dist/cjs/components/Form/Input/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","sources":["../../../../../src/components/Form/Input/TagInput.tsx"],"sourcesContent":["import React, {useState, useRef, useEffect, useMemo} from \"react\";\n\nexport interface Tag {\n value: string;\n label: string;\n}\n\nexport interface TagInputProps {\n id?: string;\n label?: string;\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n error?: string;\n required?: boolean;\n helpText?: string;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n disabled?: boolean;\n predefinedTags?: Tag[];\n tagBackgroundColor?: string;\n tagTextColor?: string;\n maxTags?: number;\n allowCustomTags?: boolean;\n}\n\nconst TagInput: React.FC<TagInputProps> = ({\n id,\n label,\n value = [],\n size = \"md\",\n onChange,\n placeholder = \"Type to search or add tags...\",\n error,\n required = false,\n helpText,\n className = \"\",\n disabled = false,\n predefinedTags = [],\n tagBackgroundColor = \"bg-primary\",\n tagTextColor = \"text-white\",\n maxTags,\n allowCustomTags = true,\n ...restProps\n }) => {\n const [inputValue, setInputValue] = useState(\"\");\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n const sizeClasses = {\n sm: \"text-xs px-3 py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm px-4 py-2 text-base min-h-[40px]\",\n lg: \"text-base px-4 py-3 text-lg min-h-[48px]\",\n };\n\n const tagSizeClasses = {\n sm: \"text-xs px-2 py-0.5\",\n md: \"text-sm px-2 py-1\",\n lg: \"text-base px-3 py-1.5\",\n };\n\n const filteredTags = useMemo(() => {\n if (!inputValue) {\n return predefinedTags.filter(tag =>\n !value.some(selectedTag => selectedTag === tag.value)\n );\n }\n\n return predefinedTags.filter(tag =>\n tag.label.toLowerCase().includes(inputValue.toLowerCase()) &&\n !value.some(selectedTag => selectedTag === tag.value)\n );\n }, [inputValue, predefinedTags, value]);\n\n // Handle clicking outside to close dropdown\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsDropdownOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, []);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n setIsDropdownOpen(true);\n };\n\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\" && inputValue.trim()) {\n e.preventDefault();\n addTag(inputValue.trim());\n } else if (e.key === \"Backspace\" && !inputValue && value.length > 0) {\n // Remove last tag when backspace is pressed and input is empty\n removeTag(value[value.length - 1]);\n } else if (e.key === \"Escape\") {\n setIsDropdownOpen(false);\n setInputValue(\"\");\n }\n };\n\n const addTag = (tagValue: string) => {\n if (!tagValue \|\| (maxTags && value.length >= maxTags)) return;\n\n // Check if tag already exists\n const existingTag = value.find(tag => tag.toLowerCase() === tagValue.toLowerCase());\n if (existingTag) return;\n\n // Check if it's a predefined tag\n const predefinedTag = predefinedTags.find(tag =>\n tag.label.toLowerCase() === tagValue.toLowerCase() \|\|\n tag.value.toLowerCase() === tagValue.toLowerCase()\n );\n\n let newTag: string;\n if (predefinedTag) {\n newTag = predefinedTag.value;\n } else if (allowCustomTags) {\n newTag = tagValue;\n } else {\n return; // Don't add if custom tags aren't allowed\n }\n\n const newTags = [...value, newTag];\n onChange?.(newTags);\n setInputValue(\"\");\n setIsDropdownOpen(false);\n };\n\n const removeTag = (tagId: string) => {\n const newTags = value.filter(tag => tag !== tagId);\n onChange?.(newTags);\n };\n\n const selectPredefinedTag = (tag: Tag) => {\n addTag(tag.value);\n };\n\n const handleInputFocus = () => {\n setIsDropdownOpen(true);\n };\n\n return (\n <div className=\"mb-4\">\n {label && (\n <label htmlFor={id} className=\"mb-1 block text-sm font-medium text-gray-600\">\n {label}\n {required && <span className=\"ml-1 text-red-500\"></span>}\n </label>\n )}\n\n <div className=\"relative\" ref={dropdownRef}>\n <div\n className={`w-full rounded-[12px] border ${\n error ? \"border-red-500\" : \"border-gray-200\"\n } ${\n disabled\n ? \"bg-gray-100 text-gray-500\"\n : \"bg-gray-100 text-dark\"\n } focus-within:outline-none focus-within:ring-1 focus-within:ring-primary ${className} ${sizeClasses[size]} flex flex-wrap items-center gap-1`}\n >\n {/ Render selected tags /}\n {value.map((tag) => (\n <span\n key={tag}\n className={`inline-flex items-center rounded-full ${tagBackgroundColor} ${tagTextColor} ${tagSizeClasses[size]} font-medium`}\n >\n {tag}\n {!disabled && (\n <button\n type=\"button\"\n onClick={() => removeTag(tag)}\n className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20\"\n >\n <svg className=\"h-3 w-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </span>\n ))}\n\n {/ Input field /}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleInputKeyDown}\n onFocus={handleInputFocus}\n placeholder={value.length === 0 ? placeholder : \"\"}\n disabled={disabled \|\| (maxTags && value.length >= maxTags) as boolean}\n className=\"flex-1 border-none bg-transparent outline-none placeholder-gray-400 min-w-[120px]\"\n aria-invalid={!!error}\n aria-describedby={error ? `${value}-error` : helpText ? `${value}-help` : undefined}\n />\n </div>\n\n {/ Dropdown /}\n {isDropdownOpen && !disabled && (filteredTags.length > 0 \|\| (inputValue && allowCustomTags)) && (\n <div className=\"absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-[12px] shadow-lg backdrop-blur-sm bg-white/95 max-h-60 overflow-auto p-4\">\n {/ Predefined tags /}\n {filteredTags.length > 0 && (\n <div className=\"flex flex-wrap gap-2 mb-3\">\n {filteredTags.map((tag) => (\n <button\n key={tag.value}\n type=\"button\"\n onClick={() => selectPredefinedTag(tag)}\n className={`inline-flex items-center rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-200 ${tagSizeClasses[size]} font-medium`}\n >\n {tag.label}\n </button>\n ))}\n </div>\n )}\n\n {/ Custom tag option /}\n {inputValue && allowCustomTags && !predefinedTags.some(tag =>\n tag.label.toLowerCase() === inputValue.toLowerCase()\n ) && (\n <>\n {filteredTags.length > 0 && (\n <div className=\"border-t border-gray-100 pt-3 mb-2\">\n <span className=\"text-xs text-gray-500 font-medium\">CREATE NEW TAG</span>\n </div>\n )}\n <div className=\"flex flex-wrap gap-2\">\n <button\n type=\"button\"\n onClick={() => addTag(inputValue)}\n className={`inline-flex items-center rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200 ${tagSizeClasses[size]} font-medium border border-blue-200`}\n >\n <svg className=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clipRule=\"evenodd\" />\n </svg>\n {inputValue}\n </button>\n </div>\n </>\n )}\n\n {/ Empty state */}\n {filteredTags.length === 0 && (!inputValue \|\| !allowCustomTags) && (\n <div className=\"text-center py-4 text-gray-500 text-sm\">\n No matching tags found\n </div>\n )}\n </div>\n )}\n </div>\n\n {maxTags && (\n <div className=\"mt-1 text-xs text-gray-500\">\n {value.length}/{maxTags} tags\n </div>\n )}\n\n {helpText && !error && (\n <p id={`${value}-help`} className=\"mt-1 text-sm text-gray-500\">\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${value}-error`} className=\"mt-1 text-sm text-red-500\">\n {error}\n </p>\n )}\n </div>\n );\n};\n\n// Demo component to show usage\nexport const TagInputDemo = () => {\n const [selectedTags, setSelectedTags] = useState<string[]>([]);\n const [selectedTags2, setSelectedTags2] = useState<string[]>([]);\n\n const predefinedTags: Tag[] = [\n { label: \"React\", value: \"react\" },\n { label: \"JavaScript\", value: \"javascript\" },\n { label: \"TypeScript\", value: \"typescript\" },\n { label: \"Node.js\", value: \"nodejs\" },\n { label: \"Python\", value: \"python\" },\n { label: \"CSS\", value: \"css\" },\n { label: \"HTML\", value: \"html\" },\n { label: \"Vue.js\", value: \"vuejs\" },\n { label: \"Angular\", value: \"angular\" },\n { label: \"Next.js\", value: \"nextjs\" },\n ];\n\n return (\n <div className=\"max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen\">\n <h1 className=\"text-2xl font-bold mb-8 text-gray-900\">TagInput Component Demo</h1>\n\n <div className=\"space-y-8\">\n <TagInput\n id=\"skills\"\n label=\"Skills & Technologies\"\n value={selectedTags}\n onChange={setSelectedTags}\n predefinedTags={predefinedTags}\n placeholder=\"Search or add skills...\"\n helpText=\"Select from predefined options or add your own custom tags\"\n size=\"md\"\n />\n\n <TagInput\n id=\"custom-tags\"\n label=\"Project Categories (Custom Colors)\"\n value={selectedTags2}\n onChange={setSelectedTags2}\n predefinedTags={[\n { label: \"Web Development\", value: \"web\" },\n { label: \"Mobile App\", value: \"mobile\" },\n { label: \"AI/ML\", value: \"ai\" },\n { label: \"UI/UX Design\", value: \"design\" },\n ]}\n placeholder=\"Add project categories...\"\n tagBackgroundColor=\"bg-purple-500\"\n tagTextColor=\"text-white\"\n maxTags={5}\n size=\"lg\"\n helpText=\"Maximum 5 tags allowed with custom purple styling\"\n />\n\n <div className=\"mt-8 p-4 bg-white rounded-lg border\">\n <h3 className=\"font-medium mb-2\">Selected Skills:</h3>\n <pre className=\"text-sm bg-gray-100 p-2 rounded\">\n {JSON.stringify(selectedTags, null, 2)}\n </pre>\n </div>\n\n <div className=\"p-4 bg-white rounded-lg border\">\n <h3 className=\"font-medium mb-2\">Selected Categories:</h3>\n <pre className=\"text-sm bg-gray-100 p-2 rounded\">\n {JSON.stringify(selectedTags2, null, 2)}\n </pre>\n </div>\n </div>\n </div>\n );\n};\n\nexport default TagInput;"],"names":["TagInput","_a","id","label","_b","value","_c","size","onChange","_d","placeholder","error","_e","required","helpText","_f","className","_g","disabled","_h","predefinedTags","_j","tagBackgroundColor","_k","tagTextColor","maxTags","_l","allowCustomTags","__rest","_m","useState","inputValue","setInputValue","_o","isDropdownOpen","setIsDropdownOpen","inputRef","useRef","dropdownRef","tagSizeClasses","sm","md","lg","filteredTags","useMemo","filter","tag","toLowerCase","includes","some","selectedTag","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","addTag","tagValue","length","find","newTag","predefinedTag","newTags","__spreadArray","removeTag","tagId","_jsxs","htmlFor","children","_jsx","ref","concat","map","type","onClick","fill","viewBox","fillRule","d","clipRule","e","newValue","onKeyDown","key","trim","preventDefault","onFocus","undefined","selectPredefinedTag","_Fragment","selectedTags","setSelectedTags","selectedTags2","setSelectedTags2","JSON","stringify"],"mappings":"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"}
1	+ {"version":3,"file":"TagInput.js","sources":["../../../../../src/components/Form/Input/TagInput.tsx"],"sourcesContent":["import React, {useState, useRef, useEffect, useMemo} from \"react\";\n\nexport interface Tag {\n value: string;\n label: string;\n}\n\nexport interface TagInputProps {\n id?: string;\n label?: string;\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n error?: string;\n required?: boolean;\n helpText?: string;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n disabled?: boolean;\n predefinedTags?: Tag[];\n tagBackgroundColor?: string;\n tagTextColor?: string;\n maxTags?: number;\n allowCustomTags?: boolean;\n}\n\nconst TagInput: React.FC<TagInputProps> = ({\n id,\n label,\n value = [],\n size = \"md\",\n onChange,\n placeholder = \"Type to search or add tags...\",\n error,\n required = false,\n helpText,\n className = \"\",\n disabled = false,\n predefinedTags = [],\n tagBackgroundColor = \"bg-primary\",\n tagTextColor = \"text-white\",\n maxTags,\n allowCustomTags = true,\n ...restProps\n }) => {\n const [inputValue, setInputValue] = useState(\"\");\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n\n const sizeClasses = {\n sm: \"text-xs px-3 py-1.5 text-sm min-h-[32px]\",\n md: \"text-sm px-4 py-2 text-base min-h-[40px]\",\n lg: \"text-base px-4 py-3 text-lg min-h-[48px]\",\n };\n\n const tagSizeClasses = {\n sm: \"text-xs px-2 py-0.5\",\n md: \"text-sm px-2 py-1\",\n lg: \"text-base px-3 py-1.5\",\n };\n\n const filteredTags = useMemo(() => {\n if (!inputValue) {\n return predefinedTags.filter(tag =>\n !value.some(selectedTag => selectedTag === tag.value)\n );\n }\n\n return predefinedTags.filter(tag =>\n tag.label.toLowerCase().includes(inputValue.toLowerCase()) &&\n !value.some(selectedTag => selectedTag === tag.value)\n );\n }, [inputValue, predefinedTags, value]);\n\n // Handle clicking outside to close dropdown\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsDropdownOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, []);\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n setIsDropdownOpen(true);\n };\n\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\" && inputValue.trim()) {\n e.preventDefault();\n addTag(inputValue.trim());\n } else if (e.key === \"Backspace\" && !inputValue && value.length > 0) {\n // Remove last tag when backspace is pressed and input is empty\n removeTag(value[value.length - 1]);\n } else if (e.key === \"Escape\") {\n setIsDropdownOpen(false);\n setInputValue(\"\");\n }\n };\n\n const addTag = (tagValue: string) => {\n if (!tagValue \|\| (maxTags && value.length >= maxTags)) return;\n\n // Check if tag already exists\n const existingTag = value.find(tag => tag.toLowerCase() === tagValue.toLowerCase());\n if (existingTag) return;\n\n // Check if it's a predefined tag\n const predefinedTag = predefinedTags.find(tag =>\n tag.label.toLowerCase() === tagValue.toLowerCase() \|\|\n tag.value.toLowerCase() === tagValue.toLowerCase()\n );\n\n let newTag: string;\n if (predefinedTag) {\n newTag = predefinedTag.value;\n } else if (allowCustomTags) {\n newTag = tagValue;\n } else {\n return; // Don't add if custom tags aren't allowed\n }\n\n const newTags = [...value, newTag];\n onChange?.(newTags);\n setInputValue(\"\");\n setIsDropdownOpen(false);\n };\n\n const removeTag = (tagId: string) => {\n const newTags = value.filter(tag => tag !== tagId);\n onChange?.(newTags);\n };\n\n const selectPredefinedTag = (tag: Tag) => {\n addTag(tag.value);\n };\n\n const handleInputFocus = () => {\n setIsDropdownOpen(true);\n };\n\n return (\n <div className=\"mb-4\">\n {label && (\n <label htmlFor={id} className=\"mb-1 block text-sm font-medium text-gray-600 dark:text-gray-300\">\n {label}\n {required && <span className=\"ml-1 text-red-500\"></span>}\n </label>\n )}\n\n <div className=\"relative\" ref={dropdownRef}>\n <div\n className={`w-full rounded-[12px] border ${\n error ? \"border-red-500\" : \"border-gray-200 dark:border-gray-700\"\n } ${\n disabled\n ? \"bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500\"\n : \"bg-gray-100 text-dark dark:bg-gray-800 dark:text-gray-100\"\n } focus-within:outline-none focus-within:ring-1 focus-within:ring-primary ${className} ${sizeClasses[size]} flex flex-wrap items-center gap-1`}\n >\n {/ Render selected tags /}\n {value.map((tag) => (\n <span\n key={tag}\n className={`inline-flex items-center rounded-full ${tagBackgroundColor} ${tagTextColor} ${tagSizeClasses[size]} font-medium`}\n >\n {tag}\n {!disabled && (\n <button\n type=\"button\"\n onClick={() => removeTag(tag)}\n className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20\"\n >\n <svg className=\"h-3 w-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </button>\n )}\n </span>\n ))}\n\n {/ Input field /}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleInputKeyDown}\n onFocus={handleInputFocus}\n placeholder={value.length === 0 ? placeholder : \"\"}\n disabled={disabled \|\| (maxTags && value.length >= maxTags) as boolean}\n className=\"min-w-[120px] flex-1 border-none bg-transparent outline-none placeholder-gray-400 dark:placeholder-gray-500\"\n aria-invalid={!!error}\n aria-describedby={error ? `${value}-error` : helpText ? `${value}-help` : undefined}\n />\n </div>\n\n {/ Dropdown /}\n {isDropdownOpen && !disabled && (filteredTags.length > 0 \|\| (inputValue && allowCustomTags)) && (\n <div className=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[12px] border border-gray-200 bg-white/95 p-4 shadow-lg backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/95\">\n {/ Predefined tags /}\n {filteredTags.length > 0 && (\n <div className=\"flex flex-wrap gap-2 mb-3\">\n {filteredTags.map((tag) => (\n <button\n key={tag.value}\n type=\"button\"\n onClick={() => selectPredefinedTag(tag)}\n className={`inline-flex items-center rounded-full bg-gray-200 text-gray-700 transition-colors duration-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 ${tagSizeClasses[size]} font-medium`}\n >\n {tag.label}\n </button>\n ))}\n </div>\n )}\n\n {/ Custom tag option /}\n {inputValue && allowCustomTags && !predefinedTags.some(tag =>\n tag.label.toLowerCase() === inputValue.toLowerCase()\n ) && (\n <>\n {filteredTags.length > 0 && (\n <div className=\"mb-2 border-t border-gray-100 pt-3 dark:border-gray-700\">\n <span className=\"text-xs font-medium text-gray-500 dark:text-gray-400\">CREATE NEW TAG</span>\n </div>\n )}\n <div className=\"flex flex-wrap gap-2\">\n <button\n type=\"button\"\n onClick={() => addTag(inputValue)}\n className={`inline-flex items-center rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200 ${tagSizeClasses[size]} font-medium border border-blue-200`}\n >\n <svg className=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fillRule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clipRule=\"evenodd\" />\n </svg>\n {inputValue}\n </button>\n </div>\n </>\n )}\n\n {/ Empty state */}\n {filteredTags.length === 0 && (!inputValue \|\| !allowCustomTags) && (\n <div className=\"py-4 text-center text-sm text-gray-500 dark:text-gray-400\">\n No matching tags found\n </div>\n )}\n </div>\n )}\n </div>\n\n {maxTags && (\n <div className=\"mt-1 text-xs text-gray-500 dark:text-gray-400\">\n {value.length}/{maxTags} tags\n </div>\n )}\n\n {helpText && !error && (\n <p id={`${value}-help`} className=\"mt-1 text-sm text-gray-500 dark:text-gray-400\">\n {helpText}\n </p>\n )}\n\n {error && (\n <p id={`${value}-error`} className=\"mt-1 text-sm text-red-500\">\n {error}\n </p>\n )}\n </div>\n );\n};\n\n// Demo component to show usage\nexport const TagInputDemo = () => {\n const [selectedTags, setSelectedTags] = useState<string[]>([]);\n const [selectedTags2, setSelectedTags2] = useState<string[]>([]);\n\n const predefinedTags: Tag[] = [\n { label: \"React\", value: \"react\" },\n { label: \"JavaScript\", value: \"javascript\" },\n { label: \"TypeScript\", value: \"typescript\" },\n { label: \"Node.js\", value: \"nodejs\" },\n { label: \"Python\", value: \"python\" },\n { label: \"CSS\", value: \"css\" },\n { label: \"HTML\", value: \"html\" },\n { label: \"Vue.js\", value: \"vuejs\" },\n { label: \"Angular\", value: \"angular\" },\n { label: \"Next.js\", value: \"nextjs\" },\n ];\n\n return (\n <div className=\"max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen\">\n <h1 className=\"text-2xl font-bold mb-8 text-gray-900\">TagInput Component Demo</h1>\n\n <div className=\"space-y-8\">\n <TagInput\n id=\"skills\"\n label=\"Skills & Technologies\"\n value={selectedTags}\n onChange={setSelectedTags}\n predefinedTags={predefinedTags}\n placeholder=\"Search or add skills...\"\n helpText=\"Select from predefined options or add your own custom tags\"\n size=\"md\"\n />\n\n <TagInput\n id=\"custom-tags\"\n label=\"Project Categories (Custom Colors)\"\n value={selectedTags2}\n onChange={setSelectedTags2}\n predefinedTags={[\n { label: \"Web Development\", value: \"web\" },\n { label: \"Mobile App\", value: \"mobile\" },\n { label: \"AI/ML\", value: \"ai\" },\n { label: \"UI/UX Design\", value: \"design\" },\n ]}\n placeholder=\"Add project categories...\"\n tagBackgroundColor=\"bg-purple-500\"\n tagTextColor=\"text-white\"\n maxTags={5}\n size=\"lg\"\n helpText=\"Maximum 5 tags allowed with custom purple styling\"\n />\n\n <div className=\"mt-8 p-4 bg-white rounded-lg border\">\n <h3 className=\"font-medium mb-2\">Selected Skills:</h3>\n <pre className=\"text-sm bg-gray-100 p-2 rounded\">\n {JSON.stringify(selectedTags, null, 2)}\n </pre>\n </div>\n\n <div className=\"p-4 bg-white rounded-lg border\">\n <h3 className=\"font-medium mb-2\">Selected Categories:</h3>\n <pre className=\"text-sm bg-gray-100 p-2 rounded\">\n {JSON.stringify(selectedTags2, null, 2)}\n </pre>\n </div>\n </div>\n </div>\n );\n};\n\nexport default TagInput;\n"],"names":["TagInput","_a","id","label","_b","value","_c","size","onChange","_d","placeholder","error","_e","required","helpText","_f","className","_g","disabled","_h","predefinedTags","_j","tagBackgroundColor","_k","tagTextColor","maxTags","_l","allowCustomTags","__rest","_m","useState","inputValue","setInputValue","_o","isDropdownOpen","setIsDropdownOpen","inputRef","useRef","dropdownRef","tagSizeClasses","sm","md","lg","filteredTags","useMemo","filter","tag","toLowerCase","includes","some","selectedTag","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","addTag","tagValue","length","find","newTag","predefinedTag","newTags","__spreadArray","removeTag","tagId","_jsxs","htmlFor","children","_jsx","ref","concat","map","type","onClick","fill","viewBox","fillRule","d","clipRule","e","newValue","onKeyDown","key","trim","preventDefault","onFocus","undefined","selectPredefinedTag","_Fragment","selectedTags","setSelectedTags","selectedTags2","setSelectedTags2","JSON","stringify"],"mappings":"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"}

package/dist/cjs/components/Form/Search/Search.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");module.exports=function(t){var a=t.placeholder,s=void 0===a?"Search...":a,l=t.onSearch,o=t.className,n=void 0===o?"":o,c=r.useState(""),i=c[0],u=c[1];return e.jsxs("div",{className:"relative ".concat(n),children:[e.jsx("input",{type:"text",value:i,onChange:function(e){e.preventDefault(),u(e.target.value),l(i)},placeholder:s,className:"w-full rounded-lg border border-gray-200 bg-white py-2 pl-8 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary"}),e.jsxs("svg",{className:"absolute left-2 top-1/2 -translate-y-1/2 transform text-gray-400",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");module.exports=function(t){var a=t.placeholder,l=void 0===a?"Search...":a,o=t.onSearch,s=t.className,c=void 0===s?"":s,n=r.useState(""),i=n[0],d=n[1];return e.jsxs("div",{className:"relative ".concat(c),children:[e.jsx("input",{type:"text",value:i,onChange:function(e){e.preventDefault(),d(e.target.value),o(i)},placeholder:l,className:"w-full rounded-lg border border-gray-200 bg-white py-2 pl-8 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"}),e.jsxs("svg",{className:"absolute left-2 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]})]})};
 //# sourceMappingURL=Search.js.map

package/dist/cjs/components/Form/Search/Search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search.js","sources":["../../../../../src/components/Form/Search/Search.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\n\nexport interface SearchProps {\n placeholder?: string;\n onSearch: (query: string) => void;\n className?: string;\n disabled?: boolean;\n}\n\nexport default function Search({\n placeholder = \"Search...\",\n onSearch,\n className = \"\",\n}: SearchProps) {\n const [query, setQuery] = useState(\"\");\n\n function handleSearch(e: ChangeEvent<HTMLInputElement>) {\n e.preventDefault();\n setQuery(e.target.value);\n onSearch(query);\n }\n\n return (\n <div className={`relative ${className}`}>\n <input\n type='text'\n value={query}\n onChange={handleSearch}\n placeholder={placeholder}\n className='w-full rounded-lg border border-gray-200 bg-white py-2 pl-8 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary'\n />\n <svg\n className='absolute left-2 top-1/2 -translate-y-1/2 transform text-gray-400'\n width='16'\n height='16'\n viewBox='0 0 24 24'\n fill='none'\n stroke='currentColor'\n strokeWidth='2'\n >\n <circle cx='11' cy='11' r='8' />\n <line x1='21' y1='21' x2='16.65' y2='16.65' />\n </svg>\n </div>\n );\n}\n"],"names":["_a","_b","placeholder","onSearch","_c","className","_d","useState","query","setQuery","_jsxs","_jsx","type","value","onChange","e","preventDefault","target","width","height","viewBox","fill","stroke","strokeWidth","cx","cy","r","x1","y1","x2","y2"],"mappings":"kFASc,SAAiBA,GAC3B,IAAAC,EAAAD,EAAAE,YAAAA,OAAW,IAAAD,EAAG,cACdE,EAAQH,EAAAG,SACRC,EAAAJ,EAAAK,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EAERE,EAAoBC,EAAAA,SAAS,IAA5BC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAQtB,OACII,EAAAA,YAAKL,UAAW,mBAAYA,aACxBM,EAAAA,IAAA,QAAA,CACIC,KAAK,OACLC,MAAOL,EACPM,SAXZ,SAAsBC,GAClBA,EAAEC,iBACFP,EAASM,EAAEE,OAAOJ,OAClBV,EAASK,EACb,EAQYN,YAAaA,EACbG,UAAU,~~gIAEdK~~,EAAAA,KAAA,MAAA,CACIL,UAAU,~~mEACVa~~,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,cAEZZ,EAAAA,IAAA,SAAA,CAAQa,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bf,EAAAA,YAAMgB,GAAG,KAAKC,GAAG,KAAKC,GAAG,QAAQC,GAAG,eAIpD"}
1	+ {"version":3,"file":"Search.js","sources":["../../../../../src/components/Form/Search/Search.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\n\nexport interface SearchProps {\n placeholder?: string;\n onSearch: (query: string) => void;\n className?: string;\n disabled?: boolean;\n}\n\nexport default function Search({\n placeholder = \"Search...\",\n onSearch,\n className = \"\",\n}: SearchProps) {\n const [query, setQuery] = useState(\"\");\n\n function handleSearch(e: ChangeEvent<HTMLInputElement>) {\n e.preventDefault();\n setQuery(e.target.value);\n onSearch(query);\n }\n\n return (\n <div className={`relative ${className}`}>\n <input\n type='text'\n value={query}\n onChange={handleSearch}\n placeholder={placeholder}\n className='w-full rounded-lg border border-gray-200 bg-white py-2 pl-8 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500'\n />\n <svg\n className='absolute left-2 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500'\n width='16'\n height='16'\n viewBox='0 0 24 24'\n fill='none'\n stroke='currentColor'\n strokeWidth='2'\n >\n <circle cx='11' cy='11' r='8' />\n <line x1='21' y1='21' x2='16.65' y2='16.65' />\n </svg>\n </div>\n );\n}\n"],"names":["_a","_b","placeholder","onSearch","_c","className","_d","useState","query","setQuery","_jsxs","_jsx","type","value","onChange","e","preventDefault","target","width","height","viewBox","fill","stroke","strokeWidth","cx","cy","r","x1","y1","x2","y2"],"mappings":"kFASc,SAAiBA,GAC3B,IAAAC,EAAAD,EAAAE,YAAAA,OAAW,IAAAD,EAAG,cACdE,EAAQH,EAAAG,SACRC,EAAAJ,EAAAK,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EAERE,EAAoBC,EAAAA,SAAS,IAA5BC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAQtB,OACII,EAAAA,YAAKL,UAAW,mBAAYA,aACxBM,EAAAA,IAAA,QAAA,CACIC,KAAK,OACLC,MAAOL,EACPM,SAXZ,SAAsBC,GAClBA,EAAEC,iBACFP,EAASM,EAAEE,OAAOJ,OAClBV,EAASK,EACb,EAQYN,YAAaA,EACbG,UAAU,mNAEdK,EAAAA,KAAA,MAAA,CACIL,UAAU,sFACVa,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,cAEZZ,EAAAA,IAAA,SAAA,CAAQa,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bf,EAAAA,YAAMgB,GAAG,KAAKC,GAAG,KAAKC,GAAG,QAAQC,GAAG,eAIpD"}

package/dist/cjs/components/Form/Select/Select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),r=require("react"),n=require("lucide-react");module.exports=function(a){var l,i=a.options,s=a.placeholder,o=void 0===s?"Select an option":s,u=a.onChange,c=a.value,d=a.size,m=void 0===d?"md":d,f=a.className,x=void 0===f?"":f,v=a.name,p=a.id,h=a.disabled,g=void 0!==h&&h,y=a.label,b=a.required,j=a.error,N=a.helpText,w=a.fullWidth,A=void 0===w||w,C=a.searchable,S=void 0!==C&&C,_=a.onSearch,k=a.isSearching,L=void 0!==k&&k,E=a.searchDebounceMs,R=void 0===E?300:E,q=a.multiple,z=void 0!==q&&q,F=a.maxSelected,B=a.showSelectedCount,T=void 0!==B&&B,D=a.closeOnSelect,M=a.showSelectAll,H=void 0===M||M,I=r.useState(!1),O=I[0],P=I[1],W=r.useState(""),X=W[0],G=W[1],J=r.useState("bottom"),K=J[0],Q=J[1],U=void 0!==D?D:!z,V=r.useState((function(){if(!c)return[];if(z&&Array.isArray(c))return c.map((function(e){return i.find((function(t){return t.value==e}))})).filter(Boolean);if(!z){var e=i.find((function(e){return e.value==c}));return e?[e]:[]}return[]})),Y=V[0],Z=V[1],$=r.useRef(null),ee=r.useRef(null),te=r.useRef(null);r.useEffect((function(){if(z&&Array.isArray(c))Z(c.map((function(e){return i.find((function(t){return t.value==e}))})).filter(Boolean));else if(z)""!==c&&null!==c&&null!=c||Z([]);else{var e=i.find((function(e){return e.value==c}));Z(e?[e]:[])}}),[c,i,z]),r.useEffect((function(){if(O&&$.current){var e=$.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,r=e.top;Q(t<250&&r>250?"top":"bottom")}}),[O]),r.useEffect((function(){if(_&&X)return te.current&&clearTimeout(te.current),te.current=setTimeout((function(){_(X)}),R),function(){te.current&&clearTimeout(te.current)}}),[X,_,R]);var re=S&&!_?i.filter((function(e){return(e.label||e.value).toLowerCase().includes(X.toLowerCase())})):i;r.useEffect((function(){var e=function(e){$.current&&!$.current.contains(e.target)&&(P(!1),G(""))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]);var ne="top"===K?"bottom-full mb-1":"top-full mt-1";return t.jsxs("div",{ref:$,className:"".concat(A?"w-full":"w-fit"," mb-4"),children:[y&&t.jsxs("label",{htmlFor:p,className:"mb-1 block text-sm font-medium text-gray-700",children:[y,b&&t.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),t.jsxs("div",{className:"relative",children:[t.jsxs("button",{type:"button",className:"flex items-center justify-between rounded-lg border ".concat(j?"border-red-500":"border-gray-200"," bg-gray-100 shadow-sm ").concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[m]," text-gray-700 hover:border-gray-300 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 ").concat(g?"cursor-not-allowed bg-gray-50 opacity-50":""," ").concat(x," ").concat(A?"w-full":""," transition-all duration-200"),onClick:function(){return!g&&P(!O)},disabled:g,id:p,"aria-haspopup":"listbox","aria-expanded":O,children:[t.jsx("div",{className:"flex-1 flex items-center gap-1 min-w-0",children:z&&Y.length>0?t.jsxs("div",{className:"flex flex-wrap gap-1 flex-1",children:[Y.slice(0,3).map((function(e){return t.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 text-primary-800 text-sm rounded-md",children:[t.jsx("span",{className:"truncate max-w-[120px]",children:e.label||e.value}),t.jsx(n.X,{className:"h-3 w-3 cursor-pointer hover:text-primary-900",onClick:function(t){return function(e,t){t.stopPropagation();var r=Y.filter((function(t){return t.value!==e.value}));Z(r);var n=z?r.map((function(e){return e.value})):"";u({target:{id:p||"",value:n}})}(e,t)}})]},e.value)})),Y.length>3&&t.jsxs("span",{className:"text-sm text-gray-500 px-1",children:["+",Y.length-3," more"]})]}):t.jsx("span",{className:"truncate ".concat(0===Y.length?"text-gray-400":"text-gray-700"),children:function(){var e,t,r,n;return 0===Y.length?o:z?T&&Y.length>2?"".concat(Y.length," items selected"):Y.length<=2?Y.map((function(e){return e.label||e.value})).join(", "):"".concat((null===(r=Y[0])||void 0===r?void 0:r.label)||(null===(n=Y[0])||void 0===n?void 0:n.value)," +").concat(Y.length-1," more"):(null===(e=Y[0])||void 0===e?void 0:e.label)||(null===(t=Y[0])||void 0===t?void 0:t.value)}()})}),t.jsx(n.ChevronDown,{className:"ml-2 h-4 w-4 text-gray-400 transition-transform flex-shrink-0 ".concat(O?"rotate-180 transform":"")})]}),O&&t.jsxs("div",{ref:ee,className:"absolute z-[9999] w-full rounded-lg border border-gray-200 bg-white shadow-xl ".concat(ne),role:"listbox",style:{zIndex:9999,position:"absolute"},children:[S&&t.jsx("div",{className:"sticky top-0 border-b border-gray-100 bg-white p-3 z-[10000]",children:t.jsxs("div",{className:"relative",children:[t.jsx("input",{type:"text",className:"w-full rounded-md border border-gray-200 px-3 py-2 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 transition-all duration-200",placeholder:_?"Search...":"Filter...",value:X,onChange:function(e){return G(e.target.value)},autoFocus:!0}),L&&t.jsx(n.Loader2,{className:"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400"})]})}),t.jsx("div",{className:"max-h-60 overflow-auto py-1",children:L?t.jsxs("div",{className:"px-3 py-8 text-center",children:[t.jsx(n.Loader2,{className:"h-6 w-6 animate-spin text-primary-500 mx-auto mb-2"}),t.jsx("p",{className:"text-sm text-gray-500",children:"Searching..."})]}):re.length>0?t.jsxs(t.Fragment,{children:[z&&H&&t.jsxs("div",{className:"border-b border-gray-100",children:[t.jsxs("div",{className:"px-3 py-2 flex items-center justify-between",children:[t.jsx("button",{type:"button",onClick:function(){if(z){var t,r=re.filter((function(e){return!e.disabled}));if(r.every((function(e){return Y.some((function(t){return t.value===e.value}))})))t=Y.filter((function(e){return!r.some((function(t){return t.value===e.value}))}));else{var n=r.filter((function(e){return!Y.some((function(t){return t.value===e.value}))}));if(void 0!==F){var a=F-Y.length;t=e.__spreadArray(e.__spreadArray([],Y,!0),n.slice(0,a),!0)}else t=e.__spreadArray(e.__spreadArray([],Y,!0),n,!0)}Z(t);var l=t.map((function(e){return e.value}));u({target:{id:p||"",value:l}})}},className:"text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors",children:function(){if(!z||0===re.length)return!1;var e=re.filter((function(e){return!e.disabled}));return e.length>0&&e.every((function(e){return Y.some((function(t){return t.value===e.value}))}))}()?"Deselect All":"Select All"}),Y.length>0&&t.jsx("button",{type:"button",onClick:function(){z&&(Z([]),u({target:{id:p||"",value:[]}}))},className:"text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors",children:"Clear All"})]}),Y.length>0&&t.jsxs("div",{className:"px-3 pb-2 text-xs text-gray-500",children:[Y.length," selected",F&&" of ".concat(F," max")]})]}),re.map((function(r){var n=function(e){return Y.some((function(t){return t.value===e.value}))}(r),a=r.disabled||void 0!==F&&!n&&Y.length>=F;return t.jsxs("div",{className:"cursor-pointer px-3 py-2 flex items-center justify-between transition-colors duration-150 ".concat(n?"bg-primary-50 text-primary-700":"text-gray-700 hover:bg-gray-50"," ").concat(a?"cursor-not-allowed text-gray-400 hover:bg-white opacity-50":""),onClick:function(){return!a&&function(t){var r;if(!t.disabled){var n;if(z)if(Y.some((function(e){return e.value===t.value})))n=Y.filter((function(e){return e.value!==t.value}));else{if(F&&Y.length>=F)return;n=e.__spreadArray(e.__spreadArray([],Y,!0),[t],!1)}else n=[t];Z(n);var a=z?n.map((function(e){return e.value})):(null===(r=n[0])||void 0===r?void 0:r.value)||"";u({target:{id:p||"",value:a}}),U&&(P(!1),G(""))}}(r)},role:"option","aria-selected":n,"aria-disabled":a,children:[t.jsx("span",{className:"flex-1 text-sm font-medium",children:r.label||r.value}),z&&n&&t.jsx("div",{className:"w-4 h-4 bg-primary-500 rounded-sm flex items-center justify-center",children:t.jsx("svg",{className:"w-3 h-3 text-white",fill:"currentColor",viewBox:"0 0 20 20",children:t.jsx("path",{fillRule:"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",clipRule:"evenodd"})})})]},r.value)}))]}):t.jsx("div",{className:"px-3 py-8 text-center",children:t.jsx("p",{className:"text-sm text-gray-500",children:X?"No results found":"No options available"})})})]})]}),j&&t.jsx("p",{className:"mt-1 text-sm text-red-600",children:j}),N&&!j&&t.jsx("p",{className:"mt-1 text-sm text-gray-500",children:N}),v&&t.jsx(t.Fragment,{children:z?Y.map((function(e,r){return t.jsx("input",{type:"hidden",name:"".concat(v,"[]"),value:e.value},"".concat(e.value,"-").concat(r))})):t.jsx("input",{type:"hidden",name:v,value:(null===(l=Y[0])||void 0===l?void 0:l.value)||""})})]})};
+"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),a=require("lucide-react");module.exports=function(n){var l,i=n.options,o=n.placeholder,s=void 0===o?"Select an option":o,u=n.onChange,c=n.value,d=n.size,m=void 0===d?"md":d,x=n.className,f=void 0===x?"":x,v=n.name,g=n.id,p=n.disabled,y=void 0!==p&&p,h=n.label,b=n.required,j=n.error,k=n.helpText,N=n.fullWidth,w=void 0===N||N,A=n.searchable,C=void 0!==A&&A,S=n.onSearch,_=n.isSearching,L=void 0!==_&&_,E=n.searchDebounceMs,R=void 0===E?300:E,q=n.multiple,z=void 0!==q&&q,F=n.maxSelected,B=n.showSelectedCount,T=void 0!==B&&B,D=n.closeOnSelect,M=n.showSelectAll,H=void 0===M||M,I=t.useState(!1),O=I[0],P=I[1],W=t.useState(""),X=W[0],G=W[1],J=t.useState("bottom"),K=J[0],Q=J[1],U=void 0!==D?D:!z,V=t.useState((function(){if(!c)return[];if(z&&Array.isArray(c))return c.map((function(e){return i.find((function(r){return r.value==e}))})).filter(Boolean);if(!z){var e=i.find((function(e){return e.value==c}));return e?[e]:[]}return[]})),Y=V[0],Z=V[1],$=t.useRef(null),ee=t.useRef(null),re=t.useRef(null);t.useEffect((function(){if(z&&Array.isArray(c))Z(c.map((function(e){return i.find((function(r){return r.value==e}))})).filter(Boolean));else if(z)""!==c&&null!==c&&null!=c||Z([]);else{var e=i.find((function(e){return e.value==c}));Z(e?[e]:[])}}),[c,i,z]),t.useEffect((function(){if(O&&$.current){var e=$.current.getBoundingClientRect(),r=window.innerHeight-e.bottom,t=e.top;Q(r<250&&t>250?"top":"bottom")}}),[O]),t.useEffect((function(){if(S&&X)return re.current&&clearTimeout(re.current),re.current=setTimeout((function(){S(X)}),R),function(){re.current&&clearTimeout(re.current)}}),[X,S,R]);var te=C&&!S?i.filter((function(e){return(e.label||e.value).toLowerCase().includes(X.toLowerCase())})):i;t.useEffect((function(){var e=function(e){$.current&&!$.current.contains(e.target)&&(P(!1),G(""))};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}),[]);var ae="top"===K?"bottom-full mb-1":"top-full mt-1";return r.jsxs("div",{ref:$,className:"".concat(w?"w-full":"w-fit"," mb-4"),children:[h&&r.jsxs("label",{htmlFor:g,className:"mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300",children:[h,b&&r.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),r.jsxs("div",{className:"relative",children:[r.jsxs("button",{type:"button",className:"flex items-center justify-between rounded-lg border ".concat(j?"border-red-500":"border-gray-200 dark:border-gray-700"," bg-gray-100 shadow-sm dark:bg-gray-800 ").concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[m]," text-gray-700 hover:border-gray-300 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:text-gray-200 dark:hover:border-gray-600 ").concat(y?"cursor-not-allowed bg-gray-50 opacity-50 dark:bg-gray-700":""," ").concat(f," ").concat(w?"w-full":""," transition-all duration-200"),onClick:function(){return!y&&P(!O)},disabled:y,id:g,"aria-haspopup":"listbox","aria-expanded":O,children:[r.jsx("div",{className:"flex-1 flex items-center gap-1 min-w-0",children:z&&Y.length>0?r.jsxs("div",{className:"flex flex-wrap gap-1 flex-1",children:[Y.slice(0,3).map((function(e){return r.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 text-primary-800 text-sm rounded-md",children:[r.jsx("span",{className:"truncate max-w-[120px]",children:e.label||e.value}),r.jsx(a.X,{className:"h-3 w-3 cursor-pointer hover:text-primary-900",onClick:function(r){return function(e,r){r.stopPropagation();var t=Y.filter((function(r){return r.value!==e.value}));Z(t);var a=z?t.map((function(e){return e.value})):"";u({target:{id:g||"",value:a}})}(e,r)}})]},e.value)})),Y.length>3&&r.jsxs("span",{className:"px-1 text-sm text-gray-500 dark:text-gray-400",children:["+",Y.length-3," more"]})]}):r.jsx("span",{className:"truncate ".concat(0===Y.length?"text-gray-400 dark:text-gray-500":"text-gray-700 dark:text-gray-200"),children:function(){var e,r,t,a;return 0===Y.length?s:z?T&&Y.length>2?"".concat(Y.length," items selected"):Y.length<=2?Y.map((function(e){return e.label||e.value})).join(", "):"".concat((null===(t=Y[0])||void 0===t?void 0:t.label)||(null===(a=Y[0])||void 0===a?void 0:a.value)," +").concat(Y.length-1," more"):(null===(e=Y[0])||void 0===e?void 0:e.label)||(null===(r=Y[0])||void 0===r?void 0:r.value)}()})}),r.jsx(a.ChevronDown,{className:"ml-2 h-4 w-4 flex-shrink-0 text-gray-400 transition-transform dark:text-gray-500 ".concat(O?"rotate-180 transform":"")})]}),O&&r.jsxs("div",{ref:ee,className:"absolute z-[9999] w-full rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800 ".concat(ae),role:"listbox",style:{zIndex:9999,position:"absolute"},children:[C&&r.jsx("div",{className:"sticky top-0 z-[10000] border-b border-gray-100 bg-white p-3 dark:border-gray-700 dark:bg-gray-800",children:r.jsxs("div",{className:"relative",children:[r.jsx("input",{type:"text",className:"w-full rounded-md border border-gray-200 bg-white px-3 py-2 pr-8 text-sm transition-all duration-200 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500",placeholder:S?"Search...":"Filter...",value:X,onChange:function(e){return G(e.target.value)},autoFocus:!0}),L&&r.jsx(a.Loader2,{className:"absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-gray-400 dark:text-gray-500"})]})}),r.jsx("div",{className:"max-h-60 overflow-auto py-1",children:L?r.jsxs("div",{className:"px-3 py-8 text-center",children:[r.jsx(a.Loader2,{className:"h-6 w-6 animate-spin text-primary-500 mx-auto mb-2"}),r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Searching..."})]}):te.length>0?r.jsxs(r.Fragment,{children:[z&&H&&r.jsxs("div",{className:"border-b border-gray-100 dark:border-gray-700",children:[r.jsxs("div",{className:"px-3 py-2 flex items-center justify-between",children:[r.jsx("button",{type:"button",onClick:function(){if(z){var r,t=te.filter((function(e){return!e.disabled}));if(t.every((function(e){return Y.some((function(r){return r.value===e.value}))})))r=Y.filter((function(e){return!t.some((function(r){return r.value===e.value}))}));else{var a=t.filter((function(e){return!Y.some((function(r){return r.value===e.value}))}));if(void 0!==F){var n=F-Y.length;r=e.__spreadArray(e.__spreadArray([],Y,!0),a.slice(0,n),!0)}else r=e.__spreadArray(e.__spreadArray([],Y,!0),a,!0)}Z(r);var l=r.map((function(e){return e.value}));u({target:{id:g||"",value:l}})}},className:"text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors",children:function(){if(!z||0===te.length)return!1;var e=te.filter((function(e){return!e.disabled}));return e.length>0&&e.every((function(e){return Y.some((function(r){return r.value===e.value}))}))}()?"Deselect All":"Select All"}),Y.length>0&&r.jsx("button",{type:"button",onClick:function(){z&&(Z([]),u({target:{id:g||"",value:[]}}))},className:"text-sm font-medium text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",children:"Clear All"})]}),Y.length>0&&r.jsxs("div",{className:"px-3 pb-2 text-xs text-gray-500 dark:text-gray-400",children:[Y.length," selected",F&&" of ".concat(F," max")]})]}),te.map((function(t){var a=function(e){return Y.some((function(r){return r.value===e.value}))}(t),n=t.disabled||void 0!==F&&!a&&Y.length>=F;return r.jsxs("div",{className:"cursor-pointer px-3 py-2 flex items-center justify-between transition-colors duration-150 ".concat(a?"bg-primary-50 text-primary-700":"text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700"," ").concat(n?"cursor-not-allowed text-gray-400 opacity-50 hover:bg-white dark:text-gray-500 dark:hover:bg-gray-800":""),onClick:function(){return!n&&function(r){var t;if(!r.disabled){var a;if(z)if(Y.some((function(e){return e.value===r.value})))a=Y.filter((function(e){return e.value!==r.value}));else{if(F&&Y.length>=F)return;a=e.__spreadArray(e.__spreadArray([],Y,!0),[r],!1)}else a=[r];Z(a);var n=z?a.map((function(e){return e.value})):(null===(t=a[0])||void 0===t?void 0:t.value)||"";u({target:{id:g||"",value:n}}),U&&(P(!1),G(""))}}(t)},role:"option","aria-selected":a,"aria-disabled":n,children:[r.jsx("span",{className:"flex-1 text-sm font-medium",children:t.label||t.value}),z&&a&&r.jsx("div",{className:"w-4 h-4 bg-primary-500 rounded-sm flex items-center justify-center",children:r.jsx("svg",{className:"w-3 h-3 text-white",fill:"currentColor",viewBox:"0 0 20 20",children:r.jsx("path",{fillRule:"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",clipRule:"evenodd"})})})]},t.value)}))]}):r.jsx("div",{className:"px-3 py-8 text-center",children:r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:X?"No results found":"No options available"})})})]})]}),j&&r.jsx("p",{className:"mt-1 text-sm text-red-600",children:j}),k&&!j&&r.jsx("p",{className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:k}),v&&r.jsx(r.Fragment,{children:z?Y.map((function(e,t){return r.jsx("input",{type:"hidden",name:"".concat(v,"[]"),value:e.value},"".concat(e.value,"-").concat(t))})):r.jsx("input",{type:"hidden",name:v,value:(null===(l=Y[0])||void 0===l?void 0:l.value)||""})})]})};
 //# sourceMappingURL=Select.js.map