pillardash-ui-react 0.1.131 → 0.1.138

package/dist/esm/components/Form/Input/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","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":["Input","_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":"mIAuBA,IAAMA,EAA8B,SAACC,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,EAAAxB,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,EAAA,MAAA,CAAKjB,UAAW,QAAAY,OAAQL,GAAS,UAAUW,SAAA,CACtC/B,GAAS8B,EAAA,QAAA,CAAOE,QAASjC,EAAIc,UAAU,yDACnCb,EACAQ,GAAYyB,UAAMpB,UAAU,oBAAmBkB,SAAA,SAGpDD,EAAA,MAAA,CAAKjB,UAAU,qBACVG,GAAyB,SAAjBE,GACLe,EAAA,MAAA,CAAKpB,UAAU,uEAAsEkB,SAChFf,IAGA,YAARL,EACGsB,EAAA,WAAAC,EAAA,CAAA,EACQX,GACJY,KAAM,EACNtB,UAAW,GAAAY,OAAGF,EAAYV,UAAS,iBAC9BQ,IAGTY,EAAA,QAAAC,EAAA,CAAA,EACQX,EAAW,CACfZ,KAAMA,GACDU,IAIZL,GAAyB,UAAjBE,GACLe,EAAA,MAAA,CAAKpB,UAAU,wEAAuEkB,SACjFf,IAGRG,GACGc,EAAA,MAAA,CAAKpB,UAAU,oEACVM,OAKZV,IAAaH,GACV2B,EAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,SAASc,UAAU,6BAA4BkB,SACtDtB,IAIRH,GACG2B,EAAA,IAAA,CAAGlC,GAAI,GAAA0B,OAAG1B,EAAE,UAAUc,UAAU,4BAA2BkB,SACtDzB,MAKrB"}

package/dist/esm/components/Form/Input/InputWithPrefix.mjs

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

package/dist/esm/components/Form/Input/InputWithPrefix.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputWithPrefix.mjs","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":["InputWithPrefix","_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":"sKA4BA,IAAMA,EAAkD,SAACC,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,EAAA7B,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,EAAA,MAAA,CAAKxB,UAAU,OAAMyB,SAAA,CAChBtC,GACGqC,WAAOE,QAASxC,EAAIc,UAAU,+CAA8CyB,SAAA,CACvEtC,EACAQ,GAAYgC,EAAA,OAAA,CAAM3B,UAAU,sCAIrC2B,EAAA,MAAA,CAAK3B,UAAU,WAAUyB,SACrBD,SAAKxB,UAAU,OAAMyB,SAAA,CAEhBlB,GACGoB,EAAA,MAAA,CAAK3B,UAAWoB,EAAaK,SACxBlB,IAKTiB,SAAKxB,UAAW,mBAAYO,EAAgB,SAAW,UAAUkB,SAAA,CAC5DtB,GAAyB,SAAjBE,GACLsB,EAAA,MAAA,CAAK3B,UAAU,4EAA2EyB,SACrFtB,IAITwB,EAAA,QAAAC,EAAA,CAAA,EACQP,GACJvB,KAAMA,EACNE,UAAW,GAAAgB,OAAGK,EAAiBrB,sBAAcO,EAA8C,qBAA9B,8BACxDM,IAGRV,GAAyB,UAAjBE,GACLsB,EAAA,MAAA,CAAK3B,UAAU,sFACVG,IAIRG,GACGqB,EAAA,MAAA,CAAK3B,UAAU,yEACVM,YAOpBV,IAAaH,GACVkC,OAAGzC,GAAI,UAAGA,EAAE,SAASc,UAAU,6BAA4ByB,SACtD7B,IAIRH,GACGkC,OAAGzC,GAAI,UAAGA,EAAE,UAAUc,UAAU,4BAA2ByB,SACtDhC,MAKrB"}

package/dist/esm/components/Form/Input/TagInput.mjs

@@ -0,0 +1,2 @@
+import{__rest as e,__spreadArray as t}from"../../../node_modules/tslib/tslib.es6.mjs";import{jsxs as l,jsx as a,Fragment as r}from"react/jsx-runtime";import{useState as n,useRef as o,useMemo as i,useEffect as s}from"react";var c=function(c){var d=c.id,u=c.label,m=c.value,g=void 0===m?[]:m,p=c.size,h=void 0===p?"md":p,b=c.onChange,v=c.placeholder,f=void 0===v?"Type to search or add tags...":v,x=c.error,y=c.required,w=void 0!==y&&y,N=c.helpText,C=c.className,T=void 0===C?"":C,k=c.disabled,L=void 0!==k&&k,j=c.predefinedTags,S=void 0===j?[]:j,z=c.tagBackgroundColor,E=void 0===z?"bg-primary":z,A=c.tagTextColor,B=void 0===A?"text-white":A,M=c.maxTags,R=c.allowCustomTags,D=void 0===R||R;e(c,["id","label","value","size","onChange","placeholder","error","required","helpText","className","disabled","predefinedTags","tagBackgroundColor","tagTextColor","maxTags","allowCustomTags"]);var I=n(""),J=I[0],q=I[1],F=n(!1),H=F[0],O=F[1],P=o(null),U=o(null),V={sm:"text-xs px-2 py-0.5",md:"text-sm px-2 py-1",lg:"text-base px-3 py-1.5"},W=i((function(){return J?S.filter((function(e){return e.label.toLowerCase().includes(J.toLowerCase())&&!g.some((function(t){return t===e.value}))})):S.filter((function(e){return!g.some((function(t){return t===e.value}))}))}),[J,S,g]);s((function(){var e=function(e){U.current&&!U.current.contains(e.target)&&O(!1)};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[]);var G=function(e){if(e&&!(M&&g.length>=M)&&!g.find((function(t){return t.toLowerCase()===e.toLowerCase()}))){var l,a=S.find((function(t){return t.label.toLowerCase()===e.toLowerCase()||t.value.toLowerCase()===e.toLowerCase()}));if(a)l=a.value;else{if(!D)return;l=e}var r=t(t([],g,!0),[l],!1);null==b||b(r),q(""),O(!1)}},K=function(e){var t=g.filter((function(t){return t!==e}));null==b||b(t)};return l("div",{className:"mb-4",children:[u&&l("label",{htmlFor:d,className:"mb-1 block text-sm font-medium text-gray-600",children:[u,w&&a("span",{className:"ml-1 text-red-500",children:"*"})]}),l("div",{className:"relative",ref:U,children:[l("div",{className:"w-full rounded-[12px] border ".concat(x?"border-red-500":"border-gray-200"," ").concat(L?"bg-gray-100 text-gray-500":"bg-gray-100 text-dark"," focus-within:outline-none focus-within:ring-1 focus-within:ring-primary ").concat(T," ").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]"}[h]," flex flex-wrap items-center gap-1"),children:[g.map((function(e){return l("span",{className:"inline-flex items-center rounded-full ".concat(E," ").concat(B," ").concat(V[h]," font-medium"),children:[e,!L&&a("button",{type:"button",onClick:function(){return K(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("svg",{className:"h-3 w-3",fill:"currentColor",viewBox:"0 0 20 20",children:a("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("input",{ref:P,id:d,type:"text",value:J,onChange:function(e){var t=e.target.value;q(t),O(!0)},onKeyDown:function(e){"Enter"===e.key&&J.trim()?(e.preventDefault(),G(J.trim())):"Backspace"===e.key&&!J&&g.length>0?K(g[g.length-1]):"Escape"===e.key&&(O(!1),q(""))},onFocus:function(){O(!0)},placeholder:0===g.length?f:"",disabled:L||M&&g.length>=M,className:"flex-1 border-none bg-transparent outline-none placeholder-gray-400 min-w-[120px]","aria-invalid":!!x,"aria-describedby":x?"".concat(g,"-error"):N?"".concat(g,"-help"):void 0})]}),H&&!L&&(W.length>0||J&&D)&&l("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:[W.length>0&&a("div",{className:"flex flex-wrap gap-2 mb-3",children:W.map((function(e){return a("button",{type:"button",onClick:function(){return function(e){G(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(V[h]," font-medium"),children:e.label},e.value)}))}),J&&D&&!S.some((function(e){return e.label.toLowerCase()===J.toLowerCase()}))&&l(r,{children:[W.length>0&&a("div",{className:"border-t border-gray-100 pt-3 mb-2",children:a("span",{className:"text-xs text-gray-500 font-medium",children:"CREATE NEW TAG"})}),a("div",{className:"flex flex-wrap gap-2",children:l("button",{type:"button",onClick:function(){return G(J)},className:"inline-flex items-center rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors duration-200 ".concat(V[h]," font-medium border border-blue-200"),children:[a("svg",{className:"w-3 h-3 mr-1",fill:"currentColor",viewBox:"0 0 20 20",children:a("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"})}),J]})})]}),0===W.length&&(!J||!D)&&a("div",{className:"text-center py-4 text-gray-500 text-sm",children:"No matching tags found"})]})]}),M&&l("div",{className:"mt-1 text-xs text-gray-500",children:[g.length,"/",M," tags"]}),N&&!x&&a("p",{id:"".concat(g,"-help"),className:"mt-1 text-sm text-gray-500",children:N}),x&&a("p",{id:"".concat(g,"-error"),className:"mt-1 text-sm text-red-500",children:x})]})},d=function(){var e=n([]),t=e[0],r=e[1],o=n([]),i=o[0],s=o[1];return l("div",{className:"max-w-2xl mx-auto p-6 bg-gray-50 min-h-screen",children:[a("h1",{className:"text-2xl font-bold mb-8 text-gray-900",children:"TagInput Component Demo"}),l("div",{className:"space-y-8",children:[a(c,{id:"skills",label:"Skills & Technologies",value:t,onChange:r,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(c,{id:"custom-tags",label:"Project Categories (Custom Colors)",value:i,onChange:s,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"}),l("div",{className:"mt-8 p-4 bg-white rounded-lg border",children:[a("h3",{className:"font-medium mb-2",children:"Selected Skills:"}),a("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(t,null,2)})]}),l("div",{className:"p-4 bg-white rounded-lg border",children:[a("h3",{className:"font-medium mb-2",children:"Selected Categories:"}),a("pre",{className:"text-sm bg-gray-100 p-2 rounded",children:JSON.stringify(i,null,2)})]})]})]})};export{d as TagInputDemo,c as default};
+//# sourceMappingURL=TagInput.mjs.map

package/dist/esm/components/Form/Input/TagInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.mjs","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","TagInputDemo","selectedTags","setSelectedTags","selectedTags2","setSelectedTags2","JSON","stringify"],"mappings":"+NA0BA,IAAMA,EAAoC,SAACC,GACI,IAAAC,EAAED,EAAAC,GACFC,EAAKF,EAAAE,MACLC,UAAAC,aAAQ,GAAED,EACVE,EAAAL,EAAAM,KAAAA,OAAI,IAAAD,EAAG,OACPE,aACAC,EAAAR,EAAAS,YAAAA,OAAW,IAAAD,EAAG,gCAA+BA,EAC7CE,EAAKV,EAAAU,MACLC,aAAAC,cAAgBD,EAChBE,EAAQb,EAAAa,SACRC,EAAAd,EAAAe,UAAAA,OAAS,IAAAD,EAAG,KACZE,EAAAhB,EAAAiB,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,mBAAAC,aAAiB,GAAED,EACnBE,EAAApB,EAAAqB,mBAAAA,OAAkB,IAAAD,EAAG,eACrBE,EAAAtB,EAAAuB,aAAAA,OAAY,IAAAD,EAAG,aAAYA,EAC3BE,EAAOxB,EAAAwB,QACPC,oBAAAC,cAAsBD,EACVE,EAAA3B,EAjBhB,8LAmBjC,IAAA4B,EAA8BC,EAAS,IAAtCC,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAC1BI,EAAsCH,GAAS,GAA9CI,EAAcD,EAAA,GAAEE,EAAiBF,EAAA,GAClCG,EAAWC,EAAyB,MACpCC,EAAcD,EAAuB,MAQrCE,EAAiB,CACnBC,GAAI,sBACJC,GAAI,oBACJC,GAAI,yBAGFC,EAAeC,GAAQ,WACzB,OAAKb,EAMEX,EAAeyB,QAAO,SAAAC,GACzB,OAAAA,EAAI3C,MAAM4C,cAAcC,SAASjB,EAAWgB,iBAC3C1C,EAAM4C,MAAK,SAAAC,GAAe,OAAAA,IAAgBJ,EAAIzC,KAApB,GAD3B,IANOe,EAAeyB,QAAO,SAAAC,GACzB,OAACzC,EAAM4C,MAAK,SAAAC,GAAe,OAAAA,IAAgBJ,EAAIzC,KAApB,GAA3B,GAQZ,GAAG,CAAC0B,EAAYX,EAAgBf,IAGhC8C,GAAU,WACN,IAAMC,EAAqB,SAACC,GACpBf,EAAYgB,UAAYhB,EAAYgB,QAAQC,SAASF,EAAMG,SAC3DrB,GAAkB,EAE1B,EAGA,OADAsB,SAASC,iBAAiB,YAAaN,GAChC,WAAM,OAAAK,SAASE,oBAAoB,YAAaP,EAA1C,CACjB,GAAG,IAEH,IAmBMQ,EAAS,SAACC,GACZ,GAAKA,KAAapC,GAAWpB,EAAMyD,QAAUrC,KAGzBpB,EAAM0D,MAAK,SAAAjB,GAAO,OAAAA,EAAIC,gBAAkBc,EAASd,aAA/B,IACtC,CAGA,IAKIiB,EALEC,EAAgB7C,EAAe2C,MAAK,SAAAjB,GACtC,OAAAA,EAAI3C,MAAM4C,gBAAkBc,EAASd,eACrCD,EAAIzC,MAAM0C,gBAAkBc,EAASd,aADrC,IAKJ,GAAIkB,EACAD,EAASC,EAAc5D,UACpB,KAAIsB,EAGP,OAFAqC,EAASH,CAGb,CAEA,IAAMK,EAAOC,EAAAA,EAAA,GAAO9D,GAAK,GAAA,CAAE2D,OAC3BxD,SAAAA,EAAW0D,GACXlC,EAAc,IACdG,GAAkB,EApBD,CAqBrB,EAEMiC,EAAY,SAACC,GACf,IAAMH,EAAU7D,EAAMwC,QAAO,SAAAC,GAAO,OAAAA,IAAQuB,CAAR,IACpC7D,SAAAA,EAAW0D,EACf,EAUA,OACII,EAAA,MAAA,CAAKtD,UAAU,iBACVb,GACGmE,EAAA,QAAA,CAAOC,QAASrE,EAAIc,UAAU,+CAA8CwD,SAAA,CACvErE,EACAU,GAAY4D,EAAA,OAAA,CAAMzD,UAAU,sCAIrCsD,EAAA,MAAA,CAAKtD,UAAU,WAAW0D,IAAKpC,EAAWkC,SAAA,CACtCF,EAAA,MAAA,CACItD,UAAW,gCAAA2D,OACPhE,EAAQ,iBAAmB,kBAAiB,KAAAgE,OAE5CzD,EACM,4BACA,wBAAuB,6EAAAyD,OAC2C3D,cAlHxE,CAChBwB,GAAI,2CACJC,GAAI,2CACJC,GAAI,4CA+G6GnC,GAAK,sCAAoCiE,SAAA,CAG7InE,EAAMuE,KAAI,SAAC9B,GAAQ,OAChBwB,EAAA,OAAA,CAEItD,UAAW,yCAAA2D,OAAyCrD,EAAkB,KAAAqD,OAAInD,EAAY,KAAAmD,OAAIpC,EAAehC,GAAK,gBAAciE,SAAA,CAE3H1B,GACC5B,GACEuD,YACII,KAAK,SACLC,QAAS,WAAM,OAAAV,EAAUtB,EAAV,EACf9B,UAAU,uGAAsGwD,SAEhHC,EAAA,MAAA,CAAKzD,UAAU,UAAU+D,KAAK,eAAeC,QAAQ,YAAWR,SAC5DC,EAAA,OAAA,CACIQ,SAAS,UACTC,EAAE,qMACFC,SAAS,kBAdpBrC,EAFO,IAyBpB2B,EAAA,QAAA,CACIC,IAAKtC,EACLlC,GAAIA,EACJ2E,KAAK,OACLxE,MAAO0B,EACPvB,SA9GM,SAAC4E,GACvB,IAAMC,EAAWD,EAAE5B,OAAOnD,MAC1B2B,EAAcqD,GACdlD,GAAkB,EACtB,EA2GoBmD,UAzGO,SAACF,GACV,UAAVA,EAAEG,KAAmBxD,EAAWyD,QAChCJ,EAAEK,iBACF7B,EAAO7B,EAAWyD,SACD,cAAVJ,EAAEG,MAAwBxD,GAAc1B,EAAMyD,OAAS,EAE9DM,EAAU/D,EAAMA,EAAMyD,OAAS,IACd,WAAVsB,EAAEG,MACTpD,GAAkB,GAClBH,EAAc,IAEtB,EA+FoB0D,QAxDK,WACrBvD,GAAkB,EACtB,EAuDoBzB,YAA8B,IAAjBL,EAAMyD,OAAepD,EAAc,GAChDQ,SAAUA,GAAaO,GAAWpB,EAAMyD,QAAUrC,EAClDT,UAAU,oFAAmF,iBAC7EL,EAAK,mBACHA,EAAQ,GAAAgE,OAAGtE,EAAK,UAAWS,EAAW,GAAA6D,OAAGtE,EAAK,cAAUsF,OAKjFzD,IAAmBhB,IAAayB,EAAamB,OAAS,GAAM/B,GAAcJ,IACvE2C,EAAA,MAAA,CAAKtD,UAAU,6IAA4IwD,SAAA,CAEtJ7B,EAAamB,OAAS,GACnBW,SAAKzD,UAAU,4BAA2BwD,SACrC7B,EAAaiC,KAAI,SAAC9B,GAAQ,OACvB2B,EAAA,SAAA,CAEII,KAAK,SACLC,QAAS,WAAM,OA/EvB,SAAChC,GACzBc,EAAOd,EAAIzC,MACf,CA6EmDuF,CAAoB9C,EAApB,EACf9B,UAAW,oHAAA2D,OAAoHpC,EAAehC,GAAK,gBAAciE,SAEhK1B,EAAI3C,OALA2C,EAAIzC,MAFU,MAclC0B,GAAcJ,IAAoBP,EAAe6B,MAAK,SAAAH,GACnD,OAAAA,EAAI3C,MAAM4C,gBAAkBhB,EAAWgB,aAAvC,KAEAuB,EAAAuB,EAAA,CAAArB,SAAA,CACK7B,EAAamB,OAAS,GACnBW,EAAA,MAAA,CAAKzD,UAAU,qCAAoCwD,SAC/CC,UAAMzD,UAAU,oCAAmCwD,SAAA,qBAG3DC,SAAKzD,UAAU,uBAAsBwD,SACjCF,EAAA,SAAA,CACIO,KAAK,SACLC,QAAS,WAAM,OAAAlB,EAAO7B,EAAP,EACff,UAAW,oHAAA2D,OAAoHpC,EAAehC,GAAK,iDAEnJkE,EAAA,MAAA,CAAKzD,UAAU,eAAe+D,KAAK,eAAeC,QAAQ,YAAWR,SACjEC,UAAMQ,SAAS,UAAUC,EAAE,wFAAwFC,SAAS,cAE/HpD,UAOQ,IAAxBY,EAAamB,UAAkB/B,IAAeJ,IAC3C8C,EAAA,MAAA,CAAKzD,UAAU,mFAQ9BS,GACG6C,EAAA,MAAA,CAAKtD,UAAU,6BAA4BwD,SAAA,CACtCnE,EAAMyD,WAASrC,EAAO,WAI9BX,IAAaH,GACV8D,OAAGvE,GAAI,GAAAyE,OAAGtE,WAAcW,UAAU,6BAA4BwD,SACzD1D,IAIRH,GACG8D,EAAA,IAAA,CAAGvE,GAAI,GAAAyE,OAAGtE,EAAK,UAAUW,UAAU,4BAA2BwD,SACzD7D,MAKrB,EAGamF,EAAe,WAClB,IAAA7F,EAAkC6B,EAAmB,IAApDiE,EAAY9F,EAAA,GAAE+F,EAAe/F,EAAA,GAC9BG,EAAoC0B,EAAmB,IAAtDmE,EAAa7F,EAAA,GAAE8F,EAAgB9F,EAAA,GAetC,OACIkE,EAAA,MAAA,CAAKtD,UAAU,gDAA+CwD,SAAA,CAC1DC,EAAA,KAAA,CAAIzD,UAAU,wCAAuCwD,SAAA,4BAErDF,EAAA,MAAA,CAAKtD,UAAU,YAAWwD,SAAA,CACtBC,EAACzE,EAAQ,CACLE,GAAG,SACHC,MAAM,wBACNE,MAAO0F,EACPvF,SAAUwF,EACV5E,eAvBc,CAC1B,CAAGjB,MAAO,QAASE,MAAO,SAC1B,CAAGF,MAAO,aAAcE,MAAO,cAC/B,CAAGF,MAAO,aAAcE,MAAO,cAC/B,CAAGF,MAAO,UAAWE,MAAO,UAC5B,CAAGF,MAAO,SAAUE,MAAO,UAC3B,CAAGF,MAAO,MAAOE,MAAO,OACxB,CAAGF,MAAO,OAAQE,MAAO,QACzB,CAAGF,MAAO,SAAUE,MAAO,SAC3B,CAAGF,MAAO,UAAWE,MAAO,WAC5B,CAAEF,MAAO,UAAWE,MAAO,WAcfK,YAAY,0BACZI,SAAS,6DACTP,KAAK,OAGTkE,EAACzE,EAAQ,CACLE,GAAG,cACHC,MAAM,qCACNE,MAAO4F,EACPzF,SAAU0F,EACV9E,eAAgB,CACZ,CAAEjB,MAAO,kBAAmBE,MAAO,OACnC,CAAEF,MAAO,aAAcE,MAAO,UAC9B,CAAEF,MAAO,QAASE,MAAO,MACzB,CAAEF,MAAO,eAAgBE,MAAO,WAEpCK,YAAY,4BACZY,mBAAmB,gBACnBE,aAAa,aACbC,QAAS,EACTlB,KAAK,KACLO,SAAS,sDAGbwD,SAAKtD,UAAU,sCAAqCwD,SAAA,CAChDC,EAAA,KAAA,CAAIzD,UAAU,mBAAkBwD,SAAA,qBAChCC,SAAKzD,UAAU,kCAAiCwD,SAC3C2B,KAAKC,UAAUL,EAAc,KAAM,QAI5CzB,EAAA,MAAA,CAAKtD,UAAU,2CACXyD,EAAA,KAAA,CAAIzD,UAAU,mBAAkBwD,SAAA,yBAChCC,EAAA,MAAA,CAAKzD,UAAU,2CACVmF,KAAKC,UAAUH,EAAe,KAAM,aAM7D"}

package/dist/esm/components/Form/Search/Search.mjs

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t}from"react";function a(a){var o=a.placeholder,l=void 0===o?"Search...":o,n=a.onSearch,c=a.className,i=void 0===c?"":c,s=t(""),u=s[0],d=s[1];return e("div",{className:"relative ".concat(i),children:[r("input",{type:"text",value:u,onChange:function(e){e.preventDefault(),d(e.target.value),n(u)},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"}),e("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:[r("circle",{cx:"11",cy:"11",r:"8"}),r("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]})]})}export{a as default};
+//# sourceMappingURL=Search.mjs.map

package/dist/esm/components/Form/Search/Search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.mjs","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":["Search","_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":"mFASc,SAAUA,EAAOC,GAC3B,IAAAC,EAAAD,EAAAE,YAAAA,OAAW,IAAAD,EAAG,cACdE,EAAQH,EAAAG,SACRC,EAAAJ,EAAAK,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EAERE,EAAoBC,EAAS,IAA5BC,EAAKF,EAAA,GAAEG,EAAQH,EAAA,GAQtB,OACII,SAAKL,UAAW,mBAAYA,aACxBM,EAAA,QAAA,CACIC,KAAK,OACLC,MAAOL,EACPM,SAXZ,SAAsBC,GAClBA,EAAEC,iBACFP,EAASM,EAAEE,OAAOJ,OAClBV,EAASK,EACb,EAQYN,YAAaA,EACbG,UAAU,gIAEdK,EAAA,MAAA,CACIL,UAAU,mEACVa,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,OAAO,eACPC,YAAY,cAEZZ,EAAA,SAAA,CAAQa,GAAG,KAAKC,GAAG,KAAKC,EAAE,MAC1Bf,UAAMgB,GAAG,KAAKC,GAAG,KAAKC,GAAG,QAAQC,GAAG,eAIpD"}

package/dist/esm/components/Form/Select/Select.mjs

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

package/dist/esm/components/Form/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../../../src/components/Form/Select/Select.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { ChevronDown, X, Loader2 } from \"lucide-react\";\n\nexport interface SelectOption {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = {\n  options: SelectOption[];\n  placeholder?: string;\n  onChange: (value: React.ChangeEvent<HTMLSelectElement>) => void;\n  value?: string | string[];\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  name?: string;\n  id?: string;\n  disabled?: boolean;\n  label?: string;\n  required?: boolean;\n  error?: string;\n  helpText?: string;\n  fullWidth?: boolean;\n  searchable?: boolean;\n\n  // NEW: Backend search props\n  onSearch?: (searchTerm: string) => void | Promise<void>;\n  isSearching?: boolean;\n  searchDebounceMs?: number;\n\n  multiple?: boolean;\n  maxSelected?: number;\n  showSelectedCount?: boolean;\n  closeOnSelect?: boolean;\n  showSelectAll?: boolean;\n};\n\nexport default function Select({\n  options,\n  placeholder = \"Select an option\",\n  onChange,\n  value,\n  size = \"md\",\n  className = \"\",\n  name,\n  id,\n  disabled = false,\n  label,\n  required,\n  error,\n  helpText,\n  fullWidth = true,\n  searchable = false,\n  onSearch,\n  isSearching = false,\n  searchDebounceMs = 300,\n  multiple = false,\n  maxSelected,\n  showSelectedCount = false,\n  closeOnSelect,\n  showSelectAll = true,\n}: SelectProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const [dropdownPosition, setDropdownPosition] = useState<\"bottom\" | \"top\">(\n    \"bottom\",\n  );\n\n  const shouldCloseOnSelect =\n    closeOnSelect !== undefined ? closeOnSelect : !multiple;\n\n  const [selectedOptions, setSelectedOptions] = useState<SelectOption[]>(() => {\n    if (!value) return [];\n\n    if (multiple && Array.isArray(value)) {\n      return value\n        .map((val) => options.find((option) => option.value == val))\n        .filter(Boolean) as SelectOption[];\n    } else if (!multiple) {\n      const option = options.find((option) => option.value == value);\n      return option ? [option] : [];\n    }\n    return [];\n  });\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (multiple && Array.isArray(value)) {\n      setSelectedOptions(\n        value\n          .map((val) => options.find((option) => option.value == val))\n          .filter(Boolean) as SelectOption[],\n      );\n    } else if (!multiple) {\n      const option = options.find((option) => option.value == value);\n      setSelectedOptions(option ? [option] : []);\n    } else if (value === \"\" || value === null || value == undefined) {\n      setSelectedOptions([]);\n    }\n  }, [value, options, multiple]);\n\n  useEffect(() => {\n    if (isOpen && selectRef.current) {\n      const selectRect = selectRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const dropdownHeight = 250;\n      const spaceBelow = viewportHeight - selectRect.bottom;\n      const spaceAbove = selectRect.top;\n\n      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {\n        setDropdownPosition(\"top\");\n      } else {\n        setDropdownPosition(\"bottom\");\n      }\n    }\n  }, [isOpen]);\n\n  // Handle search with debouncing\n  useEffect(() => {\n    if (!onSearch || !searchTerm) return;\n\n    if (searchTimeoutRef.current) {\n      clearTimeout(searchTimeoutRef.current);\n    }\n\n    searchTimeoutRef.current = setTimeout(() => {\n      onSearch(searchTerm);\n    }, searchDebounceMs);\n\n    return () => {\n      if (searchTimeoutRef.current) {\n        clearTimeout(searchTimeoutRef.current);\n      }\n    };\n  }, [searchTerm, onSearch, searchDebounceMs]);\n\n  // Filter options based on search term if using client-side search\n  const filteredOptions =\n    searchable && !onSearch\n      ? options.filter((option) =>\n          (option.label || option.value)\n            .toLowerCase()\n            .includes(searchTerm.toLowerCase()),\n        )\n      : options;\n\n  const handleSelect = (option: SelectOption) => {\n    if (option.disabled) return;\n\n    let newSelectedOptions: SelectOption[];\n\n    if (multiple) {\n      const isAlreadySelected = selectedOptions.some(\n        (selected) => selected.value === option.value,\n      );\n\n      if (isAlreadySelected) {\n        newSelectedOptions = selectedOptions.filter(\n          (selected) => selected.value !== option.value,\n        );\n      } else {\n        if (maxSelected && selectedOptions.length >= maxSelected) {\n          return;\n        }\n        newSelectedOptions = [...selectedOptions, option];\n      }\n    } else {\n      newSelectedOptions = [option];\n    }\n\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = multiple\n      ? newSelectedOptions.map((opt) => opt.value)\n      : newSelectedOptions[0]?.value || \"\";\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as React.ChangeEvent<HTMLSelectElement>);\n\n    if (shouldCloseOnSelect) {\n      setIsOpen(false);\n      setSearchTerm(\"\");\n    }\n  };\n\n  const handleSelectAll = () => {\n    if (!multiple) return;\n\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    const allSelected = selectableOptions.every((option) =>\n      selectedOptions.some((selected) => selected.value === option.value),\n    );\n\n    let newSelectedOptions: SelectOption[];\n\n    if (allSelected) {\n      newSelectedOptions = selectedOptions.filter(\n        (selected) =>\n          !selectableOptions.some((option) => option.value === selected.value),\n      );\n    } else {\n      const optionsToAdd = selectableOptions.filter(\n        (option) =>\n          !selectedOptions.some((selected) => selected.value === option.value),\n      );\n\n      if (maxSelected !== undefined) {\n        const remainingSlots = maxSelected - selectedOptions.length;\n        newSelectedOptions = [\n          ...selectedOptions,\n          ...optionsToAdd.slice(0, remainingSlots),\n        ];\n      } else {\n        newSelectedOptions = [...selectedOptions, ...optionsToAdd];\n      }\n    }\n\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = newSelectedOptions.map((opt) => opt.value);\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as unknown as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  const handleClearAll = () => {\n    if (!multiple) return;\n\n    setSelectedOptions([]);\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: [],\n      },\n    } as unknown as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  const removeOption = (optionToRemove: SelectOption, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const newSelectedOptions = selectedOptions.filter(\n      (option) => option.value !== optionToRemove.value,\n    );\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = multiple\n      ? newSelectedOptions.map((opt) => opt.value)\n      : \"\";\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n        setSearchTerm(\"\");\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\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 getDisplayText = () => {\n    if (selectedOptions.length === 0) return placeholder;\n\n    if (!multiple) {\n      return selectedOptions[0]?.label || selectedOptions[0]?.value;\n    }\n\n    if (showSelectedCount && selectedOptions.length > 2) {\n      return `${selectedOptions.length} items selected`;\n    }\n\n    if (selectedOptions.length <= 2) {\n      return selectedOptions.map((opt) => opt.label || opt.value).join(\", \");\n    }\n\n    return `${selectedOptions[0]?.label || selectedOptions[0]?.value} +${selectedOptions.length - 1} more`;\n  };\n\n  const isOptionSelected = (option: SelectOption) => {\n    return selectedOptions.some((selected) => selected.value === option.value);\n  };\n\n  const areAllFilteredSelected = () => {\n    if (!multiple || filteredOptions.length === 0) return false;\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    return (\n      selectableOptions.length > 0 &&\n      selectableOptions.every((option) =>\n        selectedOptions.some((selected) => selected.value === option.value),\n      )\n    );\n  };\n\n  const areSomeFilteredSelected = () => {\n    if (!multiple || filteredOptions.length === 0) return false;\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    return (\n      selectableOptions.some((option) =>\n        selectedOptions.some((selected) => selected.value === option.value),\n      ) && !areAllFilteredSelected()\n    );\n  };\n\n  const dropdownPositionClasses =\n    dropdownPosition === \"top\" ? \"bottom-full mb-1\" : \"top-full mt-1\";\n\n  return (\n    <div ref={selectRef} className={`${fullWidth ? \"w-full\" : \"w-fit\"} mb-4`}>\n      {label && (\n        <label\n          htmlFor={id}\n          className=\"mb-1 block text-sm font-medium text-gray-700\"\n        >\n          {label}\n          {required && <span className=\"ml-1 text-red-500\">*</span>}\n        </label>\n      )}\n\n      <div className=\"relative\">\n        <button\n          type=\"button\"\n          className={`flex items-center justify-between rounded-lg border ${\n            error ? \"border-red-500\" : \"border-gray-200\"\n          } bg-gray-100 shadow-sm ${\n            sizeClasses[size]\n          } text-gray-700 hover:border-gray-300 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 ${\n            disabled ? \"cursor-not-allowed bg-gray-50 opacity-50\" : \"\"\n          } ${className} ${fullWidth ? \"w-full\" : \"\"} transition-all duration-200`}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          disabled={disabled}\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n        >\n          <div className=\"flex-1 flex items-center gap-1 min-w-0\">\n            {multiple && selectedOptions.length > 0 ? (\n              <div className=\"flex flex-wrap gap-1 flex-1\">\n                {selectedOptions.slice(0, 3).map((option) => (\n                  <span\n                    key={option.value}\n                    className=\"inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 text-primary-800 text-sm rounded-md\"\n                  >\n                    <span className=\"truncate max-w-[120px]\">\n                      {option.label || option.value}\n                    </span>\n                    <X\n                      className=\"h-3 w-3 cursor-pointer hover:text-primary-900\"\n                      onClick={(e) => removeOption(option, e)}\n                    />\n                  </span>\n                ))}\n                {selectedOptions.length > 3 && (\n                  <span className=\"text-sm text-gray-500 px-1\">\n                    +{selectedOptions.length - 3} more\n                  </span>\n                )}\n              </div>\n            ) : (\n              <span\n                className={`truncate ${selectedOptions.length === 0 ? \"text-gray-400\" : \"text-gray-700\"}`}\n              >\n                {getDisplayText()}\n              </span>\n            )}\n          </div>\n          <ChevronDown\n            className={`ml-2 h-4 w-4 text-gray-400 transition-transform flex-shrink-0 ${\n              isOpen ? \"rotate-180 transform\" : \"\"\n            }`}\n          />\n        </button>\n\n        {isOpen && (\n          <div\n            ref={dropdownRef}\n            className={`absolute z-[9999] w-full rounded-lg border border-gray-200 bg-white shadow-xl ${dropdownPositionClasses}`}\n            role=\"listbox\"\n            style={{\n              zIndex: 9999,\n              position: \"absolute\",\n            }}\n          >\n            {searchable && (\n              <div className=\"sticky top-0 border-b border-gray-100 bg-white p-3 z-[10000]\">\n                <div className=\"relative\">\n                  <input\n                    type=\"text\"\n                    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\"\n                    placeholder={onSearch ? \"Search...\" : \"Filter...\"}\n                    value={searchTerm}\n                    onChange={(e) => setSearchTerm(e.target.value)}\n                    autoFocus\n                  />\n                  {isSearching && (\n                    <Loader2 className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400\" />\n                  )}\n                </div>\n              </div>\n            )}\n\n            <div className=\"max-h-60 overflow-auto py-1\">\n              {isSearching ? (\n                <div className=\"px-3 py-8 text-center\">\n                  <Loader2 className=\"h-6 w-6 animate-spin text-primary-500 mx-auto mb-2\" />\n                  <p className=\"text-sm text-gray-500\">Searching...</p>\n                </div>\n              ) : filteredOptions.length > 0 ? (\n                <>\n                  {multiple && showSelectAll && (\n                    <div className=\"border-b border-gray-100\">\n                      <div className=\"px-3 py-2 flex items-center justify-between\">\n                        <button\n                          type=\"button\"\n                          onClick={handleSelectAll}\n                          className=\"text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors\"\n                        >\n                          {areAllFilteredSelected()\n                            ? \"Deselect All\"\n                            : \"Select All\"}\n                        </button>\n                        {selectedOptions.length > 0 && (\n                          <button\n                            type=\"button\"\n                            onClick={handleClearAll}\n                            className=\"text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors\"\n                          >\n                            Clear All\n                          </button>\n                        )}\n                      </div>\n                      {selectedOptions.length > 0 && (\n                        <div className=\"px-3 pb-2 text-xs text-gray-500\">\n                          {selectedOptions.length} selected\n                          {maxSelected && ` of ${maxSelected} max`}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                  {filteredOptions.map((option) => {\n                    const isSelected = isOptionSelected(option);\n                    const isDisabled =\n                      option.disabled ||\n                      (maxSelected !== undefined &&\n                        !isSelected &&\n                        selectedOptions.length >= maxSelected);\n\n                    return (\n                      <div\n                        key={option.value}\n                        className={`cursor-pointer px-3 py-2 flex items-center justify-between transition-colors duration-150 ${\n                          isSelected\n                            ? \"bg-primary-50 text-primary-700\"\n                            : \"text-gray-700 hover:bg-gray-50\"\n                        } ${\n                          isDisabled\n                            ? \"cursor-not-allowed text-gray-400 hover:bg-white opacity-50\"\n                            : \"\"\n                        }`}\n                        onClick={() => !isDisabled && handleSelect(option)}\n                        role=\"option\"\n                        aria-selected={isSelected}\n                        aria-disabled={isDisabled}\n                      >\n                        <span className=\"flex-1 text-sm font-medium\">\n                          {option.label || option.value}\n                        </span>\n                        {multiple && isSelected && (\n                          <div className=\"w-4 h-4 bg-primary-500 rounded-sm flex items-center justify-center\">\n                            <svg\n                              className=\"w-3 h-3 text-white\"\n                              fill=\"currentColor\"\n                              viewBox=\"0 0 20 20\"\n                            >\n                              <path\n                                fillRule=\"evenodd\"\n                                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\"\n                                clipRule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n                </>\n              ) : (\n                <div className=\"px-3 py-8 text-center\">\n                  <p className=\"text-sm text-gray-500\">\n                    {searchTerm ? \"No results found\" : \"No options available\"}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {error && <p className=\"mt-1 text-sm text-red-600\">{error}</p>}\n      {helpText && !error && (\n        <p className=\"mt-1 text-sm text-gray-500\">{helpText}</p>\n      )}\n\n      {name && (\n        <>\n          {multiple ? (\n            selectedOptions.map((option, index) => (\n              <input\n                key={`${option.value}-${index}`}\n                type=\"hidden\"\n                name={`${name}[]`}\n                value={option.value}\n              />\n            ))\n          ) : (\n            <input\n              type=\"hidden\"\n              name={name}\n              value={selectedOptions[0]?.value || \"\"}\n            />\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n// Demo Component\nfunction Demo() {\n  const [selectedValue, setSelectedValue] = useState(\"\");\n  const [options, setOptions] = useState([\n    { value: \"1\", label: \"Apple\" },\n    { value: \"2\", label: \"Banana\" },\n    { value: \"3\", label: \"Cherry\" },\n  ]);\n  const [isSearching, setIsSearching] = useState(false);\n\n  const handleBackendSearch = async (searchTerm: string) => {\n    console.log(\"Searching backend for:\", searchTerm);\n    setIsSearching(true);\n\n    // Simulate API call\n    await new Promise((resolve) => setTimeout(resolve, 800));\n\n    // Mock backend filtering\n    const allFruits = [\n      { value: \"1\", label: \"Apple\" },\n      { value: \"2\", label: \"Banana\" },\n      { value: \"3\", label: \"Cherry\" },\n      { value: \"4\", label: \"Date\" },\n      { value: \"5\", label: \"Elderberry\" },\n      { value: \"6\", label: \"Fig\" },\n      { value: \"7\", label: \"Grape\" },\n      { value: \"8\", label: \"Honeydew\" },\n    ];\n\n    const filtered = searchTerm\n      ? allFruits.filter((fruit) =>\n          fruit.label.toLowerCase().includes(searchTerm.toLowerCase()),\n        )\n      : allFruits;\n\n    setOptions(filtered);\n    setIsSearching(false);\n  };\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-8 space-y-8\">\n      <div>\n        <h1 className=\"text-3xl font-bold mb-2\">Select with Backend Search</h1>\n        <p className=\"text-gray-600\">\n          Type in the search box to trigger backend filtering (simulated with\n          800ms delay)\n        </p>\n      </div>\n\n      <Select\n        label=\"Choose a fruit\"\n        placeholder=\"Select or search for a fruit\"\n        options={options}\n        value={selectedValue}\n        onChange={(e) => setSelectedValue(e.target.value as string)}\n        searchable={true}\n        onSearch={handleBackendSearch}\n        isSearching={isSearching}\n        searchDebounceMs={300}\n      />\n\n      {selectedValue && (\n        <div className=\"p-4 bg-blue-50 rounded-lg\">\n          <p className=\"text-sm font-medium text-blue-900\">\n            Selected value: {selectedValue}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["Select","_a","options","_c","placeholder","onChange","value","_d","size","_e","className","name","id","_f","disabled","label","required","error","helpText","_g","fullWidth","_h","searchable","onSearch","_j","isSearching","_k","searchDebounceMs","_l","multiple","maxSelected","_m","showSelectedCount","closeOnSelect","_o","showSelectAll","_p","useState","isOpen","setIsOpen","_q","searchTerm","setSearchTerm","_r","dropdownPosition","setDropdownPosition","shouldCloseOnSelect","undefined","_s","Array","isArray","map","val","find","option","filter","Boolean","selectedOptions","setSelectedOptions","selectRef","useRef","dropdownRef","searchTimeoutRef","useEffect","current","selectRect","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","clearTimeout","setTimeout","filteredOptions","toLowerCase","includes","handleClickOutside","event","contains","target","document","addEventListener","removeEventListener","dropdownPositionClasses","_jsxs","ref","concat","children","htmlFor","_jsx","type","sm","md","lg","onClick","length","slice","X","e","optionToRemove","stopPropagation","newSelectedOptions","eventValue","opt","removeOption","join","_b","getDisplayText","ChevronDown","role","style","zIndex","position","autoFocus","Loader2","selectableOptions","every","some","selected","optionsToAdd","remainingSlots","__spreadArray","areAllFilteredSelected","isSelected","isOptionSelected","isDisabled","handleSelect","fill","viewBox","fillRule","d","clipRule","_Fragment","index"],"mappings":"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"}

package/dist/esm/components/Form/Select/SelectButton.mjs

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l}from"react";import{ChevronDown as a,Check as n}from"lucide-react";function r(r){var o=r.options,i=r.placeholder,c=void 0===i?"Select an option":i,d=r.onChange,u=r.value,s=r.size,m=void 0===s?"md":s,v=r.className,b=void 0===v?"":v,p=r.name,f=r.id,h=r.disabled,x=void 0!==h&&h,g=r.label,y=r.required,w=l(!1),N=w[0],k=w[1],j=l(u&&o.find((function(e){return e.value===u}))||null),z=j[0],C=j[1];return e("div",{className:"relative ".concat(b),children:[g&&e("label",{htmlFor:f,className:"mb-1 block text-sm font-medium text-gray-700",children:[g,y&&t("span",{className:"ml-1 text-red-500",children:"*"})]}),e("button",{type:"button",className:"flex w-full items-center justify-between rounded-md border border-gray-200 bg-white shadow-sm ".concat({sm:"px-3 py-2 text-sm",md:"px-4 py-2.5 text-base"}[m]," text-gray-700 hover:bg-gray-50 focus:outline-none ").concat(x?"cursor-not-allowed opacity-50":""),onClick:function(){return!x&&k(!N)},disabled:x,id:f,children:[t("span",{className:"truncate",children:z?(null==z?void 0:z.label)||z.value:c}),t(a,{className:"ml-2 h-4 w-4 ".concat(N?"rotate-180 transform":"")})]}),N&&t("div",{className:"absolute z-10 mt-1 max-h-60 w-full min-w-[200px] p-1 font-medium text-sm overflow-auto rounded-lg bg-white shadow-xl",children:o.map((function(l){return e("div",{className:"cursor-pointer px-3 py-2 hover:bg-gray-100 rounded-lg flex justify-between item-center ".concat((null==z?void 0:z.value)===l.value?"bg-gray-50 text-black":"text-gray-900"),onClick:function(){return function(e){C(e),d(e.value),k(!1)}(l)},children:[t("div",{children:l.label||l.value}),(null==z?void 0:z.value)===l.value&&t("div",{children:t(n,{size:15,className:"text-blue-600"})})]},l.value)}))}),p&&t("input",{type:"hidden",name:p,value:(null==z?void 0:z.value)||""})]})}export{r as default};
+//# sourceMappingURL=SelectButton.mjs.map

package/dist/esm/components/Form/Select/SelectButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.mjs","sources":["../../../../../src/components/Form/Select/SelectButton.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\n\nexport type SelectButtonOption = {\n  value: string;\n  label?: string;\n};\n\nexport type SelectButtonProps = {\n  options: SelectButtonOption[];\n  placeholder?: string;\n  onChange: (value: string) => void;\n  value?: string;\n  size?: \"sm\" | \"md\";\n  className?: string;\n  name?: string;\n  id?: string;\n  disabled?: boolean;\n  label?: string;\n  required?: boolean;\n};\n\nexport default function SelectButton({\n  options,\n  placeholder = \"Select an option\",\n  onChange,\n  value,\n  size = \"md\",\n  className = \"\",\n  name,\n  id,\n  disabled = false,\n  label,\n  required,\n}: SelectButtonProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] =\n    useState<SelectButtonOption | null>(\n      value ? options.find((option) => option.value === value) || null : null,\n    );\n\n  const handleSelect = (option: SelectButtonOption) => {\n    setSelectedOption(option);\n    onChange(option.value);\n    setIsOpen(false);\n  };\n\n  // Size classes for the button\n  const sizeClasses = {\n    sm: \"px-3 py-2 text-sm\",\n    md: \"px-4 py-2.5 text-base\",\n  };\n\n  return (\n    <div className={`relative ${className}`}>\n      {label && (\n        <label\n          htmlFor={id}\n          className=\"mb-1 block text-sm font-medium text-gray-700\"\n        >\n          {label}\n          {required && <span className=\"ml-1 text-red-500\">*</span>}\n        </label>\n      )}\n      <button\n        type=\"button\"\n        className={`flex w-full items-center justify-between rounded-md border border-gray-200 bg-white shadow-sm ${\n          sizeClasses[size]\n        } text-gray-700 hover:bg-gray-50 focus:outline-none ${disabled ? \"cursor-not-allowed opacity-50\" : \"\"}`}\n        onClick={() => !disabled && setIsOpen(!isOpen)}\n        disabled={disabled}\n        id={id}\n      >\n        <span className=\"truncate\">\n          {selectedOption\n            ? selectedOption?.label || selectedOption.value\n            : placeholder}\n        </span>\n        <ChevronDown\n          className={`ml-2 h-4 w-4 ${isOpen ? \"rotate-180 transform\" : \"\"}`}\n        />\n      </button>\n      {isOpen && (\n        <div className=\"absolute z-10 mt-1 max-h-60 w-full min-w-[200px] p-1 font-medium text-sm overflow-auto rounded-lg bg-white shadow-xl\">\n          {options.map((option) => (\n            <div\n              key={option.value}\n              className={`cursor-pointer px-3 py-2 hover:bg-gray-100 rounded-lg flex justify-between item-center ${\n                selectedOption?.value === option.value\n                  ? \"bg-gray-50 text-black\"\n                  : \"text-gray-900\"\n              }`}\n              onClick={() => handleSelect(option)}\n            >\n              <div>{option.label || option.value}</div>\n              {selectedOption?.value === option.value && (\n                <div>\n                  <Check size={15} className=\"text-blue-600\" />\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n      {name && (\n        <input type=\"hidden\" name={name} value={selectedOption?.value || \"\"} />\n      )}\n    </div>\n  );\n}\n\n// Demo\nfunction Demo() {\n  const [value1, setValue1] = useState(\"\");\n  const [value2, setValue2] = useState(\"\");\n  const [value3, setValue3] = useState(\"\");\n\n  const options = [\n    { value: \"option1\", label: \"Option 1\" },\n    { value: \"option2\", label: \"Option 2\" },\n    { value: \"option3\", label: \"Option 3\" },\n  ];\n\n  return (\n    <div className=\"p-8 space-y-6\">\n      <h1 className=\"text-2xl font-bold mb-6\">Resizable Select Button</h1>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">Default (no width class):</p>\n        <SelectButton\n          options={options}\n          onChange={setValue1}\n          value={value1}\n          placeholder=\"Select...\"\n        />\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">With w-64 class:</p>\n        <SelectButton\n          options={options}\n          onChange={setValue2}\n          value={value2}\n          placeholder=\"Select...\"\n          className=\"w-64\"\n        />\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">With w-96 class:</p>\n        <SelectButton\n          options={options}\n          onChange={setValue3}\n          value={value3}\n          placeholder=\"Select...\"\n          className=\"w-96\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["SelectButton","_a","options","_b","placeholder","onChange","value","_c","size","_d","className","name","id","_e","disabled","label","required","_f","useState","isOpen","setIsOpen","_g","find","option","selectedOption","setSelectedOption","_jsxs","concat","children","htmlFor","_jsx","type","sm","md","onClick","ChevronDown","map","handleSelect","Check"],"mappings":"yIAsBc,SAAUA,EAAaC,OACnCC,EAAOD,EAAAC,QACPC,EAAAF,EAAAG,YAAAA,OAAW,IAAAD,EAAG,qBACdE,aACAC,UACAC,EAAAN,EAAAO,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAIV,EAAAU,KACJC,EAAEX,EAAAW,GACFC,aAAAC,cAAgBD,EAChBE,EAAKd,EAAAc,MACLC,EAAQf,EAAAe,SAEFC,EAAsBC,GAAS,GAA9BC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAClBI,EACJH,EACEZ,GAAQJ,EAAQoB,MAAK,SAACC,GAAW,OAAAA,EAAOjB,QAAUA,CAAjB,KAAkC,MAFhEkB,EAAcH,EAAA,GAAEI,OAiBvB,OACEC,EAAA,MAAA,CAAKhB,UAAW,YAAAiB,OAAYjB,GAAWkB,SAAA,CACpCb,GACCW,WACEG,QAASjB,EACTF,UAAU,+CAA8CkB,SAAA,CAEvDb,EACAC,GAAYc,EAAA,OAAA,CAAMpB,UAAU,sCAGjCgB,EAAA,SAAA,CACEK,KAAK,SACLrB,UAAW,wGAlBG,CAClBsB,GAAI,oBACJC,GAAI,yBAiBczB,iEACwCM,EAAW,gCAAkC,IACnGoB,QAAS,WAAM,OAACpB,GAAYM,GAAWD,EAAxB,EACfL,SAAUA,EACVF,GAAIA,EAAEgB,SAAA,CAENE,EAAA,OAAA,CAAMpB,UAAU,oBACbc,GACGA,aAAc,EAAdA,EAAgBT,QAASS,EAAelB,MACxCF,IAEN0B,EAACK,EAAW,CACVzB,UAAW,gBAAAiB,OAAgBR,EAAS,uBAAyB,SAGhEA,GACCW,EAAA,MAAA,CAAKpB,UAAU,uHAAsHkB,SAClI1B,EAAQkC,KAAI,SAACb,GAAW,OACvBG,EAAA,MAAA,CAEEhB,UAAW,0FAAAiB,QACTH,aAAc,EAAdA,EAAgBlB,SAAUiB,EAAOjB,MAC7B,wBACA,iBAEN4B,QAAS,WAAM,OAnDN,SAACX,GACpBE,EAAkBF,GAClBlB,EAASkB,EAAOjB,OAChBc,GAAU,EACZ,CA+C2BiB,CAAad,EAAb,EAAoBK,SAAA,CAEnCE,EAAA,MAAA,CAAAF,SAAML,EAAOR,OAASQ,EAAOjB,SAC5BkB,aAAc,EAAdA,EAAgBlB,SAAUiB,EAAOjB,OAChCwB,EAAA,MAAA,CAAAF,SACEE,EAACQ,EAAK,CAAC9B,KAAM,GAAIE,UAAU,sBAX1Ba,EAAOjB,MAFS,MAoB5BK,GACCmB,EAAA,QAAA,CAAOC,KAAK,SAASpB,KAAMA,EAAML,OAAOkB,aAAc,EAAdA,EAAgBlB,QAAS,OAIzE"}

package/dist/esm/components/Form/TextEditor/TextEditor.mjs

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../node_modules/@tiptap/extension-bold/dist/index.mjs";import n from"../../../node_modules/@tiptap/extension-bullet-list/dist/index.mjs";import i from"../../../node_modules/@tiptap/extension-code/dist/index.mjs";import r from"../../../node_modules/@tiptap/extension-code-block/dist/index.mjs";import s from"../../../node_modules/@tiptap/extension-document/dist/index.mjs";import l from"../../../node_modules/@tiptap/extension-heading/dist/index.mjs";import c from"../../../node_modules/@tiptap/extension-italic/dist/index.mjs";import a from"@tiptap/extension-link";import u from"../../../node_modules/@tiptap/extension-list-item/dist/index.mjs";import d from"../../../node_modules/@tiptap/extension-ordered-list/dist/index.mjs";import b from"../../../node_modules/@tiptap/extension-paragraph/dist/index.mjs";import p from"../../../node_modules/@tiptap/extension-strike/dist/index.mjs";import g from"../../../node_modules/@tiptap/extension-text/dist/index.mjs";import m from"@tiptap/extension-underline";import{useEditor as h,EditorContent as x}from"@tiptap/react";import f from"@tiptap/starter-kit";import{Undo2 as v,Redo2 as y,Heading1 as k,Heading2 as N,Heading3 as C,SeparatorVertical as z,Bold as A,Italic as L,Underline as w,Strikethrough as j,List as _,ListOrdered as B,Code as H,FileCode as U,Quote as R,Link as I}from"lucide-react";var M=function(M){var T=M.initialContent,q=void 0===T?"":T,O=M.onUpdate,S=h({extensions:[f.configure({heading:!1,codeBlock:!1}),s,b,g,o,c,m,p,i,r.configure({HTMLAttributes:{class:"bg-gray-100 p-3 rounded text-sm font-mono"}}),l.configure({levels:[1,2,3]}),n,d,u,a.configure({openOnClick:!1,HTMLAttributes:{class:"text-blue-600 underline"}})],content:q,onUpdate:function(e){var t=e.editor;O(t.getHTML())},editorProps:{attributes:{class:"prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4"}},immediatelyRender:!1});return S?t("div",{className:"rounded-lg border border-gray-200 shadow-sm",children:[t("div",{className:"flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3",children:[e("button",{onClick:function(){return S.chain().focus().undo().run()},className:"p-2 rounded hover:bg-gray-200 transition-colors ".concat(S.can().undo()?"":"opacity-50 cursor-not-allowed"),type:"button",disabled:!S.can().undo(),title:"Undo",children:e(v,{size:16})}),e("button",{onClick:function(){return S.chain().focus().redo().run()},className:"p-2 rounded hover:bg-gray-200 transition-colors ".concat(S.can().redo()?"":"opacity-50 cursor-not-allowed"),type:"button",disabled:!S.can().redo(),title:"Redo",children:e(y,{size:16})}),e("div",{className:"mx-2 h-6 w-px bg-gray-300"}),e("button",{onClick:function(){return S.chain().focus().toggleHeading({level:1}).run()},className:"p-2 rounded transition-colors ".concat(S.isActive("heading",{level:1})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 1",children:e(k,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleHeading({level:2}).run()},className:"p-2 rounded transition-colors ".concat(S.isActive("heading",{level:2})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 2",children:e(N,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleHeading({level:3}).run()},className:"p-2 rounded transition-colors ".concat(S.isActive("heading",{level:3})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 3",children:e(C,{size:16})}),e(z,{className:"mx-2 h-6 w-px bg-gray-300"}),e("button",{onClick:function(){return S.chain().focus().toggleBold().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("bold")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Bold",children:e(A,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleItalic().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("italic")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Italic",children:e(L,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleUnderline().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("underline")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Underline",children:e(w,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleStrike().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("strike")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Strikethrough",children:e(j,{size:16})}),e(z,{className:"mx-2 h-6 w-px bg-gray-300"}),e("button",{onClick:function(){return S.chain().focus().toggleBulletList().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("bulletList")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Bullet List",children:e(_,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleOrderedList().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("orderedList")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Numbered List",children:e(B,{size:16})}),e(z,{className:"mx-2 h-6 w-px bg-gray-300"}),e("button",{onClick:function(){return S.chain().focus().toggleCode().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("code")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Inline Code",children:e(H,{size:16})}),e("button",{onClick:function(){return S.chain().focus().toggleCodeBlock().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("codeBlock")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Code Block",children:e(U,{size:16})}),e(z,{className:"mx-2 h-6 w-px bg-gray-300"}),e("button",{onClick:function(){return S.chain().focus().toggleBlockquote().run()},className:"p-2 rounded transition-colors ".concat(S.isActive("blockquote")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Quote",children:e(R,{size:16})}),e(z,{className:"mx-2 h-6 w-px bg-gray-300"}),S.isActive("link")?e("button",{onClick:function(){null==S||S.chain().focus().unsetLink().run()},className:"p-2 rounded bg-blue-200 text-blue-800 hover:bg-blue-300 transition-colors",type:"button",title:"Remove Link",children:e(I,{size:16})}):e("button",{onClick:function(){var e=window.prompt("Enter URL:");e&&(null==S||S.chain().focus().setLink({href:e}).run())},className:"p-2 rounded hover:bg-gray-200 transition-colors",type:"button",title:"Add Link",children:e(I,{size:16})})]}),e(x,{editor:S,className:"min-h-[300px] focus-within:bg-white"})]}):e("div",{className:"rounded-lg border bg-gray-50 h-48 animate-pulse"})};export{M as default};
+//# sourceMappingURL=TextEditor.mjs.map

package/dist/esm/components/Form/TextEditor/TextEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.mjs","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Bold from \"@tiptap/extension-bold\";\nimport BulletList from \"@tiptap/extension-bullet-list\";\nimport Code from \"@tiptap/extension-code\";\nimport CodeBlock from \"@tiptap/extension-code-block\";\nimport Document from \"@tiptap/extension-document\";\nimport Heading from \"@tiptap/extension-heading\";\nimport Italic from \"@tiptap/extension-italic\";\nimport Link from \"@tiptap/extension-link\";\nimport ListItem from \"@tiptap/extension-list-item\";\nimport OrderedList from \"@tiptap/extension-ordered-list\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Strike from \"@tiptap/extension-strike\";\nimport Text from \"@tiptap/extension-text\";\nimport Underline from \"@tiptap/extension-underline\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n    Bold as BoldIcon,\n    Italic as ItalicIcon,\n    Underline as UnderlineIcon,\n    List,\n    ListOrdered,\n    Heading1,\n    Heading2,\n    Heading3,\n    Code as CodeIcon,\n    FileCode,\n    Link as LinkIcon,\n    Strikethrough,\n    Quote,\n    Minus,\n    Undo2,\n    Redo2, SeparatorVertical\n} from \"lucide-react\";\n\nexport interface TextEditorProps {\n    initialContent?: string;\n    onUpdate: (content: string) => void;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({ initialContent = \"\", onUpdate }) => {\n    const editor = useEditor({\n        extensions: [\n            StarterKit.configure({\n                heading: false,\n                codeBlock: false,\n            }),\n            Document,\n            Paragraph,\n            Text,\n            Bold,\n            Italic,\n            Underline,\n            Strike,\n            Code,\n            CodeBlock.configure({\n                HTMLAttributes: {\n                    class: 'bg-gray-100 p-3 rounded text-sm font-mono',\n                },\n            }),\n            Heading.configure({\n                levels: [1, 2, 3],\n            }),\n            BulletList,\n            OrderedList,\n            ListItem,\n            Link.configure({\n                openOnClick: false,\n                HTMLAttributes: {\n                    class: 'text-blue-600 underline',\n                },\n            }),\n        ],\n        content: initialContent,\n        onUpdate: ({ editor }) => {\n            onUpdate(editor.getHTML());\n        },\n        editorProps: {\n            attributes: {\n                class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4',\n            },\n        },\n        immediatelyRender: false,\n    });\n\n    const addLink = () => {\n        const url = window.prompt('Enter URL:');\n        if (url) {\n            editor?.chain().focus().setLink({ href: url }).run();\n        }\n    };\n\n    const removeLink = () => {\n        editor?.chain().focus().unsetLink().run();\n    };\n\n    if (!editor) {\n        return <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>;\n    }\n\n    return (\n        <div className='rounded-lg border border-gray-200 shadow-sm'>\n            {/* Toolbar */}\n            <div className='flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3'>\n                {/* Undo/Redo */}\n                <button\n                    onClick={() => editor.chain().focus().undo().run()}\n                    className={`p-2 rounded hover:bg-gray-200 transition-colors ${!editor.can().undo() ? 'opacity-50 cursor-not-allowed' : ''}`}\n                    type='button'\n                    disabled={!editor.can().undo()}\n                    title=\"Undo\"\n                >\n                    <Undo2 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().redo().run()}\n                    className={`p-2 rounded hover:bg-gray-200 transition-colors ${!editor.can().redo() ? 'opacity-50 cursor-not-allowed' : ''}`}\n                    type='button'\n                    disabled={!editor.can().redo()}\n                    title=\"Redo\"\n                >\n                    <Redo2 size={16} />\n                </button>\n\n                <div className=\"mx-2 h-6 w-px bg-gray-300\"></div>\n\n                {/* Headings */}\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 1 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 1\"\n                >\n                    <Heading1 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 2 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 2\"\n                >\n                    <Heading2 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 3 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 3\"\n                >\n                    <Heading3 size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Text Formatting */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBold().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"bold\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Bold\"\n                >\n                    <BoldIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleItalic().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"italic\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Italic\"\n                >\n                    <ItalicIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleUnderline().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"underline\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Underline\"\n                >\n                    <UnderlineIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleStrike().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"strike\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Strikethrough\"\n                >\n                    <Strikethrough size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Lists */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBulletList().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"bulletList\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Bullet List\"\n                >\n                    <List size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleOrderedList().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"orderedList\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Numbered List\"\n                >\n                    <ListOrdered size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Code */}\n                <button\n                    onClick={() => editor.chain().focus().toggleCode().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"code\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Inline Code\"\n                >\n                    <CodeIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"codeBlock\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Code Block\"\n                >\n                    <FileCode size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Quote */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBlockquote().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"blockquote\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Quote\"\n                >\n                    <Quote size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Link */}\n                {editor.isActive('link') ? (\n                    <button\n                        onClick={removeLink}\n                        className=\"p-2 rounded bg-blue-200 text-blue-800 hover:bg-blue-300 transition-colors\"\n                        type='button'\n                        title=\"Remove Link\"\n                    >\n                        <LinkIcon size={16} />\n                    </button>\n                ) : (\n                    <button\n                        onClick={addLink}\n                        className=\"p-2 rounded hover:bg-gray-200 transition-colors\"\n                        type='button'\n                        title=\"Add Link\"\n                    >\n                        <LinkIcon size={16} />\n                    </button>\n                )}\n            </div>\n\n            {/* Editor */}\n            <EditorContent\n                editor={editor}\n                className='min-h-[300px] focus-within:bg-white'\n            />\n        </div>\n    );\n};\n\nexport default TextEditor;"],"names":["TextEditor","_a","_b","initialContent","onUpdate","editor","useEditor","extensions","StarterKit","configure","heading","codeBlock","Document","Paragraph","Text","Bold","Italic","Underline","Strike","Code","CodeBlock","HTMLAttributes","class","Heading","levels","BulletList","OrderedList","ListItem","Link","openOnClick","content","getHTML","editorProps","attributes","immediatelyRender","_jsxs","className","children","_jsx","onClick","chain","focus","undo","run","concat","can","type","disabled","title","Undo2","size","redo","Redo2","toggleHeading","level","isActive","Heading1","Heading2","Heading3","SeparatorVertical","toggleBold","BoldIcon","toggleItalic","ItalicIcon","toggleUnderline","UnderlineIcon","toggleStrike","Strikethrough","toggleBulletList","List","toggleOrderedList","ListOrdered","toggleCode","CodeIcon","toggleCodeBlock","FileCode","toggleBlockquote","Quote","unsetLink","LinkIcon","url","window","prompt","setLink","href","EditorContent"],"mappings":"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"}

package/dist/esm/components/Loading/Loading.mjs

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import n from"react";var r=function(n){var r=n.size,t=void 0===r?"md":r,l=n.variant,o=void 0===l?"pulse":l,i=n.color,c=void 0===i?"primary":i,s=n.fullScreen,d=void 0!==s&&s,u=n.text,m=n.className,b=void 0===m?"":m,h=n.image,g=n.imageEffect,p=void 0===g?"pulse":g,x=c.startsWith("#"),f=function(e){return x?"":{text:"text-".concat(c),bg:"bg-".concat(c),border:"border-".concat(c),borderTop:"border-t-".concat(c),borderRight:"border-r-".concat(c)}[e]||""},v={sm:"w-4 h-4",md:"w-8 h-8",lg:"w-12 h-12",xl:"w-16 h-16"},N={sm:"w-8 h-8",md:"w-12 h-12",lg:"w-16 h-16",xl:"w-20 h-20"},y=function(){switch(p){case"bounce":return"animate-bounce";case"spin":return"animate-spin";case"float":return"animate-pulse hover:animate-bounce";case"heartbeat":return"animate-ping";default:return"animate-pulse"}},w=function(){return e("div",{className:"relative flex items-center justify-center",children:[a("img",{src:h,alt:"Loading",className:"".concat(N[t]," object-contain ").concat(y()),style:{filter:"drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))",animationDuration:"heartbeat"===p?"1.5s":"bounce"===p?"1s":"2s"}}),"float"===p&&a("div",{className:"absolute inset-0 ".concat(N[t]," rounded-full bg-gradient-to-r from-purple-400 to-blue-400 opacity-20 animate-ping"),style:{animationDuration:"2s"}})]})},C=function(){return e("div",{className:"relative",children:[a("div",{className:"".concat(v[t]," border-4 border-gray-200 rounded-full animate-spin ").concat(x?"":f("borderTop")),style:x?{borderTopColor:c}:{}}),a("div",{className:"absolute inset-0 ".concat(v[t]," border-4 border-transparent rounded-full animate-spin ").concat(x?"":f("borderRight")),style:x?{borderRightColor:c,animationDirection:"reverse",animationDuration:"0.75s"}:{animationDirection:"reverse",animationDuration:"0.75s"}})]})},D=function(){return a("div",{className:"flex space-x-1",children:[0,1,2].map((function(e){return a("div",{className:"".concat("sm"===t?"w-2 h-2":"md"===t?"w-3 h-3":"lg"===t?"w-4 h-4":"w-5 h-5"," rounded-full animate-bounce ").concat(x?"":f("bg")),style:x?{backgroundColor:c,animationDelay:"".concat(.2*e,"s"),animationDuration:"1.4s"}:{animationDelay:"".concat(.2*e,"s"),animationDuration:"1.4s"}},e)}))})},k=function(){return e("div",{className:"relative",children:[a("div",{className:"".concat(v[t]," rounded-full animate-pulse ").concat(x?"":f("bg")),style:x?{backgroundColor:c}:{}}),a("div",{className:"absolute inset-0 ".concat(v[t]," rounded-full animate-ping opacity-30 ").concat(x?"":f("bg")),style:x?{backgroundColor:c}:{}})]})},S=function(){return a("div",{className:"flex space-x-1 items-end",children:[0,1,2,3].map((function(e){return a("div",{className:"".concat("sm"===t?"w-1":"md"===t?"w-1.5":"lg"===t?"w-2":"w-2.5"," rounded-sm animate-pulse ").concat(x?"":f("bg")),style:x?{backgroundColor:c,height:"".concat(20+10*e,"px"),animationDelay:"".concat(.15*e,"s"),animationDuration:"1.2s"}:{height:"".concat(20+10*e,"px"),animationDelay:"".concat(.15*e,"s"),animationDuration:"1.2s"}},e)}))})},z=function(){return e("div",{className:"relative",children:[a("div",{className:"".concat(v[t]," border-4 rounded-full animate-ping ").concat(x?"":f("border")),style:x?{borderColor:c}:{}}),a("div",{className:"absolute inset-2 border-4 rounded-full animate-ping ".concat(x?"":f("border")),style:x?{borderColor:c,animationDelay:"0.5s"}:{animationDelay:"0.5s"}})]})},F=e("div",{className:"flex flex-col items-center justify-center space-y-3 ".concat(b),children:[function(){if("image"===o&&h)return a(w,{});switch(o){case"dots":return a(D,{});case"pulse":return a(k,{});case"bars":return a(S,{});case"ripple":return a(z,{});default:return a(C,{})}}(),u&&a("p",{className:"".concat({sm:"text-xs",md:"text-sm",lg:"text-base",xl:"text-lg"}[t]," font-medium animate-pulse ").concat(x?"":f("text")),style:x?{color:c}:{},children:u})]});return d?a("div",{className:"fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50",children:F}):F},t=function(){var t=n.useState("blue-500"),l=t[0],o=t[1],i=n.useState("spinner"),c=i[0],s=i[1],d=n.useState("md"),u=d[0],m=d[1],b=n.useState(!1),h=b[0],g=b[1],p=["spinner","dots","pulse","bars","ripple"];return e("div",{className:"p-8 max-w-4xl mx-auto",children:[a("h1",{className:"text-3xl font-bold text-gray-800 mb-8 text-center",children:"Modern Loading Component"}),e("div",{className:"bg-white rounded-xl shadow-lg p-6 mb-8",children:[a("h2",{className:"text-xl font-semibold text-gray-700 mb-4",children:"Customization"}),e("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6",children:[e("div",{children:[a("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Color"}),a("div",{className:"flex flex-wrap gap-2",children:[{name:"Blue",value:"blue-500",hex:"#3B82F6"},{name:"Purple",value:"purple-500",hex:"#8B5CF6"},{name:"Green",value:"green-500",hex:"#10B981"},{name:"Red",value:"red-500",hex:"#EF4444"},{name:"Orange",value:"orange-500",hex:"#F59E0B"},{name:"Pink",value:"pink-500",hex:"#EC4899"},{name:"Indigo",value:"indigo-500",hex:"#6366F1"},{name:"Teal",value:"teal-500",hex:"#14B8A6"}].map((function(e){return a("button",{onClick:function(){return o(e.value)},className:"w-8 h-8 rounded-full border-2 transition-all ".concat(l===e.value?"border-gray-400 scale-110":"border-gray-200"),style:{backgroundColor:e.hex},title:"".concat(e.name," (").concat(e.value,")")},e.value)}))})]}),e("div",{children:[a("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Variant"}),a("select",{value:c,onChange:function(e){return s(e.target.value)},className:"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent",children:p.map((function(e){return a("option",{value:e,children:e&&(null==e?void 0:e.charAt(0).toUpperCase())+(null==e?void 0:e.slice(1))},e)}))})]}),e("div",{children:[a("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Size"}),a("select",{value:u,onChange:function(e){return m(e.target.value)},className:"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent",children:["sm","md","lg","xl"].map((function(e){return a("option",{value:e,children:null==e?void 0:e.toUpperCase()},e)}))})]}),e("div",{children:[a("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Full Screen"}),a("button",{onClick:function(){return g(!0)},className:"w-full p-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors",children:"Demo Full Screen"})]})]}),e("div",{className:"bg-gray-50 rounded-lg p-8 flex flex-col items-center justify-center min-h-32",children:[a(r,{variant:c,size:u,color:l,text:"Loading..."}),a("div",{className:"mt-4 p-3 bg-white rounded-md shadow-sm",children:e("code",{className:"text-sm text-gray-600",children:['color="',l,'"']})})]})]}),e("div",{className:"bg-white rounded-xl shadow-lg p-6",children:[a("h2",{className:"text-xl font-semibold text-gray-700 mb-4",children:"All Variants"}),a("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6",children:p.map((function(n){return e("div",{className:"text-center",children:[a("div",{className:"bg-gray-50 rounded-lg p-4 flex items-center justify-center h-24 mb-2",children:a(r,{variant:n,color:l})}),a("p",{className:"text-sm text-gray-600 capitalize",children:n})]},n)}))}),e("div",{className:"mt-6 p-4 bg-blue-50 rounded-lg",children:[a("h3",{className:"font-semibold text-blue-800 mb-2",children:"Usage Examples:"}),e("div",{className:"space-y-2 text-sm",children:[e("div",{className:"bg-white p-2 rounded border",children:[a("code",{className:"text-blue-600",children:"// Tailwind CSS class"}),a("br",{}),a("code",{children:'<Loading color="primary-500" />'})]}),e("div",{className:"bg-white p-2 rounded border",children:[a("code",{className:"text-blue-600",children:"// Hex color"}),a("br",{}),a("code",{children:'<Loading color="#your-brand-color" />'})]}),e("div",{className:"bg-white p-2 rounded border",children:[a("code",{className:"text-blue-600",children:"// Custom Tailwind color"}),a("br",{}),a("code",{children:'<Loading color="emerald-400" variant="dots" />'})]})]})]})]}),h&&a(r,{variant:c,size:u,color:l,text:"Loading in full screen...",fullScreen:!0}),h&&a("button",{onClick:function(){return g(!1)},className:"fixed top-4 right-4 z-50 bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors",children:"Close Full Screen"})]})};export{t as LoadingDemo,r as default};
+//# sourceMappingURL=Loading.mjs.map

package/dist/esm/components/Loading/Loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.mjs","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface LoadingProps {\n    size?: 'sm' | 'md' | 'lg' | 'xl';\n    variant?: 'spinner' | 'dots' | 'pulse' | 'bars' | 'ripple' | 'image';\n    color?: string;\n    fullScreen?: boolean;\n    text?: string;\n    className?: string;\n    image?: string;\n    imageEffect?: 'pulse' | 'bounce' | 'spin' | 'float' | 'heartbeat';\n}\n\nconst Loading: React.FC<LoadingProps> = ({\n                                             size = 'md',\n                                             variant = 'pulse',\n                                             color = 'primary',\n                                             fullScreen = false,\n                                             text,\n                                             className = '',\n                                             image,\n                                             imageEffect = 'pulse',\n                                         }) => {\n    // Check if color is a hex value or Tailwind class\n    const isHexColor = color.startsWith('#');\n\n    // Generate Tailwind classes for non-hex colors\n    const getColorClasses = (property: string) => {\n        if (isHexColor) return '';\n        return {\n            text: `text-${color}`,\n            bg: `bg-${color}`,\n            border: `border-${color}`,\n            borderTop: `border-t-${color}`,\n            borderRight: `border-r-${color}`,\n        }[property] || '';\n    };\n\n    // Get inline styles for hex colors\n    const getColorStyle = (property: string) => {\n        if (!isHexColor) return {};\n        const styleMap: Record<string, string> = {\n            color: 'color',\n            backgroundColor: 'backgroundColor',\n            borderColor: 'borderColor',\n            borderTopColor: 'borderTopColor',\n            borderRightColor: 'borderRightColor',\n        };\n        return { [styleMap[property]]: color };\n    };\n\n    const sizeClasses = {\n        sm: 'w-4 h-4',\n        md: 'w-8 h-8',\n        lg: 'w-12 h-12',\n        xl: 'w-16 h-16',\n    };\n\n    const imageSizeClasses = {\n        sm: 'w-8 h-8',\n        md: 'w-12 h-12',\n        lg: 'w-16 h-16',\n        xl: 'w-20 h-20',\n    };\n\n    const textSizeClasses = {\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n        xl: 'text-lg',\n    };\n\n    const getImageEffectClasses = () => {\n        switch (imageEffect) {\n            case 'bounce':\n                return 'animate-bounce';\n            case 'spin':\n                return 'animate-spin';\n            case 'float':\n                return 'animate-pulse hover:animate-bounce';\n            case 'heartbeat':\n                return 'animate-ping';\n            default:\n                return 'animate-pulse';\n        }\n    };\n\n    const ImageLoader = () => (\n        <div className=\"relative flex items-center justify-center\">\n            <img\n                src={image}\n                alt=\"Loading\"\n                className={`${imageSizeClasses[size]} object-contain ${getImageEffectClasses()}`}\n                style={{\n                    filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))',\n                    animationDuration: imageEffect === 'heartbeat' ? '1.5s' : imageEffect === 'bounce' ? '1s' : '2s',\n                }}\n            />\n            {imageEffect === 'float' && (\n                <div\n                    className={`absolute inset-0 ${imageSizeClasses[size]} rounded-full bg-gradient-to-r from-purple-400 to-blue-400 opacity-20 animate-ping`}\n                    style={{ animationDuration: '2s' }}\n                />\n            )}\n        </div>\n    );\n\n    const SpinnerLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} border-4 border-gray-200 rounded-full animate-spin ${\n                    !isHexColor ? getColorClasses('borderTop') : ''\n                }`}\n                style={isHexColor ? { borderTopColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-0 ${sizeClasses[size]} border-4 border-transparent rounded-full animate-spin ${\n                    !isHexColor ? getColorClasses('borderRight') : ''\n                }`}\n                style={isHexColor ? { borderRightColor: color, animationDirection: 'reverse', animationDuration: '0.75s' } : { animationDirection: 'reverse', animationDuration: '0.75s' }}\n            />\n        </div>\n    );\n\n    const DotsLoader = () => (\n        <div className=\"flex space-x-1\">\n            {[0, 1, 2].map((i) => (\n                <div\n                    key={i}\n                    className={`${size === 'sm' ? 'w-2 h-2' : size === 'md' ? 'w-3 h-3' : size === 'lg' ? 'w-4 h-4' : 'w-5 h-5'} rounded-full animate-bounce ${\n                        !isHexColor ? getColorClasses('bg') : ''\n                    }`}\n                    style={isHexColor ? {\n                        backgroundColor: color,\n                        animationDelay: `${i * 0.2}s`,\n                        animationDuration: '1.4s'\n                    } : {\n                        animationDelay: `${i * 0.2}s`,\n                        animationDuration: '1.4s'\n                    }}\n                />\n            ))}\n        </div>\n    );\n\n    const PulseLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} rounded-full animate-pulse ${\n                    !isHexColor ? getColorClasses('bg') : ''\n                }`}\n                style={isHexColor ? { backgroundColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-0 ${sizeClasses[size]} rounded-full animate-ping opacity-30 ${\n                    !isHexColor ? getColorClasses('bg') : ''\n                }`}\n                style={isHexColor ? { backgroundColor: color } : {}}\n            />\n        </div>\n    );\n\n    const BarsLoader = () => (\n        <div className=\"flex space-x-1 items-end\">\n            {[0, 1, 2, 3].map((i) => (\n                <div\n                    key={i}\n                    className={`${size === 'sm' ? 'w-1' : size === 'md' ? 'w-1.5' : size === 'lg' ? 'w-2' : 'w-2.5'} rounded-sm animate-pulse ${\n                        !isHexColor ? getColorClasses('bg') : ''\n                    }`}\n                    style={isHexColor ? {\n                        backgroundColor: color,\n                        height: `${20 + i * 10}px`,\n                        animationDelay: `${i * 0.15}s`,\n                        animationDuration: '1.2s'\n                    } : {\n                        height: `${20 + i * 10}px`,\n                        animationDelay: `${i * 0.15}s`,\n                        animationDuration: '1.2s'\n                    }}\n                />\n            ))}\n        </div>\n    );\n\n    const RippleLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} border-4 rounded-full animate-ping ${\n                    !isHexColor ? getColorClasses('border') : ''\n                }`}\n                style={isHexColor ? { borderColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-2 border-4 rounded-full animate-ping ${\n                    !isHexColor ? getColorClasses('border') : ''\n                }`}\n                style={isHexColor ? {\n                    borderColor: color,\n                    animationDelay: '0.5s'\n                } : {\n                    animationDelay: '0.5s'\n                }}\n            />\n        </div>\n    );\n\n    const getLoader = () => {\n        if (variant === 'image' && image) {\n            return <ImageLoader />;\n        }\n\n        switch (variant) {\n            case 'dots':\n                return <DotsLoader />;\n            case 'pulse':\n                return <PulseLoader />;\n            case 'bars':\n                return <BarsLoader />;\n            case 'ripple':\n                return <RippleLoader />;\n            default:\n                return <SpinnerLoader />;\n        }\n    };\n\n    const content = (\n        <div className={`flex flex-col items-center justify-center space-y-3 ${className}`}>\n            {getLoader()}\n            {text && (\n                <p\n                    className={`${textSizeClasses[size]} font-medium animate-pulse ${\n                        !isHexColor ? getColorClasses('text') : ''\n                    }`}\n                    style={isHexColor ? { color } : {}}\n                >\n                    {text}\n                </p>\n            )}\n        </div>\n    );\n\n    if (fullScreen) {\n        return (\n            <div className=\"fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50\">\n                {content}\n            </div>\n        );\n    }\n\n    return content;\n};\n\nexport default Loading;\n// Demo component to showcase different variants\nexport const LoadingDemo: React.FC = () => {\n    const [selectedColor, setSelectedColor] = React.useState('blue-500');\n    const [selectedVariant, setSelectedVariant] = React.useState<LoadingProps['variant']>('spinner');\n    const [selectedSize, setSelectedSize] = React.useState<LoadingProps['size']>('md');\n    const [showFullScreen, setShowFullScreen] = React.useState(false);\n\n    const colors = [\n        { name: 'Blue', value: 'blue-500', hex: '#3B82F6' },\n        { name: 'Purple', value: 'purple-500', hex: '#8B5CF6' },\n        { name: 'Green', value: 'green-500', hex: '#10B981' },\n        { name: 'Red', value: 'red-500', hex: '#EF4444' },\n        { name: 'Orange', value: 'orange-500', hex: '#F59E0B' },\n        { name: 'Pink', value: 'pink-500', hex: '#EC4899' },\n        { name: 'Indigo', value: 'indigo-500', hex: '#6366F1' },\n        { name: 'Teal', value: 'teal-500', hex: '#14B8A6' },\n    ];\n\n    const variants: LoadingProps['variant'][] = ['spinner', 'dots', 'pulse', 'bars', 'ripple'];\n    const sizes: LoadingProps['size'][] = ['sm', 'md', 'lg', 'xl'];\n\n    return (\n        <div className=\"p-8 max-w-4xl mx-auto\">\n            <h1 className=\"text-3xl font-bold text-gray-800 mb-8 text-center\">\n                Modern Loading Component\n            </h1>\n\n            <div className=\"bg-white rounded-xl shadow-lg p-6 mb-8\">\n                <h2 className=\"text-xl font-semibold text-gray-700 mb-4\">Customization</h2>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6\">\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Color</label>\n                        <div className=\"flex flex-wrap gap-2\">\n                            {colors.map((colorOption) => (\n                                <button\n                                    key={colorOption.value}\n                                    onClick={() => setSelectedColor(colorOption.value)}\n                                    className={`w-8 h-8 rounded-full border-2 transition-all ${\n                                        selectedColor === colorOption.value ? 'border-gray-400 scale-110' : 'border-gray-200'\n                                    }`}\n                                    style={{ backgroundColor: colorOption.hex }}\n                                    title={`${colorOption.name} (${colorOption.value})`}\n                                />\n                            ))}\n                        </div>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Variant</label>\n                        <select\n                            value={selectedVariant}\n                            onChange={(e) => setSelectedVariant(e.target.value as LoadingProps['variant'])}\n                            className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n                        >\n                            {variants.map((variant) => (\n                                <option key={variant} value={variant}>\n                                    {variant && (variant?.charAt(0).toUpperCase() + variant?.slice(1))}\n                                </option>\n                            ))}\n                        </select>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Size</label>\n                        <select\n                            value={selectedSize}\n                            onChange={(e) => setSelectedSize(e.target.value as LoadingProps['size'])}\n                            className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n                        >\n                            {sizes.map((size) => (\n                                <option key={size} value={size}>\n                                    {size?.toUpperCase()}\n                                </option>\n                            ))}\n                        </select>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Full Screen</label>\n                        <button\n                            onClick={() => setShowFullScreen(true)}\n                            className=\"w-full p-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors\"\n                        >\n                            Demo Full Screen\n                        </button>\n                    </div>\n                </div>\n\n                <div className=\"bg-gray-50 rounded-lg p-8 flex flex-col items-center justify-center min-h-32\">\n                    <Loading\n                        variant={selectedVariant}\n                        size={selectedSize}\n                        color={selectedColor}\n                        text=\"Loading...\"\n                    />\n                    <div className=\"mt-4 p-3 bg-white rounded-md shadow-sm\">\n                        <code className=\"text-sm text-gray-600\">\n                            color=\"{selectedColor}\"\n                        </code>\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"bg-white rounded-xl shadow-lg p-6\">\n                <h2 className=\"text-xl font-semibold text-gray-700 mb-4\">All Variants</h2>\n                <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6\">\n                    {variants.map((variant) => (\n                        <div key={variant} className=\"text-center\">\n                            <div className=\"bg-gray-50 rounded-lg p-4 flex items-center justify-center h-24 mb-2\">\n                                <Loading variant={variant} color={selectedColor} />\n                            </div>\n                            <p className=\"text-sm text-gray-600 capitalize\">{variant}</p>\n                        </div>\n                    ))}\n                </div>\n\n                <div className=\"mt-6 p-4 bg-blue-50 rounded-lg\">\n                    <h3 className=\"font-semibold text-blue-800 mb-2\">Usage Examples:</h3>\n                    <div className=\"space-y-2 text-sm\">\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Tailwind CSS class\"}</code><br/>\n                            <code>{`<Loading color=\"primary-500\" />`}</code>\n                        </div>\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Hex color\"}</code><br/>\n                            <code>{`<Loading color=\"#your-brand-color\" />`}</code>\n                        </div>\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Custom Tailwind color\"}</code><br/>\n                            <code>{`<Loading color=\"emerald-400\" variant=\"dots\" />`}</code>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            {showFullScreen && (\n                <Loading\n                    variant={selectedVariant}\n                    size={selectedSize}\n                    color={selectedColor}\n                    text=\"Loading in full screen...\"\n                    fullScreen\n                />\n            )}\n\n            {showFullScreen && (\n                <button\n                    onClick={() => setShowFullScreen(false)}\n                    className=\"fixed top-4 right-4 z-50 bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors\"\n                >\n                    Close Full Screen\n                </button>\n            )}\n        </div>\n    );\n};"],"names":["Loading","_a","_b","size","_c","variant","_d","color","_e","fullScreen","text","_f","className","image","_g","imageEffect","isHexColor","startsWith","getColorClasses","property","concat","bg","border","borderTop","borderRight","sizeClasses","sm","md","lg","xl","imageSizeClasses","getImageEffectClasses","ImageLoader","_jsxs","children","_jsx","src","alt","style","filter","animationDuration","SpinnerLoader","borderTopColor","borderRightColor","animationDirection","DotsLoader","map","i","backgroundColor","animationDelay","PulseLoader","BarsLoader","height","RippleLoader","borderColor","content","getLoader","LoadingDemo","React","useState","selectedColor","setSelectedColor","selectedVariant","setSelectedVariant","selectedSize","setSelectedSize","showFullScreen","setShowFullScreen","variants","name","value","hex","colorOption","onClick","title","onChange","e","target","charAt","toUpperCase","slice"],"mappings":"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"}

package/dist/esm/components/Modal/Modal.mjs

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useRef as l,useEffect as i}from"react";import{X as r}from"lucide-react";var o=function(n){var o=n.isOpen,a=n.onClose,s=n.title,c=n.children,d=n.size,u=void 0===d?"md":d,m=n.position,f=void 0===m?"right":m,h=n.showCloseButton,g=void 0===h||h,x=n.closeOnOverlayClick,p=void 0!==x&&x,v=n.closeOnEscape,b=void 0===v||v,y=n.className,N=void 0===y?"":y,w=n.overlayClassName,C=void 0===w?"":w,k=n.contentClassName,z=void 0===k?"":k,S=n.headerClassName,j=void 0===S?"":S,E=n.footer,O=n.footerClassName,L=void 0===O?"":O,M=n.maxHeight,T=void 0!==M&&M,F=l(null),H=l(null);i((function(){var e;return o?(H.current=document.activeElement,null===(e=F.current)||void 0===e||e.focus(),document.body.style.overflow="hidden"):(document.body.style.overflow="unset",H.current&&H.current.focus()),function(){document.body.style.overflow="unset"}}),[o]),i((function(){var e=function(e){"Escape"===e.key&&b&&a()};return o&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[o,b,a]);var I=function(e){e.target===e.currentTarget&&p&&"full"!==u&&a()};return o?e("div",{className:"fixed inset-0 z-50 ".concat(C),role:"dialog","aria-modal":"true","aria-labelledby":s?"modal-title":void 0,children:["full"!==u&&t("div",{className:"fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-700",onClick:I}),t("div",{className:"fixed inset-0 flex ".concat("p-0"," ").concat(function(){if("full"===u)return"items-start justify-start";return{left:"items-start justify-start",right:"items-start justify-end",center:"items-center justify-center"}[f]}()),onClick:I,children:e("div",{ref:F,tabIndex:-1,className:"\n            relative w-full ".concat({xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl",full:"w-full h-full"}[u]," bg-white shadow-2xl transform transition-all duration-700 ease-out flex flex-col\n            ").concat("full"===u?"h-full max-h-screen overflow-hidden":"left"===f||"right"===f?"h-full ".concat(T?"max-h-screen":""):"".concat(T?"max-h-[90vh] overflow-hidden":""),"\n            ").concat("full"===u?"animate-in fade-in-0":"center"===f?"animate-in fade-in-0 zoom-in-95":"left"===f?"animate-in slide-in-from-left-full":"animate-in slide-in-from-right-full","\n            ").concat(N,"\n          "),onClick:function(e){return e.stopPropagation()},children:[(s||g)&&e("div",{className:"flex items-center justify-between px-6 py-3 border-b border-gray-200 flex-shrink-0 ".concat(j),children:[s&&t("h2",{id:"modal-title",className:"text-xl font-semibold text-gray-900 truncate pr-4",children:s}),g&&t("button",{onClick:a,className:"flex items-center justify-center w-8 h-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2","aria-label":"Close modal",children:t(r,{size:20})})]}),t("div",{className:"flex-1 min-h-0 overflow-y-auto ".concat(z),children:t("div",T&&("left"===f||"right"===f)||"full"===u?{className:"p-6 min-h-0 flex-1",children:c}:{className:"p-6",children:c})}),E&&t("div",{className:"px-6 py-4 border-t border-gray-200  flex-shrink-0 ".concat(""," ").concat(L),children:E})]})})]}):null},a=function(){var l=n.useState(!1),i=l[0],r=l[1],a=n.useState("left"),s=a[0],c=a[1],d=n.useState("md"),u=d[0],m=d[1],f=e("div",{className:"flex justify-end space-x-3",children:[t("button",{onClick:function(){return r(!1)},className:"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200",children:"Cancel"}),t("button",{onClick:function(){return r(!1)},className:"px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200",children:"Save Changes"})]});return e("div",{className:"p-8 space-y-4",children:[e("div",{className:"flex flex-wrap gap-4 mb-6",children:[e("div",{children:[t("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Position"}),e("select",{value:s,onChange:function(e){return c(e.target.value)},className:"border border-gray-300 rounded-md px-3 py-2 text-sm",disabled:"full"===u,children:[t("option",{value:"left",children:"Left"}),t("option",{value:"right",children:"Right"}),t("option",{value:"center",children:"Center"})]})]}),e("div",{children:[t("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Size"}),e("select",{value:u,onChange:function(e){return m(e.target.value)},className:"border border-gray-300 rounded-md px-3 py-2 text-sm",children:[t("option",{value:"xs",children:"Extra Small"}),t("option",{value:"sm",children:"Small"}),t("option",{value:"md",children:"Medium"}),t("option",{value:"lg",children:"Large"}),t("option",{value:"xl",children:"Extra Large"}),t("option",{value:"2xl",children:"2X Large"}),t("option",{value:"full",children:"Full Screen"})]})]})]}),t("button",{onClick:function(){return r(!0)},className:"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium",children:"Open Modal"}),t(o,{isOpen:i,onClose:function(){return r(!1)},title:"Example Modal",size:u,position:s,footer:f,maxHeight:"center"!==s,children:e("div",{className:"space-y-4",children:[t("p",{className:"text-gray-600",children:"This is an example of the multipurpose modal component. It supports different sizes, positions, and configurations."}),e("div",{className:"bg-gray-50 p-4 rounded-lg",children:[t("h4",{className:"font-medium text-gray-900 mb-2",children:"Features:"}),e("ul",{className:"text-sm text-gray-600 space-y-1 list-disc list-inside",children:[t("li",{children:"Multiple sizes (xs, sm, md, lg, xl, 2xl, full screen)"}),t("li",{children:"Three positions (left, right, center)"}),t("li",{children:"Customizable styling with className props"}),t("li",{children:"Keyboard navigation and accessibility"}),t("li",{children:"Click outside to close (disabled for full screen)"}),t("li",{children:"Smooth animations"}),t("li",{children:"Optional footer with actions"}),t("li",{children:"Full screen mode without margins or border radius"})]})]}),("left"===s||"right"===s||"full"===u)&&t("div",{className:"space-y-2",children:Array.from({length:20},(function(t,n){return e("p",{className:"text-gray-600",children:["This is paragraph ",n+1," to demonstrate scrolling in side panels","full"===u?" and full screen mode":"","."]},n)}))})]})})]})};export{a as ModalExample,o as default};
+//# sourceMappingURL=Modal.mjs.map

package/dist/esm/components/Modal/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\ntype ModalSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\ntype ModalPosition = \"left\" | \"right\" | \"center\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  size?: ModalSize;\n  position?: ModalPosition;\n  showCloseButton?: boolean;\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n  className?: string;\n  overlayClassName?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  footer?: React.ReactNode;\n  footerClassName?: string;\n  maxHeight?: boolean;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  children,\n  size = \"md\",\n  position = \"right\",\n  showCloseButton = true,\n  closeOnOverlayClick = false,\n  closeOnEscape = true,\n  className = \"\",\n  overlayClassName = \"\",\n  contentClassName = \"\",\n  headerClassName = \"\",\n  footer,\n  footerClassName = \"\",\n  maxHeight = false,\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      // Store the previously focused element\n      previousFocusRef.current = document.activeElement as HTMLElement;\n\n      // Focus the modal\n      modalRef.current?.focus();\n\n      // Prevent body scroll\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Restore body scroll\n      document.body.style.overflow = \"unset\";\n\n      // Restore focus to previously focused element\n      if (previousFocusRef.current) {\n        previousFocusRef.current.focus();\n      }\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && closeOnEscape) {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, closeOnEscape, onClose]);\n\n  const handleOverlayClick = (event: React.MouseEvent) => {\n    if (\n      event.target === event.currentTarget &&\n      closeOnOverlayClick &&\n      size !== \"full\"\n    ) {\n      onClose();\n    }\n  };\n\n  const getSizeClasses = (): string => {\n    const sizeMap: Record<ModalSize, string> = {\n      xs: \"max-w-xs\",\n      sm: \"max-w-sm\",\n      md: \"max-w-md\",\n      lg: \"max-w-lg\",\n      xl: \"max-w-xl\",\n      \"2xl\": \"max-w-2xl\",\n      full: \"w-full h-full\",\n    };\n    return sizeMap[size];\n  };\n\n  const getPositionClasses = (): string => {\n    if (size === \"full\") {\n      return \"items-start justify-start\";\n    }\n\n    const positionMap: Record<ModalPosition, string> = {\n      left: \"items-start justify-start\",\n      right: \"items-start justify-end\",\n      center: \"items-center justify-center\",\n    };\n    return positionMap[position];\n  };\n\n  const getModalPositionClasses = (): string => {\n    if (size === \"full\") {\n      return \"h-full max-h-screen overflow-hidden\";\n    }\n\n    if (position === \"left\" || position === \"right\") {\n      return `h-full ${maxHeight ? \"max-h-screen\" : \"\"}`;\n    }\n    return `${maxHeight ? \"max-h-[90vh] overflow-hidden\" : \"\"}`;\n  };\n\n  const getContainerPadding = (): string => {\n    return size === \"full\" ? \"p-0\" : \"p-0\";\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className={`fixed inset-0 z-50 ${overlayClassName}`}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={title ? \"modal-title\" : undefined}\n    >\n      {/* Backdrop - Hidden for full screen */}\n      {size !== \"full\" && (\n        <div\n          className=\"fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-700\"\n          onClick={handleOverlayClick}\n        />\n      )}\n\n      {/* Modal Container */}\n      <div\n        className={`fixed inset-0 flex ${getContainerPadding()} ${getPositionClasses()}`}\n        onClick={handleOverlayClick}\n      >\n        {/* Modal Content */}\n        <div\n          ref={modalRef}\n          tabIndex={-1}\n          className={`\n            relative w-full ${getSizeClasses()} bg-white shadow-2xl transform transition-all duration-700 ease-out flex flex-col\n            ${getModalPositionClasses()}\n            ${\n              size === \"full\"\n                ? \"animate-in fade-in-0\"\n                : position === \"center\"\n                  ? \"animate-in fade-in-0 zoom-in-95\"\n                  : position === \"left\"\n                    ? \"animate-in slide-in-from-left-full\"\n                    : \"animate-in slide-in-from-right-full\"\n            }\n            ${className}\n          `}\n          onClick={(e) => e.stopPropagation()}\n        >\n          {/* Header */}\n          {(title || showCloseButton) && (\n            <div\n              className={`flex items-center justify-between px-6 py-3 border-b border-gray-200 flex-shrink-0 ${headerClassName}`}\n            >\n              {title && (\n                <h2\n                  id=\"modal-title\"\n                  className=\"text-xl font-semibold text-gray-900 truncate pr-4\"\n                >\n                  {title}\n                </h2>\n              )}\n              {showCloseButton && (\n                <button\n                  onClick={onClose}\n                  className=\"flex items-center justify-center w-8 h-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n                  aria-label=\"Close modal\"\n                >\n                  <X size={20} />\n                </button>\n              )}\n            </div>\n          )}\n\n          {/* Content */}\n          <div className={`flex-1 min-h-0 overflow-y-auto ${contentClassName}`}>\n            {(maxHeight && (position === \"left\" || position === \"right\")) ||\n            size === \"full\" ? (\n              <div className=\"p-6 min-h-0 flex-1\">{children}</div>\n            ) : (\n              <div className=\"p-6\">{children}</div>\n            )}\n          </div>\n\n          {/* Footer */}\n          {footer && (\n            <div\n              className={`px-6 py-4 border-t border-gray-200  flex-shrink-0 ${size === \"full\" ? \"\" : \"\"} ${footerClassName}`}\n            >\n              {footer}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Modal;\n\nexport const ModalExample: React.FC = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [position, setPosition] = React.useState<ModalPosition>(\"left\");\n  const [size, setSize] = React.useState<ModalSize>(\"md\");\n\n  const footer = (\n    <div className=\"flex justify-end space-x-3\">\n      <button\n        onClick={() => setIsOpen(false)}\n        className=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200\"\n      >\n        Cancel\n      </button>\n      <button\n        onClick={() => setIsOpen(false)}\n        className=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200\"\n      >\n        Save Changes\n      </button>\n    </div>\n  );\n\n  return (\n    <div className=\"p-8 space-y-4\">\n      <div className=\"flex flex-wrap gap-4 mb-6\">\n        <div>\n          <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n            Position\n          </label>\n          <select\n            value={position}\n            onChange={(e) => setPosition(e.target.value as ModalPosition)}\n            className=\"border border-gray-300 rounded-md px-3 py-2 text-sm\"\n            disabled={size === \"full\"}\n          >\n            <option value=\"left\">Left</option>\n            <option value=\"right\">Right</option>\n            <option value=\"center\">Center</option>\n          </select>\n        </div>\n\n        <div>\n          <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n            Size\n          </label>\n          <select\n            value={size}\n            onChange={(e) => setSize(e.target.value as ModalSize)}\n            className=\"border border-gray-300 rounded-md px-3 py-2 text-sm\"\n          >\n            <option value=\"xs\">Extra Small</option>\n            <option value=\"sm\">Small</option>\n            <option value=\"md\">Medium</option>\n            <option value=\"lg\">Large</option>\n            <option value=\"xl\">Extra Large</option>\n            <option value=\"2xl\">2X Large</option>\n            <option value=\"full\">Full Screen</option>\n          </select>\n        </div>\n      </div>\n\n      <button\n        onClick={() => setIsOpen(true)}\n        className=\"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium\"\n      >\n        Open Modal\n      </button>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Example Modal\"\n        size={size}\n        position={position}\n        footer={footer}\n        maxHeight={position !== \"center\"}\n      >\n        <div className=\"space-y-4\">\n          <p className=\"text-gray-600\">\n            This is an example of the multipurpose modal component. It supports\n            different sizes, positions, and configurations.\n          </p>\n\n          <div className=\"bg-gray-50 p-4 rounded-lg\">\n            <h4 className=\"font-medium text-gray-900 mb-2\">Features:</h4>\n            <ul className=\"text-sm text-gray-600 space-y-1 list-disc list-inside\">\n              <li>Multiple sizes (xs, sm, md, lg, xl, 2xl, full screen)</li>\n              <li>Three positions (left, right, center)</li>\n              <li>Customizable styling with className props</li>\n              <li>Keyboard navigation and accessibility</li>\n              <li>Click outside to close (disabled for full screen)</li>\n              <li>Smooth animations</li>\n              <li>Optional footer with actions</li>\n              <li>Full screen mode without margins or border radius</li>\n            </ul>\n          </div>\n\n          {(position === \"left\" || position === \"right\" || size === \"full\") && (\n            <div className=\"space-y-2\">\n              {Array.from({ length: 20 }, (_, i) => (\n                <p key={i} className=\"text-gray-600\">\n                  This is paragraph {i + 1} to demonstrate scrolling in side\n                  panels{size === \"full\" ? \" and full screen mode\" : \"\"}.\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      </Modal>\n    </div>\n  );\n};\n"],"names":["Modal","_a","isOpen","onClose","title","children","_b","size","_c","position","_d","showCloseButton","_e","closeOnOverlayClick","_f","closeOnEscape","_g","className","_h","overlayClassName","_j","contentClassName","_k","headerClassName","footer","_l","footerClassName","_m","maxHeight","modalRef","useRef","previousFocusRef","useEffect","current","document","activeElement","focus","body","style","overflow","handleEscape","event","key","addEventListener","removeEventListener","handleOverlayClick","target","currentTarget","_jsxs","concat","role","undefined","_jsx","onClick","left","right","center","getPositionClasses","ref","tabIndex","xs","sm","md","lg","xl","full","e","stopPropagation","id","X","ModalExample","React","useState","setIsOpen","setPosition","setSize","value","onChange","disabled","Array","from","length","_","i"],"mappings":"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"}