pillardash-ui-react 0.1.131 → 0.1.138

package/dist/cjs/components/Form/CheckBox/CheckBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBox.js","sources":["../../../../../src/components/Form/CheckBox/CheckBox.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from \"react\";\n\nexport type CheckBoxProps = {\n  variant?: \"check\" | \"dot\" | \"toggle\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean) => void;\n  label?: string | ReactNode;\n  labelPosition?: \"left\" | \"right\";\n  name?: string; // For radio grouping\n  value?: string; // For radio value\n  id?: string;\n  className?: string;\n  error?: string;\n  helpText?: string;\n  required?: boolean;\n  indeterminate?: boolean; // For partially checked state\n};\n\nexport type RadioGroupProps = {\n  name: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  options: Array<{\n    value: string;\n    label: string | ReactNode;\n    disabled?: boolean;\n  }>;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  error?: string;\n  helpText?: string;\n  required?: boolean;\n  label?: string;\n  direction?: \"horizontal\" | \"vertical\";\n};\n\nconst CheckBox = ({\n  variant = \"check\",\n  size = \"md\",\n  checked = false,\n  disabled = false,\n  onChange,\n  label,\n  labelPosition = \"right\",\n  name,\n  value,\n  id,\n  className = \"\",\n  error,\n  helpText,\n  required = false,\n  indeterminate = false,\n}: CheckBoxProps) => {\n  const [isChecked, setIsChecked] = useState(checked);\n  const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);\n\n  // Sync internal state with props\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    setIsIndeterminate(indeterminate);\n  }, [indeterminate]);\n\n  const handleChange = () => {\n    if (disabled) return;\n\n    const newValue = !isChecked;\n    setIsChecked(newValue);\n    setIsIndeterminate(false);\n    onChange?.(newValue);\n  };\n\n  // Size classes\n  const sizeClasses = {\n    sm: {\n      container: \"h-4 w-4\",\n      toggle: \"w-7 h-4\",\n      toggleCircle: \"h-3 w-3\",\n      text: \"text-sm\",\n    },\n    md: {\n      container: \"h-5 w-5\",\n      toggle: \"w-9 h-5\",\n      toggleCircle: \"h-4 w-4\",\n      text: \"text-base\",\n    },\n    lg: {\n      container: \"h-6 w-6\",\n      toggle: \"w-12 h-6\",\n      toggleCircle: \"h-5 w-5\",\n      text: \"text-lg\",\n    },\n  };\n\n  const checkboxId =\n    id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;\n\n  // Render different variants\n  const renderCheckBox = () => {\n    if (variant === \"toggle\") {\n      return (\n        <div\n          className={`relative rounded-full transition-colors duration-200 ${sizeClasses[size].toggle} ${\n            isChecked ? \"bg-primary\" : \"bg-gray-300\"\n          } ${disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    ${error ? \"ring-2 ring-red-300\" : \"\"}`}\n          onClick={handleChange}\n        >\n          <div\n            className={`absolute top-0.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${sizeClasses[size].toggleCircle} ${\n              isChecked ? \"translate-x-full\" : \"translate-x-0.5\"\n            }`}\n          />\n          <input\n            type=\"checkbox\"\n            id={checkboxId}\n            name={name}\n            value={value}\n            checked={isChecked}\n            onChange={handleChange}\n            disabled={disabled}\n            className=\"sr-only\"\n            required={required}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"relative\">\n        <input\n          type={variant === \"dot\" ? \"radio\" : \"checkbox\"}\n          id={checkboxId}\n          name={name}\n          value={value}\n          checked={isChecked}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          className=\"sr-only\"\n        />\n        <div\n          className={`${sizeClasses[size].container} ${\n            variant === \"check\" ? \"rounded-md\" : \"rounded-full\"\n          } flex items-center justify-center border-2 transition-all duration-200 ${\n            isChecked || isIndeterminate\n              ? \"border-primary bg-primary\"\n              : error\n                ? \"border-red-300 bg-red-50\"\n                : \"border-gray-300 bg-white hover:border-gray-400\"\n          } ${disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\"}\n                    focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2`}\n          onClick={handleChange}\n        >\n          {/* Check mark */}\n          {isChecked && variant === \"check\" && (\n            <svg\n              className=\"h-3 w-3 text-white\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              strokeWidth={3}\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                d=\"M5 13l4 4L19 7\"\n              />\n            </svg>\n          )}\n\n          {/* Indeterminate state */}\n          {isIndeterminate && variant === \"check\" && (\n            <div className=\"h-0.5 w-2.5 bg-white rounded-full\" />\n          )}\n\n          {/* Radio dot */}\n          {isChecked && variant === \"dot\" && (\n            <div className=\"h-1.5 w-1.5 rounded-full bg-white\" />\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div>\n      <div className={`flex items-start gap-2 ${className}`}>\n        {label && labelPosition === \"left\" && (\n          <label\n            htmlFor={checkboxId}\n            className={`${sizeClasses[size].text} ${\n              disabled\n                ? \"text-gray-400\"\n                : error\n                  ? \"text-red-600\"\n                  : \"text-gray-700\"\n            } cursor-pointer select-none`}\n          >\n            {label}\n            {required && <span className=\"text-red-500 ml-1\">*</span>}\n          </label>\n        )}\n\n        <div className=\"flex flex-col\">\n          {renderCheckBox()}\n\n          {/* Error message */}\n          {error && (\n            <p className=\"mt-1 text-xs text-red-600 flex items-center\">\n              <svg\n                className=\"w-3 h-3 mr-1\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n              {error}\n            </p>\n          )}\n        </div>\n\n        {label && labelPosition === \"right\" && (\n          <label\n            htmlFor={checkboxId}\n            className={`${sizeClasses[size].text} ${\n              disabled\n                ? \"text-gray-400\"\n                : error\n                  ? \"text-red-600\"\n                  : \"text-gray-700\"\n            } cursor-pointer select-none`}\n          >\n            {label}\n            {required && <span className=\"text-red-500 ml-1\">*</span>}\n          </label>\n        )}\n      </div>\n      {/* Helper text */}\n      {helpText && !error && (\n        <p className=\"mt-1 text-xs text-gray-500\">{helpText}</p>\n      )}\n    </div>\n  );\n};\n\n// RadioGroup component for managing radio buttons\nconst RadioGroup = ({\n  name,\n  value,\n  onChange,\n  options,\n  size = \"md\",\n  className = \"\",\n  error,\n  helpText,\n  required = false,\n  label,\n  direction = \"vertical\",\n}: RadioGroupProps) => {\n  const handleChange = (optionValue: string) => {\n    onChange?.(optionValue);\n  };\n\n  return (\n    <div className={`space-y-2 ${className}`}>\n      {label && (\n        <label className=\"block text-sm font-medium text-gray-700\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </label>\n      )}\n\n      <div\n        className={`flex ${direction === \"horizontal\" ? \"flex-row gap-6\" : \"flex-col gap-2\"}`}\n      >\n        {options.map((option) => (\n          <CheckBox\n            key={option.value}\n            variant=\"dot\"\n            size={size}\n            name={name}\n            value={option.value}\n            checked={value === option.value}\n            onChange={() => handleChange(option.value)}\n            label={option.label}\n            disabled={option.disabled}\n            error={error}\n            required={required}\n          />\n        ))}\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <p className=\"text-xs text-red-600 flex items-center\">\n          <svg className=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n            <path\n              fillRule=\"evenodd\"\n              d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n          {error}\n        </p>\n      )}\n\n      {/* Helper text */}\n      {helpText && !error && (\n        <p className=\"text-xs text-gray-500\">{helpText}</p>\n      )}\n    </div>\n  );\n};\n\nfunction CheckBoxDemo() {\n  const [selectedValue, setSelectedValue] = useState(\"option1\");\n  const [formData, setFormData] = useState({\n    terms: false,\n    newsletter: true,\n    notifications: false,\n  });\n\n  return (\n    <div className=\"min-h-screen bg-gray-50 p-8\">\n      <div className=\"mx-auto max-w-2xl space-y-8\">\n        <div className=\"rounded-lg bg-white p-6 shadow\">\n          <h2 className=\"mb-6 text-xl font-semibold\">\n            CheckBox Component Demo\n          </h2>\n\n          <div className=\"space-y-8\">\n            {/* Check variant */}\n            <div className=\"space-y-4\">\n              <h3 className=\"font-medium\">Check Variant</h3>\n              <div className=\"flex flex-wrap items-center gap-6\">\n                <CheckBox variant=\"check\" size=\"sm\" label=\"Small\" />\n                <CheckBox variant=\"check\" size=\"md\" checked label=\"Medium\" />\n                <CheckBox variant=\"check\" size=\"lg\" label=\"Large\" />\n                <CheckBox variant=\"check\" disabled label=\"Disabled\" />\n                <CheckBox variant=\"check\" indeterminate label=\"Indeterminate\" />\n              </div>\n            </div>\n\n            {/* Radio Group */}\n            <div className=\"space-y-4\">\n              <h3 className=\"font-medium\">Radio Group (Dot Variant)</h3>\n              <RadioGroup\n                name=\"demo-radio\"\n                value={selectedValue}\n                onChange={setSelectedValue}\n                label=\"Choose an option\"\n                options={[\n                  { value: \"option1\", label: \"Option 1\" },\n                  { value: \"option2\", label: \"Option 2\" },\n                  { value: \"option3\", label: \"Option 3\" },\n                  {\n                    value: \"option4\",\n                    label: \"Option 4 (Disabled)\",\n                    disabled: true,\n                  },\n                ]}\n                helpText=\"Select one option from the list\"\n              />\n            </div>\n\n            {/* Toggle variant */}\n            <div className=\"space-y-4\">\n              <h3 className=\"font-medium\">Toggle Variant</h3>\n              <div className=\"flex flex-wrap items-center gap-6\">\n                <CheckBox variant=\"toggle\" size=\"sm\" label=\"Small\" />\n                <CheckBox variant=\"toggle\" size=\"md\" checked label=\"Medium\" />\n                <CheckBox variant=\"toggle\" size=\"lg\" label=\"Large\" />\n                <CheckBox variant=\"toggle\" disabled label=\"Disabled\" />\n              </div>\n            </div>\n\n            {/* Form sample */}\n            <div className=\"space-y-4 border-t pt-6\">\n              <h3 className=\"font-medium\">Sample Form</h3>\n              <div className=\"space-y-4\">\n                <CheckBox\n                  variant=\"check\"\n                  checked={formData.terms}\n                  onChange={(checked) =>\n                    setFormData({ ...formData, terms: checked })\n                  }\n                  label=\"I accept the terms and conditions\"\n                  required\n                  error={\n                    !formData.terms ? \"Please accept terms to continue\" : \"\"\n                  }\n                />\n\n                <CheckBox\n                  variant=\"toggle\"\n                  checked={formData.newsletter}\n                  onChange={(checked) =>\n                    setFormData({ ...formData, newsletter: checked })\n                  }\n                  label=\"Subscribe to newsletter\"\n                  helpText=\"Get updates about new features and releases\"\n                />\n\n                <CheckBox\n                  variant=\"check\"\n                  checked={formData.notifications}\n                  onChange={(checked) =>\n                    setFormData({ ...formData, notifications: checked })\n                  }\n                  label=\"Enable push notifications\"\n                />\n\n                <div className=\"pt-4\">\n                  <button\n                    className=\"rounded-md bg-primary px-4 py-2 text-white transition-colors hover:bg-primary/90 disabled:opacity-50\"\n                    disabled={!formData.terms}\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default CheckBox;\nexport { CheckBoxDemo, RadioGroup };\n"],"names":["CheckBox","_a","_b","variant","_c","size","_d","checked","_e","disabled","onChange","label","_f","labelPosition","name","value","id","_g","className","error","helpText","_h","required","_j","indeterminate","_k","useState","isChecked","setIsChecked","_l","isIndeterminate","setIsIndeterminate","useEffect","handleChange","newValue","sizeClasses","sm","container","toggle","toggleCircle","text","md","lg","checkboxId","Math","random","toString","substr","_jsxs","children","concat","htmlFor","_jsx","onClick","type","fill","viewBox","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","fillRule","clipRule","RadioGroup","options","direction","map","option","optionValue","selectedValue","setSelectedValue","terms","newsletter","notifications","formData","setFormData","__assign"],"mappings":"gLAsCMA,EAAW,SAACC,GAChB,IAAAC,EAAAD,EAAAE,QAAAA,OAAO,IAAAD,EAAG,UACVE,EAAAH,EAAAI,KAAAA,aAAO,KAAID,EACXE,EAAAL,EAAAM,QAAAA,OAAO,IAAAD,GAAQA,EACfE,EAAAP,EAAAQ,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAQT,EAAAS,SACRC,EAAKV,EAAAU,MACLC,EAAAX,EAAAY,cAAAA,OAAa,IAAAD,EAAG,QAAOA,EACvBE,EAAIb,EAAAa,KACJC,EAAKd,EAAAc,MACLC,EAAEf,EAAAe,GACFC,EAAAhB,EAAAiB,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAKlB,EAAAkB,MACLC,EAAQnB,EAAAmB,SACRC,EAAApB,EAAAqB,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAAtB,EAAAuB,cAAAA,OAAa,IAAAD,GAAQA,EAEfE,EAA4BC,EAAAA,SAASnB,GAApCoB,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACxBI,EAAwCH,EAAAA,SAASF,GAAhDM,EAAeD,EAAA,GAAEE,EAAkBF,EAAA,GAG1CG,EAAAA,WAAU,WACRJ,EAAarB,EACf,GAAG,CAACA,IAEJyB,EAAAA,WAAU,WACRD,EAAmBP,EACrB,GAAG,CAACA,IAEJ,IAAMS,EAAe,WACnB,IAAIxB,EAAJ,CAEA,IAAMyB,GAAYP,EAClBC,EAAaM,GACbH,GAAmB,GACnBrB,SAAAA,EAAWwB,EALG,CAMhB,EAGMC,EAAc,CAClBC,GAAI,CACFC,UAAW,UACXC,OAAQ,UACRC,aAAc,UACdC,KAAM,WAERC,GAAI,CACFJ,UAAW,UACXC,OAAQ,UACRC,aAAc,UACdC,KAAM,aAERE,GAAI,CACFL,UAAW,UACXC,OAAQ,WACRC,aAAc,UACdC,KAAM,YAIJG,EACJ3B,GAAM,mBAAY4B,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,IA0FzD,OACEC,EAAAA,KAAA,MAAA,CAAAC,SAAA,CACED,EAAAA,KAAA,MAAA,CAAK9B,UAAW,0BAAAgC,OAA0BhC,GAAW+B,SAAA,CAClDtC,GAA2B,SAAlBE,GACRmC,EAAAA,KAAA,QAAA,CACEG,QAASR,EACTzB,UAAW,GAAAgC,OAAGf,EAAY9B,GAAMmC,iBAC9B/B,EACI,gBACAU,EACE,eACA,gBAAe,yCAGtBR,EACAW,GAAY8B,EAAAA,IAAA,OAAA,CAAMlC,UAAU,oBAAmB+B,SAAA,SAIpDD,OAAA,MAAA,CAAK9B,UAAU,gBAAe+B,SAAA,CAzGlB,WAAZ9C,EAEA6C,EAAAA,KAAA,MAAA,CACE9B,UAAW,wDAAAgC,OAAwDf,EAAY9B,GAAMiC,OAAM,KAAAY,OACzFvB,EAAY,aAAe,cAAa,KAAAuB,OACtCzC,EAAW,gCAAkC,iBAAgB,0BAAAyC,OACrD/B,EAAQ,sBAAwB,IAC5CkC,QAASpB,EAAYgB,SAAA,CAErBG,EAAAA,WACElC,UAAW,gGAAAgC,OAAgGf,EAAY9B,GAAMkC,aAAY,KAAAW,OACvIvB,EAAY,mBAAqB,qBAGrCyB,EAAAA,IAAA,QAAA,CACEE,KAAK,WACLtC,GAAI2B,EACJ7B,KAAMA,EACNC,MAAOA,EACPR,QAASoB,EACTjB,SAAUuB,EACVxB,SAAUA,EACVS,UAAU,UACVI,SAAUA,OAOhB0B,OAAA,MAAA,CAAK9B,UAAU,qBACbkC,MAAA,QAAA,CACEE,KAAkB,QAAZnD,EAAoB,QAAU,WACpCa,GAAI2B,EACJ7B,KAAMA,EACNC,MAAOA,EACPR,QAASoB,EACTjB,SAAUuB,EACVxB,SAAUA,EACVa,SAAUA,EACVJ,UAAU,YAEZ8B,cACE9B,UAAW,UAAGiB,EAAY9B,GAAMgC,UAAS,KAAAa,OAC3B,UAAZ/C,EAAsB,aAAe,eAAc,2EAAA+C,OAEnDvB,GAAaG,EACT,4BACAX,EACE,2BACA,iDAAgD,KAAA+B,OACpDzC,EAAW,gCAAkC,iBAAgB,kGAEjE4C,QAASpB,EAAYgB,SAAA,CAGpBtB,GAAyB,UAAZxB,GACZiD,EAAAA,WACElC,UAAU,qBACVqC,KAAK,OACLC,QAAQ,YACRC,OAAO,eACPC,YAAa,EAACT,SAEdG,EAAAA,YACEO,cAAc,QACdC,eAAe,QACfC,EAAE,qBAMP/B,GAA+B,UAAZ3B,GAClBiD,EAAAA,IAAA,MAAA,CAAKlC,UAAU,sCAIhBS,GAAyB,QAAZxB,GACZiD,EAAAA,IAAA,MAAA,CAAKlC,UAAU,4CA8BhBC,GACC6B,EAAAA,KAAA,IAAA,CAAG9B,UAAU,wDACXkC,EAAAA,IAAA,MAAA,CACElC,UAAU,eACVqC,KAAK,eACLC,QAAQ,YAAWP,SAEnBG,EAAAA,YACEU,SAAS,UACTD,EAAE,oHACFE,SAAS,cAGZ5C,QAKNR,GAA2B,UAAlBE,GACRmC,EAAAA,KAAA,QAAA,CACEG,QAASR,EACTzB,UAAW,GAAAgC,OAAGf,EAAY9B,GAAMmC,iBAC9B/B,EACI,gBACAU,EACE,eACA,gBAAe,+BACM8B,SAAA,CAE5BtC,EACAW,GAAY8B,EAAAA,IAAA,OAAA,CAAMlC,UAAU,oBAAmB+B,SAAA,YAKrD7B,IAAaD,GACZiC,EAAAA,IAAA,IAAA,CAAGlC,UAAU,sCAA8BE,MAInD,EAGM4C,EAAa,SAAC/D,OAClBa,EAAIb,EAAAa,KACJC,EAAKd,EAAAc,MACLL,EAAQT,EAAAS,SACRuD,EAAOhE,EAAAgE,QACP/D,EAAAD,EAAAI,KAAAA,OAAI,IAAAH,EAAG,OACPE,EAAAH,EAAAiB,UAAAA,OAAS,IAAAd,EAAG,KACZe,UACAC,aACAd,EAAAL,EAAAqB,SAAAA,OAAQ,IAAAhB,GAAQA,EAChBK,EAAKV,EAAAU,MACLH,cAAA0D,OAAS,IAAA1D,EAAG,WAAUA,EAMtB,OACEwC,EAAAA,KAAA,MAAA,CAAK9B,UAAW,aAAAgC,OAAahC,GAAW+B,SAAA,CACrCtC,GACCqC,EAAAA,KAAA,QAAA,CAAO9B,UAAU,oDACdP,EACAW,GAAY8B,EAAAA,IAAA,OAAA,CAAMlC,UAAU,oBAAmB+B,SAAA,SAIpDG,EAAAA,IAAA,MAAA,CACElC,UAAW,QAAAgC,OAAsB,eAAdgB,EAA6B,iBAAmB,kBAAkBjB,SAEpFgB,EAAQE,KAAI,SAACC,GAAW,OACvBhB,EAAAA,IAACpD,EAAQ,CAEPG,QAAQ,MACRE,KAAMA,EACNS,KAAMA,EACNC,MAAOqD,EAAOrD,MACdR,QAASQ,IAAUqD,EAAOrD,MAC1BL,SAAU,WAAM,OAxBJ2D,EAwBiBD,EAAOrD,WAvB5CL,SAAAA,EAAW2D,IADQ,IAACA,CAwBI,EAChB1D,MAAOyD,EAAOzD,MACdF,SAAU2D,EAAO3D,SACjBU,MAAOA,EACPG,SAAUA,GAVL8C,EAAOrD,MAFS,MAkB1BI,GACC6B,EAAAA,KAAA,IAAA,CAAG9B,UAAU,yCAAwC+B,SAAA,CACnDG,EAAAA,WAAKlC,UAAU,eAAeqC,KAAK,eAAeC,QAAQ,YAAWP,SACnEG,EAAAA,IAAA,OAAA,CACEU,SAAS,UACTD,EAAE,oHACFE,SAAS,cAGZ5C,KAKJC,IAAaD,GACZiC,EAAAA,SAAGlC,UAAU,wBAAuB+B,SAAE7B,MAI9C,uBAEA,WACQ,IAAAnB,EAAoCyB,EAAAA,SAAS,WAA5C4C,EAAarE,EAAA,GAAEsE,EAAgBtE,EAAA,GAChCC,EAA0BwB,EAAAA,SAAS,CACvC8C,OAAO,EACPC,YAAY,EACZC,eAAe,IAHVC,EAAQzE,EAAA,GAAE0E,OAMjB,OACExB,EAAAA,IAAA,MAAA,CAAKlC,UAAU,8BAA6B+B,SAC1CG,EAAAA,IAAA,MAAA,CAAKlC,UAAU,8BAA6B+B,SAC1CD,EAAAA,KAAA,MAAA,CAAK9B,UAAU,iCAAgC+B,SAAA,CAC7CG,EAAAA,IAAA,KAAA,CAAIlC,UAAU,6BAA4B+B,SAAA,4BAI1CD,EAAAA,KAAA,MAAA,CAAK9B,UAAU,YAAW+B,SAAA,CAExBD,EAAAA,KAAA,MAAA,CAAK9B,UAAU,YAAW+B,SAAA,CACxBG,EAAAA,IAAA,KAAA,CAAIlC,UAAU,cAAa+B,SAAA,kBAC3BD,EAAAA,KAAA,MAAA,CAAK9B,UAAU,oCAAmC+B,SAAA,CAChDG,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,QAAQE,KAAK,KAAKM,MAAM,UAC1CyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,QAAQE,KAAK,KAAKE,SAAO,EAACI,MAAM,WAClDyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,QAAQE,KAAK,KAAKM,MAAM,UAC1CyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,QAAQM,UAAQ,EAACE,MAAM,aACzCyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,QAAQqB,eAAa,EAACb,MAAM,wBAKlDqC,EAAAA,YAAK9B,UAAU,YAAW+B,SAAA,CACxBG,EAAAA,UAAIlC,UAAU,cAAa+B,SAAA,8BAC3BG,EAAAA,IAACY,EAAU,CACTlD,KAAK,aACLC,MAAOuD,EACP5D,SAAU6D,EACV5D,MAAM,mBACNsD,QAAS,CACP,CAAElD,MAAO,UAAWJ,MAAO,YAC3B,CAAEI,MAAO,UAAWJ,MAAO,YAC3B,CAAEI,MAAO,UAAWJ,MAAO,YAC3B,CACEI,MAAO,UACPJ,MAAO,sBACPF,UAAU,IAGdW,SAAS,uCAKb4B,OAAA,MAAA,CAAK9B,UAAU,YAAW+B,SAAA,CACxBG,MAAA,KAAA,CAAIlC,UAAU,cAAa+B,SAAA,mBAC3BD,OAAA,MAAA,CAAK9B,UAAU,oCAAmC+B,SAAA,CAChDG,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,SAASE,KAAK,KAAKM,MAAM,UAC3CyC,MAACpD,EAAQ,CAACG,QAAQ,SAASE,KAAK,KAAKE,SAAO,EAACI,MAAM,WACnDyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,SAASE,KAAK,KAAKM,MAAM,UAC3CyC,EAAAA,IAACpD,EAAQ,CAACG,QAAQ,SAASM,UAAQ,EAACE,MAAM,mBAK9CqC,OAAA,MAAA,CAAK9B,UAAU,0BAAyB+B,SAAA,CACtCG,EAAAA,IAAA,KAAA,CAAIlC,UAAU,cAAa+B,SAAA,gBAC3BD,EAAAA,KAAA,MAAA,CAAK9B,UAAU,YAAW+B,SAAA,CACxBG,EAAAA,IAACpD,EAAQ,CACPG,QAAQ,QACRI,QAASoE,EAASH,MAClB9D,SAAU,SAACH,GACT,OAAAqE,EAAWC,WAAAA,EAAAA,SAAA,CAAA,EAAMF,IAAUH,MAAOjE,IAAlC,EAEFI,MAAM,oCACNW,UAAQ,EACRH,MACGwD,EAASH,MAA4C,GAApC,oCAItBpB,MAACpD,EAAQ,CACPG,QAAQ,SACRI,QAASoE,EAASF,WAClB/D,SAAU,SAACH,GACT,OAAAqE,EAAWC,WAAAA,EAAAA,SAAA,CAAA,EAAMF,IAAUF,WAAYlE,IAAvC,EAEFI,MAAM,0BACNS,SAAS,gDAGXgC,MAACpD,EAAQ,CACPG,QAAQ,QACRI,QAASoE,EAASD,cAClBhE,SAAU,SAACH,GACT,OAAAqE,EAAWC,WAAAA,EAAAA,SAAA,CAAA,EAAMF,IAAUD,cAAenE,IAA1C,EAEFI,MAAM,8BAGRyC,EAAAA,IAAA,MAAA,CAAKlC,UAAU,OAAM+B,SACnBG,EAAAA,IAAA,SAAA,CACElC,UAAU,uGACVT,UAAWkE,EAASH,MAAKvB,SAAA,4BAY7C"}

package/dist/cjs/components/Form/FileUpload/FileUpload.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),r=require("react"),s=require("lucide-react"),a=require("../../Document/FileView.js");module.exports=function(n){var l=n.label,i=n.description,c=n.helperText,o=n.error,d=n.success,m=n.disabled,u=void 0!==m&&m,x=n.required,g=void 0!==x&&x,h=n.accept,f=n.multiple,p=void 0!==f&&f,v=n.placeholder,b=n.showProgress,y=void 0===b||b,j=n.className,N=void 0===j?"":j,_=n.id,w=n.maxFileSize,z=n.onFileChange,C=n.existingFiles,F=void 0===C?[]:C,D=n.direction,M=void 0===D?"col":D,k=n.replaceMode,q=e.__rest(n,["label","description","helperText","error","success","disabled","required","accept","multiple","placeholder","showProgress","className","id","maxFileSize","onFileChange","existingFiles","direction","replaceMode"]),A=r.useState([]),I=A[0],S=A[1],U=r.useState({}),B=U[0],E=U[1],T=r.useState(!1),P=T[0],R=T[1];null!=k||!p&&F.length;var V=function(t){if(t.target.files&&t.target.files.length>0){var r=Array.from(t.target.files),s=void 0;s=p?e.__spreadArray(e.__spreadArray([],I,!0),r,!0):[r[0]],S(s),y&&r.forEach((function(t){var r="".concat(t.name,"-").concat(t.size);E((function(t){var s;return e.__assign(e.__assign({},t),((s={})[r]=10,s))}));var s=setInterval((function(){E((function(t){var a,n=t[r]||0;return n>=100?(clearInterval(s),t):e.__assign(e.__assign({},t),((a={})[r]=Math.min(n+10,100),a))}))}),300)})),z(s)}},L=function(e){e.preventDefault(),u||R(!0)},O=function(e){e.preventDefault(),R(!1)},G=function(t){if(t.preventDefault(),R(!1),!u&&t.dataTransfer.files&&t.dataTransfer.files.length>0){var r=Array.from(t.dataTransfer.files),s=void 0;s=p?e.__spreadArray(e.__spreadArray([],I,!0),r,!0):[r[0]],S(s),y&&r.forEach((function(t){var r="".concat(t.name,"-").concat(t.size);E((function(t){var s;return e.__assign(e.__assign({},t),((s={})[r]=10,s))}));var s=setInterval((function(){E((function(t){var a,n=t[r]||0;return n>=100?(clearInterval(s),t):e.__assign(e.__assign({},t),((a={})[r]=Math.min(n+10,100),a))}))}),300)})),z(s)}},H=_||"file-upload-".concat(Math.random().toString(36).substr(2,9)),J=function(){if(!p){if(I.length>0){var e=I[0];return{name:e.name,size:e.size,type:e.type,file:e,uploadProgress:B["".concat(e.name,"-").concat(e.size)]||100}}if(F.length>0)return F[0]}return null}();return t.jsxs("div",{className:"space-y-4 ".concat(N),children:[l&&t.jsxs("label",{htmlFor:H,className:"block text-sm font-medium text-gray-700",children:[l,g&&t.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),i&&t.jsx("p",{className:"text-sm text-gray-600",children:i}),!p&&J?t.jsxs("div",{className:"space-y-2",children:[t.jsxs("div",{className:"flex items-center justify-between",children:[t.jsx("h4",{className:"text-sm font-medium text-gray-700",children:I.length>0?"New File":"Current File"}),t.jsx("button",{onClick:function(){var e;null===(e=document.getElementById(H))||void 0===e||e.click()},className:"text-sm text-blue-600 hover:text-blue-800 font-medium",disabled:u,children:"Replace"})]}),t.jsx(a,{file:J,onDelete:function(){S([]),E({}),z(null)},showUpdate:!1,showView:!0,showDelete:!0,layout:"list",className:"max-w-md"}),t.jsx("input",{id:H,type:"file",className:"hidden",onChange:V,accept:h,disabled:u,required:g})]}):p&&F.length>0?t.jsxs("div",{className:"space-y-4",children:[t.jsxs("div",{className:"mb-4",children:[t.jsxs("h4",{className:"text-sm font-medium text-gray-700 mb-2",children:["Current Files (",F.length,")"]}),F.map((function(e,r){return t.jsx("div",{className:"mb-2",children:t.jsx(a,{file:e,showDelete:!1,showUpdate:!1,layout:"list"})},e.id||r)}))]}),t.jsxs("div",{className:"\n              flex flex-".concat(M," gap-2 rounded-lg border-2 border-dashed p-8 text-center items-center\n              ").concat("row"===M?"justify-center":"","\n              ").concat(P?"border-blue-400 bg-blue-50":"border-gray-300","\n              ").concat(o?"border-red-300 bg-red-50":"","\n              ").concat(d?"border-green-300 bg-green-50":"","\n              ").concat(u?"opacity-50 cursor-not-allowed bg-gray-50":"cursor-pointer hover:border-gray-400","\n            "),onDragOver:L,onDragLeave:O,onDrop:G,onClick:function(){var e;return!u&&(null===(e=document.getElementById(H))||void 0===e?void 0:e.click())},children:[t.jsx(s.Upload,{size:24,className:"text-gray-400"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-sm font-medium ".concat(u?"text-gray-400":"text-blue-600 hover:underline"),children:v||"Add more files"}),t.jsx("p",{className:"text-gray-500 text-sm",children:"or drag and drop"}),t.jsxs("p",{className:"text-sm text-gray-500",children:["(Max. File size: ",w||"25"," MB)"]}),t.jsx("p",{className:"text-xs text-gray-400 mt-1",children:"Multiple files allowed"})]}),t.jsx("input",e.__assign({id:H,type:"file",className:"hidden",onChange:V,accept:h,multiple:p,disabled:u,required:g},q))]}),I.length>0&&t.jsxs("div",{className:"mt-4",children:[t.jsxs("div",{className:"flex items-center justify-between mb-2",children:[t.jsxs("h4",{className:"text-sm font-medium text-gray-700",children:["New Files (",I.length,")"]}),t.jsx("button",{onClick:function(){S([]),E({}),z(null)},className:"text-xs text-red-500 hover:text-red-700",disabled:u,children:"Remove All New Files"})]}),I.map((function(e,r){return t.jsx("div",{className:"mb-2",children:t.jsx(a,{file:{name:e.name,size:e.size,type:e.type,file:e,uploadProgress:B["".concat(e.name,"-").concat(e.size)]||100},onDelete:function(){var e=I.filter((function(e,t){return t!==r}));S(e),z(e.length>0?e:null)},showUpdate:!1,showView:!1,layout:"list"})},"".concat(e.name,"-").concat(e.size))}))]})]}):t.jsxs("div",{className:"\n              flex flex-".concat(M," gap-2 rounded-lg border-2 border-dashed p-8 text-center items-center\n              ").concat("row"===M?"justify-center":"","\n              ").concat(P?"border-blue-400 bg-blue-50":"border-gray-300","\n              ").concat(o?"border-red-300 bg-red-50":"","\n              ").concat(d?"border-green-300 bg-green-50":"","\n              ").concat(u?"opacity-50 cursor-not-allowed bg-gray-50":"cursor-pointer hover:border-gray-400","\n            "),onDragOver:L,onDragLeave:O,onDrop:G,onClick:function(){var e;return!u&&(null===(e=document.getElementById(H))||void 0===e?void 0:e.click())},children:[t.jsx(s.Upload,{size:24,className:"text-gray-400"}),t.jsxs("div",{children:[t.jsx("p",{className:"text-sm font-medium ".concat(u?"text-gray-400":"text-blue-600 hover:underline"),children:v||(!p&&F.length>0?"Replace file":F.length>0?"Add more files":"Click to Upload")}),t.jsx("p",{className:"text-gray-500 text-sm",children:"or drag and drop"}),t.jsxs("p",{className:"text-sm text-gray-500",children:["(Max. File size: ",w||"25"," MB)"]}),p?t.jsx("p",{className:"text-xs text-gray-400 mt-1",children:"Multiple files allowed"}):t.jsx("p",{className:"text-xs text-gray-400 mt-1",children:"Single file only"})]}),t.jsx("input",{id:H,type:"file",className:"hidden",onChange:V,accept:h,multiple:p,disabled:u,required:g})]}),c&&!o&&!d&&t.jsx("p",{className:"text-sm text-gray-500",children:c}),o&&t.jsxs("div",{className:"flex items-center text-red-600 text-sm",children:[t.jsx(s.AlertCircle,{size:16,className:"mr-1"}),o]}),d&&t.jsxs("div",{className:"flex items-center text-green-600 text-sm",children:[t.jsx(s.CheckCircle,{size:16,className:"mr-1"}),d]})]})};
+//# sourceMappingURL=FileUpload.js.map

package/dist/cjs/components/Form/FileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../../../../src/components/Form/FileUpload/FileUpload.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { AlertCircle, CheckCircle, Upload } from \"lucide-react\";\nimport { FileItem, FileView } from \"../../Document\";\n\nexport interface FileUploadProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  onFileChange: (files: File[] | null) => void;\n  existingFiles?: FileItem[];\n  direction?: \"row\" | \"col\";\n  maxFileSize?: string;\n  label?: string;\n  description?: string;\n  helperText?: string;\n  error?: string;\n  success?: string;\n  disabled?: boolean;\n  required?: boolean;\n  accept?: string;\n  multiple?: boolean;\n  placeholder?: string;\n  showProgress?: boolean;\n  className?: string;\n  id?: string;\n  replaceMode?: boolean; // When true, single file replaces existing\n}\n\nconst FileUpload: React.FC<FileUploadProps> = ({\n  label,\n  description,\n  helperText,\n  error,\n  success,\n  disabled = false,\n  required = false,\n  accept,\n  multiple = false,\n  placeholder,\n  showProgress = true,\n  className = \"\",\n  id,\n  maxFileSize,\n  onFileChange,\n  existingFiles = [],\n  direction = \"col\",\n  replaceMode,\n  ...props\n}) => {\n  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);\n  const [uploadProgress, setUploadProgress] = useState<{\n    [key: string]: number;\n  }>({});\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  // Determine if we're in replace mode (single file replacement)\n  const isReplaceMode = replaceMode ?? (!multiple && existingFiles.length > 0);\n\n  // Get the current file to display (for single file mode)\n  const getCurrentFile = (): FileItem | null => {\n    if (!multiple) {\n      // Single file mode - prioritize uploaded file, then existing\n      if (uploadedFiles.length > 0) {\n        const file = uploadedFiles[0];\n        return {\n          name: file.name,\n          size: file.size,\n          type: file.type,\n          file,\n          uploadProgress: uploadProgress[`${file.name}-${file.size}`] || 100,\n        };\n      } else if (existingFiles.length > 0) {\n        return existingFiles[0];\n      }\n    }\n    return null;\n  };\n\n  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files && e.target.files.length > 0) {\n      const newFiles = Array.from(e.target.files);\n\n      let updatedFiles: File[];\n      if (!multiple) {\n        // Single file mode - replace existing\n        updatedFiles = [newFiles[0]];\n      } else {\n        // Multiple file mode - add to existing\n        updatedFiles = [...uploadedFiles, ...newFiles];\n      }\n\n      setUploadedFiles(updatedFiles);\n\n      if (showProgress) {\n        newFiles.forEach((file) => {\n          const fileKey = `${file.name}-${file.size}`;\n          setUploadProgress((prev) => ({ ...prev, [fileKey]: 10 }));\n\n          const interval = setInterval(() => {\n            setUploadProgress((prev) => {\n              const currentProgress = prev[fileKey] || 0;\n              if (currentProgress >= 100) {\n                clearInterval(interval);\n                return prev;\n              }\n              return {\n                ...prev,\n                [fileKey]: Math.min(currentProgress + 10, 100),\n              };\n            });\n          }, 300);\n        });\n      }\n\n      onFileChange(updatedFiles);\n    }\n  };\n\n  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    if (!disabled) {\n      setIsDragOver(true);\n    }\n  };\n\n  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsDragOver(false);\n  };\n\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsDragOver(false);\n\n    if (disabled) return;\n\n    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n      const newFiles = Array.from(e.dataTransfer.files);\n\n      let updatedFiles: File[];\n      if (!multiple) {\n        // Single file mode - replace existing\n        updatedFiles = [newFiles[0]];\n      } else {\n        // Multiple file mode - add to existing\n        updatedFiles = [...uploadedFiles, ...newFiles];\n      }\n\n      setUploadedFiles(updatedFiles);\n\n      if (showProgress) {\n        newFiles.forEach((file) => {\n          const fileKey = `${file.name}-${file.size}`;\n          setUploadProgress((prev) => ({ ...prev, [fileKey]: 10 }));\n\n          const interval = setInterval(() => {\n            setUploadProgress((prev) => {\n              const currentProgress = prev[fileKey] || 0;\n              if (currentProgress >= 100) {\n                clearInterval(interval);\n                return prev;\n              }\n              return {\n                ...prev,\n                [fileKey]: Math.min(currentProgress + 10, 100),\n              };\n            });\n          }, 300);\n        });\n      }\n\n      onFileChange(updatedFiles);\n    }\n  };\n\n  const handleDeleteFile = () => {\n    // Remove the uploaded file\n    setUploadedFiles([]);\n    setUploadProgress({});\n    onFileChange(null);\n  };\n\n  const handleReplaceFile = () => {\n    // Trigger file input for replacement\n    document.getElementById(inputId)?.click();\n  };\n\n  const inputId =\n    id || `file-upload-${Math.random().toString(36).substr(2, 9)}`;\n  const currentFile = getCurrentFile();\n\n  return (\n    <div className={`space-y-4 ${className}`}>\n      {/* Label */}\n      {label && (\n        <label\n          htmlFor={inputId}\n          className=\"block text-sm font-medium text-gray-700\"\n        >\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </label>\n      )}\n\n      {/* Description */}\n      {description && <p className=\"text-sm text-gray-600\">{description}</p>}\n\n      {/* Single File Display */}\n      {!multiple && currentFile ? (\n        <div className=\"space-y-2\">\n          <div className=\"flex items-center justify-between\">\n            <h4 className=\"text-sm font-medium text-gray-700\">\n              {uploadedFiles.length > 0 ? \"New File\" : \"Current File\"}\n            </h4>\n            <button\n              onClick={handleReplaceFile}\n              className=\"text-sm text-blue-600 hover:text-blue-800 font-medium\"\n              disabled={disabled}\n            >\n              Replace\n            </button>\n          </div>\n\n          <FileView\n            file={currentFile}\n            onDelete={handleDeleteFile}\n            showUpdate={false}\n            showView={true}\n            showDelete={true}\n            layout=\"list\"\n            className=\"max-w-md\"\n          />\n\n          {/* Hidden file input for replacement */}\n          <input\n            id={inputId}\n            type=\"file\"\n            className=\"hidden\"\n            onChange={handleFileUpload}\n            accept={accept}\n            disabled={disabled}\n            required={required}\n          />\n        </div>\n      ) : multiple && existingFiles.length > 0 ? (\n        /* Multiple File Mode with Existing Files */\n        <div className=\"space-y-4\">\n          <div className=\"mb-4\">\n            <h4 className=\"text-sm font-medium text-gray-700 mb-2\">\n              Current Files ({existingFiles.length})\n            </h4>\n            {existingFiles.map((file, index) => (\n              <div key={file.id || index} className=\"mb-2\">\n                <FileView\n                  file={file}\n                  showDelete={false}\n                  showUpdate={false}\n                  layout=\"list\"\n                />\n              </div>\n            ))}\n          </div>\n\n          {/* File Upload Area for Multiple Mode */}\n          <div\n            className={`\n              flex flex-${direction} gap-2 rounded-lg border-2 border-dashed p-8 text-center items-center\n              ${direction === \"row\" ? \"justify-center\" : \"\"}\n              ${isDragOver ? \"border-blue-400 bg-blue-50\" : \"border-gray-300\"}\n              ${error ? \"border-red-300 bg-red-50\" : \"\"}\n              ${success ? \"border-green-300 bg-green-50\" : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-gray-50\" : \"cursor-pointer hover:border-gray-400\"}\n            `}\n            onDragOver={handleDragOver}\n            onDragLeave={handleDragLeave}\n            onDrop={handleDrop}\n            onClick={() =>\n              !disabled && document.getElementById(inputId)?.click()\n            }\n          >\n            <Upload size={24} className=\"text-gray-400\" />\n            <div>\n              <p\n                className={`text-sm font-medium ${disabled ? \"text-gray-400\" : \"text-blue-600 hover:underline\"}`}\n              >\n                {placeholder || \"Add more files\"}\n              </p>\n              <p className=\"text-gray-500 text-sm\">or drag and drop</p>\n              <p className=\"text-sm text-gray-500\">\n                (Max. File size: {maxFileSize || \"25\"} MB)\n              </p>\n              <p className=\"text-xs text-gray-400 mt-1\">\n                Multiple files allowed\n              </p>\n            </div>\n            <input\n              id={inputId}\n              type=\"file\"\n              className=\"hidden\"\n              onChange={handleFileUpload}\n              accept={accept}\n              multiple={multiple}\n              disabled={disabled}\n              required={required}\n              {...props}\n            />\n          </div>\n\n          {/* New Uploaded Files */}\n          {uploadedFiles.length > 0 && (\n            <div className=\"mt-4\">\n              <div className=\"flex items-center justify-between mb-2\">\n                <h4 className=\"text-sm font-medium text-gray-700\">\n                  New Files ({uploadedFiles.length})\n                </h4>\n                <button\n                  onClick={() => {\n                    setUploadedFiles([]);\n                    setUploadProgress({});\n                    onFileChange(null);\n                  }}\n                  className=\"text-xs text-red-500 hover:text-red-700\"\n                  disabled={disabled}\n                >\n                  Remove All New Files\n                </button>\n              </div>\n\n              {uploadedFiles.map((file, index) => (\n                <div key={`${file.name}-${file.size}`} className=\"mb-2\">\n                  <FileView\n                    file={{\n                      name: file.name,\n                      size: file.size,\n                      type: file.type,\n                      file,\n                      uploadProgress:\n                        uploadProgress[`${file.name}-${file.size}`] || 100,\n                    }}\n                    onDelete={() => {\n                      const updatedFiles = uploadedFiles.filter(\n                        (_, i) => i !== index,\n                      );\n                      setUploadedFiles(updatedFiles);\n                      onFileChange(\n                        updatedFiles.length > 0 ? updatedFiles : null,\n                      );\n                    }}\n                    showUpdate={false}\n                    showView={false}\n                    layout=\"list\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      ) : (\n        /* File Upload Area - No Files */\n        <div\n          className={`\n              flex flex-${direction} gap-2 rounded-lg border-2 border-dashed p-8 text-center items-center\n              ${direction === \"row\" ? \"justify-center\" : \"\"}\n              ${isDragOver ? \"border-blue-400 bg-blue-50\" : \"border-gray-300\"}\n              ${error ? \"border-red-300 bg-red-50\" : \"\"}\n              ${success ? \"border-green-300 bg-green-50\" : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-gray-50\" : \"cursor-pointer hover:border-gray-400\"}\n            `}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          onClick={() => !disabled && document.getElementById(inputId)?.click()}\n        >\n          <Upload size={24} className=\"text-gray-400\" />\n          <div>\n            <p\n              className={`text-sm font-medium ${disabled ? \"text-gray-400\" : \"text-blue-600 hover:underline\"}`}\n            >\n              {placeholder ||\n                (!multiple && existingFiles.length > 0\n                  ? \"Replace file\"\n                  : existingFiles.length > 0\n                    ? \"Add more files\"\n                    : \"Click to Upload\")}\n            </p>\n            <p className=\"text-gray-500 text-sm\">or drag and drop</p>\n            <p className=\"text-sm text-gray-500\">\n              (Max. File size: {maxFileSize || \"25\"} MB)\n            </p>\n            {multiple ? (\n              <p className=\"text-xs text-gray-400 mt-1\">\n                Multiple files allowed\n              </p>\n            ) : (\n              <p className=\"text-xs text-gray-400 mt-1\">Single file only</p>\n            )}\n          </div>\n          <input\n            id={inputId}\n            type=\"file\"\n            className=\"hidden\"\n            onChange={handleFileUpload}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            required={required}\n          />\n        </div>\n      )}\n\n      {/* Helper Text */}\n      {helperText && !error && !success && (\n        <p className=\"text-sm text-gray-500\">{helperText}</p>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"flex items-center text-red-600 text-sm\">\n          <AlertCircle size={16} className=\"mr-1\" />\n          {error}\n        </div>\n      )}\n\n      {/* Success Message */}\n      {success && (\n        <div className=\"flex items-center text-green-600 text-sm\">\n          <CheckCircle size={16} className=\"mr-1\" />\n          {success}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default FileUpload;\n\nexport function FileUploadDemo() {\n  const [singleFile, setSingleFile] = useState<File[] | null>(null);\n  const [multipleFiles, setMultipleFiles] = useState<File[] | null>(null);\n  const [imageFiles, setImageFiles] = useState<File[] | null>(null);\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-6 space-y-8\">\n      <h1 className=\"text-2xl font-bold text-gray-800\">\n        File Upload Component Demo\n      </h1>\n\n      {/* Single File Upload */}\n      <div>\n        <h2 className=\"text-lg font-semibold mb-4\">Single File Upload</h2>\n        <FileUpload\n          label=\"Upload Document\"\n          description=\"Upload a single document file\"\n          helperText=\"Supported formats: PDF, DOC, DOCX\"\n          accept=\".pdf,.doc,.docx\"\n          multiple={false}\n          onFileChange={setSingleFile}\n          maxFileSize=\"10\"\n        />\n        {singleFile && (\n          <div className=\"mt-4 p-3 bg-gray-50 rounded\">\n            <p className=\"text-sm\">\n              <strong>Selected:</strong> {singleFile[0]?.name}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Multiple File Upload */}\n      <div>\n        <h2 className=\"text-lg font-semibold mb-4\">Multiple File Upload</h2>\n        <FileUpload\n          label=\"Upload Multiple Files\"\n          description=\"You can upload multiple files at once\"\n          helperText=\"Hold Ctrl/Cmd to select multiple files\"\n          multiple={true}\n          onFileChange={setMultipleFiles}\n          placeholder=\"Choose multiple files\"\n        />\n        {multipleFiles && (\n          <div className=\"mt-4 p-3 bg-gray-50 rounded\">\n            <p className=\"text-sm\">\n              <strong>Selected {multipleFiles.length} files:</strong>\n            </p>\n            <ul className=\"text-xs mt-1\">\n              {multipleFiles.map((file, i) => (\n                <li key={i}>• {file.name}</li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n\n      {/* Image Upload */}\n      <div>\n        <h2 className=\"text-lg font-semibold mb-4\">Image Upload</h2>\n        <FileUpload\n          label=\"Upload Images\"\n          description=\"Upload one or more image files\"\n          accept=\"image/*\"\n          multiple={true}\n          onFileChange={setImageFiles}\n          placeholder=\"Choose images\"\n          direction=\"row\"\n        />\n        {imageFiles && (\n          <div className=\"mt-4 p-3 bg-gray-50 rounded\">\n            <p className=\"text-sm\">\n              <strong>Selected {imageFiles.length} image(s):</strong>\n            </p>\n            <ul className=\"text-xs mt-1\">\n              {imageFiles.map((file, i) => (\n                <li key={i}>\n                  • {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)\n                </li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n\n      {/* With Error State */}\n      <div>\n        <h2 className=\"text-lg font-semibold mb-4\">With Error State</h2>\n        <FileUpload\n          label=\"Upload with Error\"\n          error=\"File size too large. Please select a file smaller than 5MB.\"\n          onFileChange={() => {}}\n        />\n      </div>\n\n      {/* With Success State */}\n      <div>\n        <h2 className=\"text-lg font-semibold mb-4\">With Success State</h2>\n        <FileUpload\n          label=\"Upload with Success\"\n          success=\"Files uploaded successfully!\"\n          onFileChange={() => {}}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["_a","label","description","helperText","error","success","_b","disabled","_c","required","accept","_d","multiple","placeholder","_e","showProgress","_f","className","id","maxFileSize","onFileChange","_g","existingFiles","_h","direction","replaceMode","props","__rest","_j","useState","uploadedFiles","setUploadedFiles","_k","uploadProgress","setUploadProgress","_l","isDragOver","setIsDragOver","length","handleFileUpload","e","target","files","newFiles","Array","from","updatedFiles","__spreadArray","forEach","file","fileKey","concat","name","size","prev","interval","setInterval","currentProgress","clearInterval","__assign","Math","min","handleDragOver","preventDefault","handleDragLeave","handleDrop","dataTransfer","inputId","random","toString","substr","currentFile","type","getCurrentFile","_jsxs","children","htmlFor","_jsx","onClick","document","getElementById","click","FileView","onDelete","showUpdate","showView","showDelete","layout","onChange","map","index","onDragOver","onDragLeave","onDrop","Upload","filter","_","i","AlertCircle","CheckCircle"],"mappings":"0MA0B8C,SAACA,GAC7C,IAAAC,EAAKD,EAAAC,MACLC,EAAWF,EAAAE,YACXC,EAAUH,EAAAG,WACVC,EAAKJ,EAAAI,MACLC,EAAOL,EAAAK,QACPC,EAAAN,EAAAO,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,aAAAC,cAAgBD,EAChBE,EAAMV,EAAAU,OACNC,EAAAX,EAAAY,SAAAA,OAAQ,IAAAD,GAAQA,EAChBE,EAAWb,EAAAa,YACXC,EAAAd,EAAAe,aAAAA,OAAY,IAAAD,KACZE,EAAAhB,EAAAiB,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAElB,EAAAkB,GACFC,EAAWnB,EAAAmB,YACXC,EAAYpB,EAAAoB,aACZC,EAAArB,EAAAsB,cAAAA,OAAa,IAAAD,EAAG,GAAEA,EAClBE,cAAAC,aAAY,MAAKD,EACjBE,EAAWzB,EAAAyB,YACRC,EAAKC,SAAA3B,EAnBqC,uNAqBvC4B,EAAoCC,EAAAA,SAAiB,IAApDC,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAChCI,EAAsCH,EAAAA,SAEzC,CAAA,GAFII,EAAcD,EAAA,GAAEE,EAAiBF,EAAA,GAGlCG,EAA8BN,EAAAA,UAAS,GAAtCO,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAGVV,UAAiBb,GAAYU,EAAcgB,OAGjE,IAmBMC,EAAmB,SAACC,GACxB,GAAIA,EAAEC,OAAOC,OAASF,EAAEC,OAAOC,MAAMJ,OAAS,EAAG,CAC/C,IAAMK,EAAWC,MAAMC,KAAKL,EAAEC,OAAOC,OAEjCI,SAMFA,EALGlC,EAKSmC,EAAAA,cAAAA,EAAAA,cAAA,GAAOjB,GAAa,GAAKa,MAHtB,CAACA,EAAS,IAM3BZ,EAAiBe,GAEb/B,GACF4B,EAASK,SAAQ,SAACC,GAChB,IAAMC,EAAU,GAAAC,OAAGF,EAAKG,KAAI,KAAAD,OAAIF,EAAKI,MACrCnB,GAAkB,SAACoB,SAAS,gCAAMA,KAAItD,EAAA,CAAA,GAAGkD,GAAU,GAAElD,GAAzB,IAE5B,IAAMuD,EAAWC,aAAY,WAC3BtB,GAAkB,SAACoB,SACXG,EAAkBH,EAAKJ,IAAY,EACzC,OAAIO,GAAmB,KACrBC,cAAcH,GACPD,GAETK,EAAAA,SAAAA,EAAAA,SAAA,CAAA,EACKL,KAAItD,EAAA,IACNkD,GAAUU,KAAKC,IAAIJ,EAAkB,GAAI,KAAIzD,GAElD,GACF,GAAG,IACL,IAGFoB,EAAa0B,EACf,CACF,EAEMgB,EAAiB,SAACtB,GACtBA,EAAEuB,iBACGxD,GACH8B,GAAc,EAElB,EAEM2B,EAAkB,SAACxB,GACvBA,EAAEuB,iBACF1B,GAAc,EAChB,EAEM4B,EAAa,SAACzB,GAIlB,GAHAA,EAAEuB,iBACF1B,GAAc,IAEV9B,GAEAiC,EAAE0B,aAAaxB,OAASF,EAAE0B,aAAaxB,MAAMJ,OAAS,EAAG,CAC3D,IAAMK,EAAWC,MAAMC,KAAKL,EAAE0B,aAAaxB,OAEvCI,SAMFA,EALGlC,EAKSmC,EAAAA,cAAAA,EAAAA,cAAA,GAAOjB,GAAa,GAAKa,MAHtB,CAACA,EAAS,IAM3BZ,EAAiBe,GAEb/B,GACF4B,EAASK,SAAQ,SAACC,GAChB,IAAMC,EAAU,GAAAC,OAAGF,EAAKG,KAAI,KAAAD,OAAIF,EAAKI,MACrCnB,GAAkB,SAACoB,SAAS,gCAAMA,KAAItD,EAAA,CAAA,GAAGkD,GAAU,GAAElD,GAAzB,IAE5B,IAAMuD,EAAWC,aAAY,WAC3BtB,GAAkB,SAACoB,SACXG,EAAkBH,EAAKJ,IAAY,EACzC,OAAIO,GAAmB,KACrBC,cAAcH,GACPD,GAETK,EAAAA,SAAAA,EAAAA,SAAA,CAAA,EACKL,KAAItD,EAAA,IACNkD,GAAUU,KAAKC,IAAIJ,EAAkB,GAAI,KAAIzD,GAElD,GACF,GAAG,IACL,IAGFoB,EAAa0B,EACf,CACF,EAcMqB,EACJjD,GAAM,sBAAe0C,KAAKQ,SAASC,SAAS,IAAIC,OAAO,EAAG,IACtDC,EAlIiB,WACrB,IAAK3D,EAAU,CAEb,GAAIkB,EAAcQ,OAAS,EAAG,CAC5B,IAAMW,EAAOnB,EAAc,GAC3B,MAAO,CACLsB,KAAMH,EAAKG,KACXC,KAAMJ,EAAKI,KACXmB,KAAMvB,EAAKuB,KACXvB,KAAIA,EACJhB,eAAgBA,EAAe,GAAAkB,OAAGF,EAAKG,KAAI,KAAAD,OAAIF,EAAKI,QAAW,IAEnE,CAAO,GAAI/B,EAAcgB,OAAS,EAChC,OAAOhB,EAAc,EAEzB,CACA,OAAO,IACT,CAiHoBmD,GAEpB,OACEC,EAAAA,KAAA,MAAA,CAAKzD,UAAW,aAAAkC,OAAalC,GAAW0D,SAAA,CAErC1E,GACCyE,EAAAA,KAAA,QAAA,CACEE,QAAST,EACTlD,UAAU,0CAAyC0D,SAAA,CAElD1E,EACAQ,GAAYoE,EAAAA,YAAM5D,UAAU,oBAAmB0D,SAAA,SAKnDzE,GAAe2E,EAAAA,IAAA,IAAA,CAAG5D,UAAU,iCAAyBf,KAGpDU,GAAY2D,EACZG,EAAAA,KAAA,MAAA,CAAKzD,UAAU,sBACbyD,EAAAA,KAAA,MAAA,CAAKzD,UAAU,oCAAmC0D,SAAA,CAChDE,EAAAA,UAAI5D,UAAU,oCAAmC0D,SAC9C7C,EAAcQ,OAAS,EAAI,WAAa,iBAE3CuC,EAAAA,IAAA,SAAA,CACEC,QAjCc,iBAEQ,QAAhC9E,EAAA+E,SAASC,eAAeb,UAAQ,IAAAnE,GAAAA,EAAEiF,OACpC,EA+BYhE,UAAU,wDACVV,SAAUA,0BAMdsE,EAAAA,IAACK,GACCjC,KAAMsB,EACNY,SAlDe,WAEvBpD,EAAiB,IACjBG,EAAkB,CAAA,GAClBd,EAAa,KACf,EA8CUgE,YAAY,EACZC,UAAU,EACVC,YAAY,EACZC,OAAO,OACPtE,UAAU,aAIZ4D,EAAAA,IAAA,QAAA,CACE3D,GAAIiD,EACJK,KAAK,OACLvD,UAAU,SACVuE,SAAUjD,EACV7B,OAAQA,EACRH,SAAUA,EACVE,SAAUA,OAGZG,GAAYU,EAAcgB,OAAS,EAErCoC,EAAAA,KAAA,MAAA,CAAKzD,UAAU,YAAW0D,SAAA,CACxBD,OAAA,MAAA,CAAKzD,UAAU,OAAM0D,SAAA,CACnBD,EAAAA,KAAA,KAAA,CAAIzD,UAAU,yCAAwC0D,SAAA,CAAA,kBACpCrD,EAAcgB,OAAM,OAErChB,EAAcmE,KAAI,SAACxC,EAAMyC,GAAU,OAClCb,EAAAA,WAA4B5D,UAAU,OAAM0D,SAC1CE,EAAAA,IAACK,EAAQ,CACPjC,KAAMA,EACNqC,YAAY,EACZF,YAAY,EACZG,OAAO,UALDtC,EAAK/B,IAAMwE,EADa,OAatChB,EAAAA,KAAA,MAAA,CACEzD,UAAW,6BAAAkC,OACG3B,EAAS,yFAAA2B,OACL,QAAd3B,EAAsB,iBAAmB,GAAE,oBAAA2B,OAC3Cf,EAAa,6BAA+B,kBAAiB,oBAAAe,OAC7D/C,EAAQ,2BAA6B,GAAE,oBAAA+C,OACvC9C,EAAU,+BAAiC,GAAE,oBAAA8C,OAC7C5C,EAAW,2CAA6C,uCAAsC,kBAElGoF,WAAY7B,EACZ8B,YAAa5B,EACb6B,OAAQ5B,EACRa,QAAS,WAAA,IAAA9E,EACP,OAACO,IAA4C,QAAhCP,EAAA+E,SAASC,eAAeb,UAAQ,IAAAnE,OAAA,EAAAA,EAAEiF,QAAO,EAAAN,SAAA,CAGxDE,EAAAA,IAACiB,EAAAA,OAAM,CAACzC,KAAM,GAAIpC,UAAU,kBAC5ByD,EAAAA,KAAA,MAAA,CAAAC,SAAA,CACEE,EAAAA,SACE5D,UAAW,uBAAAkC,OAAuB5C,EAAW,gBAAkB,iCAAiCoE,SAE/F9D,GAAe,mBAElBgE,EAAAA,IAAA,IAAA,CAAG5D,UAAU,wBAAuB0D,SAAA,qBACpCD,EAAAA,KAAA,IAAA,CAAGzD,UAAU,wBAAuB0D,SAAA,CAAA,oBAChBxD,GAAe,KAAI,UAEvC0D,WAAG5D,UAAU,6BAA4B0D,SAAA,8BAI3CE,EAAAA,IAAA,QAAAlB,EAAAA,SAAA,CACEzC,GAAIiD,EACJK,KAAK,OACLvD,UAAU,SACVuE,SAAUjD,EACV7B,OAAQA,EACRE,SAAUA,EACVL,SAAUA,EACVE,SAAUA,GACNiB,OAKPI,EAAcQ,OAAS,GACtBoC,EAAAA,KAAA,MAAA,CAAKzD,UAAU,OAAM0D,SAAA,CACnBD,EAAAA,KAAA,MAAA,CAAKzD,UAAU,yCAAwC0D,SAAA,CACrDD,EAAAA,KAAA,KAAA,CAAIzD,UAAU,oCAAmC0D,SAAA,CAAA,cACnC7C,EAAcQ,OAAM,OAElCuC,EAAAA,IAAA,SAAA,CACEC,QAAS,WACP/C,EAAiB,IACjBG,EAAkB,CAAA,GAClBd,EAAa,KACf,EACAH,UAAU,0CACVV,SAAUA,EAAQoE,SAAA,4BAMrB7C,EAAc2D,KAAI,SAACxC,EAAMyC,GAAU,OAClCb,EAAAA,IAAA,MAAA,CAAuC5D,UAAU,OAAM0D,SACrDE,EAAAA,IAACK,EAAQ,CACPjC,KAAM,CACJG,KAAMH,EAAKG,KACXC,KAAMJ,EAAKI,KACXmB,KAAMvB,EAAKuB,KACXvB,KAAIA,EACJhB,eACEA,EAAe,GAAAkB,OAAGF,EAAKG,KAAI,KAAAD,OAAIF,EAAKI,QAAW,KAEnD8B,SAAU,WACR,IAAMrC,EAAehB,EAAciE,QACjC,SAACC,EAAGC,GAAM,OAAAA,IAAMP,CAAN,IAEZ3D,EAAiBe,GACjB1B,EACE0B,EAAaR,OAAS,EAAIQ,EAAe,KAE7C,EACAsC,YAAY,EACZC,UAAU,EACVE,OAAO,UArBD,UAAGtC,EAAKG,KAAI,KAAAD,OAAIF,EAAKI,MADG,UA+B1CqB,OAAA,MAAA,CACEzD,UAAW,6BAAAkC,OACK3B,EAAS,yFAAA2B,OACL,QAAd3B,EAAsB,iBAAmB,GAAE,oBAAA2B,OAC3Cf,EAAa,6BAA+B,kBAAiB,oBAAAe,OAC7D/C,EAAQ,2BAA6B,GAAE,oBAAA+C,OACvC9C,EAAU,+BAAiC,GAAE,oBAAA8C,OAC7C5C,EAAW,2CAA6C,uCAAsC,kBAEpGoF,WAAY7B,EACZ8B,YAAa5B,EACb6B,OAAQ5B,EACRa,QAAS,WAAA,IAAA9E,EAAM,OAACO,IAA4C,QAAhCP,EAAA+E,SAASC,eAAeb,UAAQ,IAAAnE,OAAA,EAAAA,EAAEiF,QAAO,YAErEJ,EAAAA,IAACiB,EAAAA,OAAM,CAACzC,KAAM,GAAIpC,UAAU,kBAC5ByD,EAAAA,KAAA,MAAA,CAAAC,SAAA,CACEE,EAAAA,IAAA,IAAA,CACE5D,UAAW,uBAAAkC,OAAuB5C,EAAW,gBAAkB,iCAAiCoE,SAE/F9D,KACGD,GAAYU,EAAcgB,OAAS,EACjC,eACAhB,EAAcgB,OAAS,EACrB,iBACA,qBAEVuC,EAAAA,IAAA,IAAA,CAAG5D,UAAU,wBAAuB0D,SAAA,qBACpCD,EAAAA,KAAA,IAAA,CAAGzD,UAAU,wBAAuB0D,SAAA,CAAA,oBAChBxD,GAAe,KAAI,UAEtCP,EACCiE,EAAAA,IAAA,IAAA,CAAG5D,UAAU,6BAA4B0D,SAAA,2BAIzCE,EAAAA,IAAA,IAAA,CAAG5D,UAAU,6BAA4B0D,SAAA,wBAG7CE,EAAAA,IAAA,QAAA,CACE3D,GAAIiD,EACJK,KAAK,OACLvD,UAAU,SACVuE,SAAUjD,EACV7B,OAAQA,EACRE,SAAUA,EACVL,SAAUA,EACVE,SAAUA,OAMfN,IAAeC,IAAUC,GACxBwE,EAAAA,SAAG5D,UAAU,wBAAuB0D,SAAExE,IAIvCC,GACCsE,EAAAA,KAAA,MAAA,CAAKzD,UAAU,yCAAwC0D,SAAA,CACrDE,EAAAA,IAACqB,EAAAA,aAAY7C,KAAM,GAAIpC,UAAU,SAChCb,KAKJC,GACCqE,EAAAA,KAAA,MAAA,CAAKzD,UAAU,2CAA0C0D,SAAA,CACvDE,EAAAA,IAACsB,EAAAA,YAAW,CAAC9C,KAAM,GAAIpC,UAAU,SAChCZ,OAKX"}

package/dist/cjs/components/Form/Input/DateTimePicker.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),r=require("react"),a=require("lucide-react"),n=function(n){var s=n.id,o=n.label,l=n.value,i=void 0===l?{}:l,c=n.size,d=void 0===c?"md":c,u=n.onChange,m=n.placeholder,g=n.error,x=n.required,h=void 0!==x&&x,p=n.helpText,f=n.className,b=void 0===f?"":f,y=n.disabled,v=void 0!==y&&y,j=n.mode,N=void 0===j?"date":j;n.minDate,n.maxDate,n.showWeekNumbers;var w=n.firstDayOfWeek,D=void 0===w?1:w;e.__rest(n,["id","label","value","size","onChange","placeholder","error","required","helpText","className","disabled","mode","minDate","maxDate","showWeekNumbers","firstDayOfWeek"]);var S=r.useState(!1),C=S[0],M=S[1],k=r.useState(new Date),F=k[0],T=k[1],Y=r.useState(i.startDate||null),_=Y[0],J=Y[1],L=r.useState(i.endDate||null),O=L[0],z=L[1],W=r.useState(i.time||"12:00 PM"),R=W[0],q=W[1],A=r.useState(!1),P=A[0],E=A[1],V=r.useState(!1),B=V[0],H=V[1],I=r.useState(F.getFullYear()),U=I[0],G=I[1],K=r.useState(F.getMonth()),Q=K[0],X=K[1],Z=r.useRef(null),$=r.useRef(null),ee=0===D?["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];r.useEffect((function(){i.startDate&&(J(i.startDate),T(new Date(i.startDate.getFullYear(),i.startDate.getMonth()))),i.endDate&&z(i.endDate),i.time&&q(i.time)}),[i]),r.useEffect((function(){var e=function(e){Z.current&&!Z.current.contains(e.target)&&$.current&&!$.current.contains(e.target)&&(M(!1),H(!1))};return document.addEventListener("mousedown",e),function(){return document.removeEventListener("mousedown",e)}}),[]);var te=function(e){return e.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})},re=function(e,t){var r=te(e);return t?"".concat(r," ").concat(t):r},ae=function(){if(!_&&!O)return"";switch(N){case"date":return _?te(_):"";case"datetime":return _?re(_,R):"";case"daterange":return _&&O?"".concat(te(_)," - ").concat(te(O)):_?te(_):"";case"datetimerange":return _&&O?"".concat(re(_,R)," - ").concat(re(O,R)):_?re(_,R):"";default:return""}},ne=function(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()},se=function(e){T(new Date(F.getFullYear(),F.getMonth()+e,1))};return t.jsxs("div",{className:"mb-4",children:[o&&t.jsxs("label",{htmlFor:s,className:"mb-1 block text-sm font-medium text-gray-600",children:[o,h&&t.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),t.jsxs("div",{className:"relative",children:[t.jsxs("div",{ref:$,onClick:function(){return!v&&M(!C)},className:"w-full rounded-[12px] border ".concat(g?"border-red-500":"border-gray-200"," ").concat(v?"bg-gray-100 text-gray-500 cursor-not-allowed":"bg-gray-100 text-dark cursor-pointer hover:bg-gray-50"," focus:outline-none focus:ring-1 focus:ring-primary ").concat(b," ").concat({sm:"text-xs px-3 py-1.5 text-sm min-h-[32px]",md:"text-sm px-4 py-2 text-base min-h-[40px]",lg:"text-base px-4 py-3 text-lg min-h-[48px]"}[d]," flex items-center justify-between"),children:[t.jsx("span",{className:ae()?"text-gray-900":"text-gray-400",children:ae()||m||"Select date..."}),t.jsx("svg",{className:"w-5 h-5 text-gray-400 transition-transform ".concat(C?"rotate-180":""),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),C&&!v&&t.jsx("div",{ref:Z,className:"absolute z-[1000] mt-1 bg-white border border-gray-200 rounded-[12px] shadow-lg backdrop-blur-sm bg-white/95 p-4 min-w-[320px] max-h-[600px] overflow-y-auto",children:B?t.jsxs("div",{className:"space-y-4",children:[t.jsxs("div",{className:"flex items-center justify-between",children:[t.jsx("h3",{className:"text-sm font-semibold text-gray-900",children:"Select Month & Year"}),t.jsx("button",{type:"button",onClick:function(){return H(!1)},className:"text-gray-400 hover:text-gray-600",children:t.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]}),t.jsxs("div",{children:[t.jsx("label",{className:"block text-xs font-medium text-gray-700 mb-2",children:"Year"}),t.jsx("select",{value:U,onChange:function(e){return G(parseInt(e.target.value))},className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white font-medium",children:function(){for(var e=(new Date).getFullYear(),t=[],r=e-100;r<=e+10;r++)t.push(r);return t}().map((function(e){return t.jsx("option",{value:e,children:e},e)}))})]}),t.jsxs("div",{children:[t.jsx("label",{className:"block text-xs font-medium text-gray-700 mb-2",children:"Month"}),t.jsx("div",{className:"grid grid-cols-3 gap-2",children:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].map((function(e,r){return t.jsx("button",{type:"button",onClick:function(){return X(r)},className:"\n                          px-3 py-2 text-sm font-medium rounded-lg transition-colors\n                          ".concat(Q===r?"bg-primary-500 text-white":"bg-gray-100 text-gray-700 hover:bg-gray-200","\n                        "),children:e},e)}))})]}),t.jsx("button",{type:"button",onClick:function(){T(new Date(U,Q,1)),H(!1)},className:"w-full px-4 py-2 text-sm bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors font-medium",children:"Apply"})]}):t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"flex items-center justify-between mb-4",children:[t.jsx("button",{type:"button",onClick:function(){return se(-1)},className:"p-2 hover:bg-gray-100 rounded-lg transition-colors",children:t.jsx(a.ChevronLeft,{className:"w-5 h-5 text-gray-600"})}),t.jsxs("button",{type:"button",onClick:function(){H(!0),G(F.getFullYear()),X(F.getMonth())},className:"px-4 py-2 font-semibold text-gray-900 hover:bg-gray-100 rounded-lg transition-colors",children:[["January","February","March","April","May","June","July","August","September","October","November","December"][F.getMonth()]," ",F.getFullYear()]}),t.jsx("button",{type:"button",onClick:function(){return se(1)},className:"p-2 hover:bg-gray-100 rounded-lg transition-colors",children:t.jsx(a.ChevronRight,{className:"w-5 h-5 text-gray-600"})})]}),t.jsx("div",{className:"grid grid-cols-7 gap-1 mb-2",children:ee.map((function(e){return t.jsx("div",{className:"text-center text-xs font-semibold text-gray-600 py-2",children:e},e)}))}),t.jsx("div",{className:"grid grid-cols-7 gap-1 mb-4",children:function(){var e=F.getFullYear(),t=F.getMonth(),r=new Date(e,t,1),a=new Date(e,t+1,0).getDate(),n=r.getDay();1===D&&(n=0===n?6:n-1);for(var s=[],o=0;o<n;o++){var l=new Date(e,t,-(n-1-o));s.push({date:l,isCurrentMonth:!1})}for(o=1;o<=a;o++)s.push({date:new Date(e,t,o),isCurrentMonth:!0});var i=42-s.length;for(o=1;o<=i;o++)s.push({date:new Date(e,t+1,o),isCurrentMonth:!1});return s}().map((function(r,a){var n=r.date,s=r.isCurrentMonth,o=function(e){return!(!_||!ne(e,_))||!(!O||!ne(e,O))}(n),l=function(e){if(!_||!O)return!1;var t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),r=new Date(_.getFullYear(),_.getMonth(),_.getDate()),a=new Date(O.getFullYear(),O.getMonth(),O.getDate());return t>=r&&t<=a}(n),i=ne(n,new Date),c=_&&ne(n,_),d=O&&ne(n,O);return t.jsx("button",{type:"button",onClick:function(){return function(t){var r=new Date(t.getFullYear(),t.getMonth(),t.getDate(),12,0,0);if("daterange"===N||"datetimerange"===N){if(!_||_&&O||P)if(P){r<_?(J(r),z(_)):z(r),E(!1);var a=e.__assign({startDate:_,endDate:r<_?_||void 0:r},"datetimerange"===N&&{time:R});null==u||u(a)}else J(r),z(null),E(!0)}else J(r),a=e.__assign({startDate:r},"datetime"===N&&{time:R}),null==u||u(a),"date"===N&&M(!1)}(n)},disabled:!s,className:"\n                          w-9 h-9 text-sm transition-all duration-200 relative flex items-center justify-center font-medium\n                          ".concat(s?"text-gray-900":"text-gray-300 cursor-not-allowed","\n                          ").concat(o?"bg-primary-500 text-white font-semibold rounded-full shadow-md":l?"bg-primary-100 text-primary-700":"hover:bg-gray-100 rounded-lg","\n                          ").concat(i&&!o?"ring-2 ring-primary-400":"","\n                          ").concat(c||d?"rounded-full":"","\n                          ").concat(s?"":"opacity-40","\n                        "),children:n.getDate()},a)}))}),("datetime"===N||"datetimerange"===N)&&t.jsxs("div",{className:"border-t border-gray-100 pt-4",children:[t.jsx("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Time"}),t.jsx("select",{value:R,onChange:function(t){return function(t){q(t);var r=e.__assign(e.__assign({startDate:_},O&&{endDate:O}),{time:t});null==u||u(r)}(t.target.value)},className:"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white",children:function(){for(var e=[],t=1;t<=12;t++)for(var r=0;r<60;r+=15){var a=r.toString().padStart(2,"0");e.push("".concat(t,":").concat(a," AM")),e.push("".concat(t,":").concat(a," PM"))}return e}().map((function(e){return t.jsx("option",{value:e,children:e},e)}))})]}),t.jsxs("div",{className:"flex justify-end space-x-2 mt-4 pt-4 border-t border-gray-100",children:[t.jsx("button",{type:"button",onClick:function(){M(!1),J(null),z(null),E(!1),null==u||u({})},className:"px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors font-medium",children:"Clear"}),t.jsx("button",{type:"button",onClick:function(){return M(!1)},className:"px-4 py-2 text-sm bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors font-medium",children:"Done"})]})]})})]}),p&&!g&&t.jsx("p",{id:"".concat(s,"-help"),className:"mt-1 text-sm text-gray-500",children:p}),g&&t.jsx("p",{id:"".concat(s,"-error"),className:"mt-1 text-sm text-red-500",children:g})]})};exports.DateTimePickerDemo=function(){var e=r.useState({}),a=e[0],s=e[1],o=r.useState({}),l=o[0],i=o[1],c=r.useState({}),d=c[0],u=c[1],m=r.useState({}),g=m[0],x=m[1];return t.jsxs("div",{className:"max-w-4xl mx-auto p-6 bg-gray-50 min-h-screen",children:[t.jsx("h1",{className:"text-3xl font-bold mb-8 text-gray-900",children:"DateTime Picker Component"}),t.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8",children:[t.jsxs("div",{className:"space-y-6",children:[t.jsx(n,{id:"single-date",label:"Single Date",value:a,onChange:s,placeholder:"Select a date",mode:"date",helpText:"Choose any single date",size:"md"}),t.jsx(n,{id:"datetime",label:"Date & Time",value:l,onChange:i,placeholder:"Select date and time",mode:"datetime",helpText:"Choose date with specific time",size:"md"})]}),t.jsxs("div",{className:"space-y-6",children:[t.jsx(n,{id:"date-range",label:"Date Range",value:d,onChange:u,placeholder:"Select date range",mode:"daterange",helpText:"Choose start and end dates",size:"md"}),t.jsx(n,{id:"datetime-range",label:"Date & Time Range",value:g,onChange:x,placeholder:"Select date and time range",mode:"datetimerange",helpText:"Choose date range with time",size:"md"})]})]}),t.jsxs("div",{className:"mt-12 grid grid-cols-1 md:grid-cols-2 gap-8",children:[t.jsxs("div",{className:"space-y-4",children:[t.jsx("h3",{className:"text-lg font-semibold text-gray-800",children:"Single Date:"}),t.jsx("pre",{className:"bg-white p-4 rounded-lg border text-sm overflow-x-auto",children:JSON.stringify(a,null,2)}),t.jsx("h3",{className:"text-lg font-semibold text-gray-800",children:"DateTime:"}),t.jsx("pre",{className:"bg-white p-4 rounded-lg border text-sm overflow-x-auto",children:JSON.stringify(l,null,2)})]}),t.jsxs("div",{className:"space-y-4",children:[t.jsx("h3",{className:"text-lg font-semibold text-gray-800",children:"Date Range:"}),t.jsx("pre",{className:"bg-white p-4 rounded-lg border text-sm overflow-x-auto",children:JSON.stringify(d,null,2)}),t.jsx("h3",{className:"text-lg font-semibold text-gray-800",children:"DateTime Range:"}),t.jsx("pre",{className:"bg-white p-4 rounded-lg border text-sm overflow-x-auto",children:JSON.stringify(g,null,2)})]})]})]})},exports.default=n;
+//# sourceMappingURL=DateTimePicker.js.map

package/dist/cjs/components/Form/Input/DateTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.js","sources":["../../../../../src/components/Form/Input/DateTimePicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nexport interface DateTimeValue {\n  startDate?: Date;\n  endDate?: Date;\n  time?: string;\n}\n\nexport interface DateTimePickerProps {\n  id?: string;\n  label?: string;\n  value?: DateTimeValue;\n  onChange?: (value: DateTimeValue) => 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  mode?: \"date\" | \"datetime\" | \"daterange\" | \"datetimerange\";\n  minDate?: Date;\n  maxDate?: Date;\n  format?: string;\n  showWeekNumbers?: boolean;\n  firstDayOfWeek?: 0 | 1;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  id,\n  label,\n  value = {},\n  size = \"md\",\n  onChange,\n  placeholder,\n  error,\n  required = false,\n  helpText,\n  className = \"\",\n  disabled = false,\n  mode = \"date\",\n  minDate,\n  maxDate,\n  showWeekNumbers = false,\n  firstDayOfWeek = 1,\n  ...restProps\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [currentMonth, setCurrentMonth] = useState(new Date());\n  const [selectedStartDate, setSelectedStartDate] = useState<Date | null>(\n    value.startDate || null,\n  );\n  const [selectedEndDate, setSelectedEndDate] = useState<Date | null>(\n    value.endDate || null,\n  );\n  const [selectedTime, setSelectedTime] = useState(value.time || \"12:00 PM\");\n  const [isSelectingEnd, setIsSelectingEnd] = useState(false);\n  const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);\n  const [tempYear, setTempYear] = useState(currentMonth.getFullYear());\n  const [tempMonth, setTempMonth] = useState(currentMonth.getMonth());\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const inputRef = 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 weekDays =\n    firstDayOfWeek === 0\n      ? [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]\n      : [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\n  const months = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\",\n  ];\n\n  const monthsShort = [\n    \"Jan\",\n    \"Feb\",\n    \"Mar\",\n    \"Apr\",\n    \"May\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Oct\",\n    \"Nov\",\n    \"Dec\",\n  ];\n\n  useEffect(() => {\n    if (value.startDate) {\n      setSelectedStartDate(value.startDate);\n      setCurrentMonth(\n        new Date(value.startDate.getFullYear(), value.startDate.getMonth()),\n      );\n    }\n    if (value.endDate) {\n      setSelectedEndDate(value.endDate);\n    }\n    if (value.time) {\n      setSelectedTime(value.time);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node) &&\n        inputRef.current &&\n        !inputRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n        setShowYearMonthPicker(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  const formatDate = (date: Date) => {\n    return date.toLocaleDateString(\"en-US\", {\n      year: \"numeric\",\n      month: \"short\",\n      day: \"numeric\",\n    });\n  };\n\n  const formatDateTime = (date: Date, time?: string) => {\n    const dateStr = formatDate(date);\n    return time ? `${dateStr} ${time}` : dateStr;\n  };\n\n  const getDisplayValue = () => {\n    if (!selectedStartDate && !selectedEndDate) return \"\";\n\n    switch (mode) {\n      case \"date\":\n        return selectedStartDate ? formatDate(selectedStartDate) : \"\";\n      case \"datetime\":\n        return selectedStartDate\n          ? formatDateTime(selectedStartDate, selectedTime)\n          : \"\";\n      case \"daterange\":\n        if (selectedStartDate && selectedEndDate) {\n          return `${formatDate(selectedStartDate)} - ${formatDate(selectedEndDate)}`;\n        } else if (selectedStartDate) {\n          return formatDate(selectedStartDate);\n        }\n        return \"\";\n      case \"datetimerange\":\n        if (selectedStartDate && selectedEndDate) {\n          return `${formatDateTime(selectedStartDate, selectedTime)} - ${formatDateTime(selectedEndDate, selectedTime)}`;\n        } else if (selectedStartDate) {\n          return formatDateTime(selectedStartDate, selectedTime);\n        }\n        return \"\";\n      default:\n        return \"\";\n    }\n  };\n\n  const handleDateClick = (date: Date) => {\n    // Create date at noon to avoid timezone issues\n    const selectedDate = new Date(\n      date.getFullYear(),\n      date.getMonth(),\n      date.getDate(),\n      12,\n      0,\n      0,\n    );\n\n    if (mode === \"daterange\" || mode === \"datetimerange\") {\n      if (\n        !selectedStartDate ||\n        (selectedStartDate && selectedEndDate) ||\n        isSelectingEnd\n      ) {\n        if (!isSelectingEnd) {\n          setSelectedStartDate(selectedDate);\n          setSelectedEndDate(null);\n          setIsSelectingEnd(true);\n        } else {\n          if (selectedDate < selectedStartDate!) {\n            setSelectedStartDate(selectedDate);\n            setSelectedEndDate(selectedStartDate);\n          } else {\n            setSelectedEndDate(selectedDate);\n          }\n          setIsSelectingEnd(false);\n\n          const newValue: DateTimeValue = {\n            startDate: selectedStartDate!,\n            endDate:\n              selectedDate < selectedStartDate!\n                ? selectedStartDate || undefined\n                : selectedDate,\n            ...(mode === \"datetimerange\" && { time: selectedTime }),\n          };\n          onChange?.(newValue);\n        }\n      }\n    } else {\n      setSelectedStartDate(selectedDate);\n      const newValue: DateTimeValue = {\n        startDate: selectedDate,\n        ...(mode === \"datetime\" && { time: selectedTime }),\n      };\n      onChange?.(newValue);\n      if (mode === \"date\") {\n        setIsOpen(false);\n      }\n    }\n  };\n\n  const handleTimeChange = (time: string) => {\n    setSelectedTime(time);\n    const newValue: DateTimeValue = {\n      startDate: selectedStartDate!,\n      ...(selectedEndDate && { endDate: selectedEndDate }),\n      time,\n    };\n    onChange?.(newValue);\n  };\n\n  const isDateInRange = (date: Date) => {\n    if (!selectedStartDate || !selectedEndDate) return false;\n    const checkDate = new Date(\n      date.getFullYear(),\n      date.getMonth(),\n      date.getDate(),\n    );\n    const start = new Date(\n      selectedStartDate.getFullYear(),\n      selectedStartDate.getMonth(),\n      selectedStartDate.getDate(),\n    );\n    const end = new Date(\n      selectedEndDate.getFullYear(),\n      selectedEndDate.getMonth(),\n      selectedEndDate.getDate(),\n    );\n    return checkDate >= start && checkDate <= end;\n  };\n\n  const isDateSelected = (date: Date) => {\n    if (selectedStartDate && isSameDay(date, selectedStartDate)) return true;\n    if (selectedEndDate && isSameDay(date, selectedEndDate)) return true;\n    return false;\n  };\n\n  const isSameDay = (date1: Date, date2: Date) => {\n    return (\n      date1.getFullYear() === date2.getFullYear() &&\n      date1.getMonth() === date2.getMonth() &&\n      date1.getDate() === date2.getDate()\n    );\n  };\n\n  const getDaysInMonth = () => {\n    const year = currentMonth.getFullYear();\n    const month = currentMonth.getMonth();\n    const firstDay = new Date(year, month, 1);\n    const lastDay = new Date(year, month + 1, 0);\n    const daysInMonth = lastDay.getDate();\n\n    let startDay = firstDay.getDay();\n    if (firstDayOfWeek === 1) {\n      startDay = startDay === 0 ? 6 : startDay - 1;\n    }\n\n    const days = [];\n\n    for (let i = 0; i < startDay; i++) {\n      const prevDate = new Date(year, month, -(startDay - 1 - i));\n      days.push({ date: prevDate, isCurrentMonth: false });\n    }\n\n    for (let i = 1; i <= daysInMonth; i++) {\n      days.push({ date: new Date(year, month, i), isCurrentMonth: true });\n    }\n\n    const remainingDays = 42 - days.length;\n    for (let i = 1; i <= remainingDays; i++) {\n      days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false });\n    }\n\n    return days;\n  };\n\n  const navigateMonth = (direction: number) => {\n    setCurrentMonth(\n      new Date(\n        currentMonth.getFullYear(),\n        currentMonth.getMonth() + direction,\n        1,\n      ),\n    );\n  };\n\n  const generateTimeOptions = () => {\n    const times = [];\n    for (let hour = 1; hour <= 12; hour++) {\n      for (let minute = 0; minute < 60; minute += 15) {\n        const minuteStr = minute.toString().padStart(2, \"0\");\n        times.push(`${hour}:${minuteStr} AM`);\n        times.push(`${hour}:${minuteStr} PM`);\n      }\n    }\n    return times;\n  };\n\n  const generateYears = () => {\n    const currentYear = new Date().getFullYear();\n    const years = [];\n    for (let i = currentYear - 100; i <= currentYear + 10; i++) {\n      years.push(i);\n    }\n    return years;\n  };\n\n  const handleYearMonthSelect = () => {\n    setCurrentMonth(new Date(tempYear, tempMonth, 1));\n    setShowYearMonthPicker(false);\n  };\n\n  return (\n    <div className=\"mb-4\">\n      {label && (\n        <label\n          htmlFor={id}\n          className=\"mb-1 block text-sm font-medium text-gray-600\"\n        >\n          {label}\n          {required && <span className=\"ml-1 text-red-500\">*</span>}\n        </label>\n      )}\n\n      <div className=\"relative\">\n        <div\n          ref={inputRef}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\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 cursor-not-allowed\"\n              : \"bg-gray-100 text-dark cursor-pointer hover:bg-gray-50\"\n          } focus:outline-none focus:ring-1 focus:ring-primary ${className} ${sizeClasses[size]} flex items-center justify-between`}\n        >\n          <span\n            className={getDisplayValue() ? \"text-gray-900\" : \"text-gray-400\"}\n          >\n            {getDisplayValue() || placeholder || \"Select date...\"}\n          </span>\n          <svg\n            className={`w-5 h-5 text-gray-400 transition-transform ${isOpen ? \"rotate-180\" : \"\"}`}\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n            />\n          </svg>\n        </div>\n\n        {isOpen && !disabled && (\n          // <div\n          //   ref={dropdownRef}\n          //   className=\"absolute z-[1000] mt-1 bg-white border border-gray-200 rounded-[12px] shadow-lg backdrop-blur-sm bg-white/95 p-4 min-w-[320px]\"\n          // >\n          <div\n            ref={dropdownRef}\n            className=\"absolute z-[1000] mt-1 bg-white border border-gray-200 rounded-[12px] shadow-lg backdrop-blur-sm bg-white/95 p-4 min-w-[320px] max-h-[600px] overflow-y-auto\"\n          >\n            {!showYearMonthPicker ? (\n              <>\n                {/* Month/Year Navigation */}\n                <div className=\"flex items-center justify-between mb-4\">\n                  <button\n                    type=\"button\"\n                    onClick={() => navigateMonth(-1)}\n                    className=\"p-2 hover:bg-gray-100 rounded-lg transition-colors\"\n                  >\n                    <ChevronLeft className=\"w-5 h-5 text-gray-600\" />\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      setShowYearMonthPicker(true);\n                      setTempYear(currentMonth.getFullYear());\n                      setTempMonth(currentMonth.getMonth());\n                    }}\n                    className=\"px-4 py-2 font-semibold text-gray-900 hover:bg-gray-100 rounded-lg transition-colors\"\n                  >\n                    {months[currentMonth.getMonth()]}{\" \"}\n                    {currentMonth.getFullYear()}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    onClick={() => navigateMonth(1)}\n                    className=\"p-2 hover:bg-gray-100 rounded-lg transition-colors\"\n                  >\n                    <ChevronRight className=\"w-5 h-5 text-gray-600\" />\n                  </button>\n                </div>\n\n                {/* Week Days Header */}\n                <div className=\"grid grid-cols-7 gap-1 mb-2\">\n                  {weekDays.map((day) => (\n                    <div\n                      key={day}\n                      className=\"text-center text-xs font-semibold text-gray-600 py-2\"\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </div>\n\n                {/* Calendar Grid */}\n                <div className=\"grid grid-cols-7 gap-1 mb-4\">\n                  {getDaysInMonth().map((dayObj, index) => {\n                    const { date, isCurrentMonth } = dayObj;\n                    const isSelected = isDateSelected(date);\n                    const isInRange = isDateInRange(date);\n                    const isToday = isSameDay(date, new Date());\n                    const isStartDate =\n                      selectedStartDate && isSameDay(date, selectedStartDate);\n                    const isEndDate =\n                      selectedEndDate && isSameDay(date, selectedEndDate);\n\n                    return (\n                      <button\n                        key={index}\n                        type=\"button\"\n                        onClick={() => handleDateClick(date)}\n                        disabled={!isCurrentMonth}\n                        className={`\n                          w-9 h-9 text-sm transition-all duration-200 relative flex items-center justify-center font-medium\n                          ${isCurrentMonth ? \"text-gray-900\" : \"text-gray-300 cursor-not-allowed\"}\n                          ${\n                            isSelected\n                              ? \"bg-primary-500 text-white font-semibold rounded-full shadow-md\"\n                              : isInRange\n                                ? \"bg-primary-100 text-primary-700\"\n                                : \"hover:bg-gray-100 rounded-lg\"\n                          }\n                          ${isToday && !isSelected ? \"ring-2 ring-primary-400\" : \"\"}\n                          ${isStartDate || isEndDate ? \"rounded-full\" : \"\"}\n                          ${!isCurrentMonth ? \"opacity-40\" : \"\"}\n                        `}\n                      >\n                        {date.getDate()}\n                      </button>\n                    );\n                  })}\n                </div>\n\n                {/* Time Picker */}\n                {(mode === \"datetime\" || mode === \"datetimerange\") && (\n                  <div className=\"border-t border-gray-100 pt-4\">\n                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n                      Time\n                    </label>\n                    <select\n                      value={selectedTime}\n                      onChange={(e) => handleTimeChange(e.target.value)}\n                      className=\"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white\"\n                    >\n                      {generateTimeOptions().map((time) => (\n                        <option key={time} value={time}>\n                          {time}\n                        </option>\n                      ))}\n                    </select>\n                  </div>\n                )}\n\n                {/* Action Buttons */}\n                <div className=\"flex justify-end space-x-2 mt-4 pt-4 border-t border-gray-100\">\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      setIsOpen(false);\n                      setSelectedStartDate(null);\n                      setSelectedEndDate(null);\n                      setIsSelectingEnd(false);\n                      onChange?.({});\n                    }}\n                    className=\"px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors font-medium\"\n                  >\n                    Clear\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsOpen(false)}\n                    className=\"px-4 py-2 text-sm bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors font-medium\"\n                  >\n                    Done\n                  </button>\n                </div>\n              </>\n            ) : (\n              /* Year & Month Picker */\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <h3 className=\"text-sm font-semibold text-gray-900\">\n                    Select Month & Year\n                  </h3>\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowYearMonthPicker(false)}\n                    className=\"text-gray-400 hover:text-gray-600\"\n                  >\n                    <svg\n                      className=\"w-5 h-5\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M6 18L18 6M6 6l12 12\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n\n                {/* Year Selector */}\n                <div>\n                  <label className=\"block text-xs font-medium text-gray-700 mb-2\">\n                    Year\n                  </label>\n                  <select\n                    value={tempYear}\n                    onChange={(e) => setTempYear(parseInt(e.target.value))}\n                    className=\"w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white font-medium\"\n                  >\n                    {generateYears().map((year) => (\n                      <option key={year} value={year}>\n                        {year}\n                      </option>\n                    ))}\n                  </select>\n                </div>\n\n                {/* Month Grid */}\n                <div>\n                  <label className=\"block text-xs font-medium text-gray-700 mb-2\">\n                    Month\n                  </label>\n                  <div className=\"grid grid-cols-3 gap-2\">\n                    {monthsShort.map((month, index) => (\n                      <button\n                        key={month}\n                        type=\"button\"\n                        onClick={() => setTempMonth(index)}\n                        className={`\n                          px-3 py-2 text-sm font-medium rounded-lg transition-colors\n                          ${\n                            tempMonth === index\n                              ? \"bg-primary-500 text-white\"\n                              : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n                          }\n                        `}\n                      >\n                        {month}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Confirm Button */}\n                <button\n                  type=\"button\"\n                  onClick={handleYearMonthSelect}\n                  className=\"w-full px-4 py-2 text-sm bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors font-medium\"\n                >\n                  Apply\n                </button>\n              </div>\n            )}\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 DateTimePicker;\n\n// Demo component\nexport const DateTimePickerDemo = () => {\n  const [singleDate, setSingleDate] = useState<DateTimeValue>({});\n  const [dateTime, setDateTime] = useState<DateTimeValue>({});\n  const [dateRange, setDateRange] = useState<DateTimeValue>({});\n  const [dateTimeRange, setDateTimeRange] = useState<DateTimeValue>({});\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6 bg-gray-50 min-h-screen\">\n      <h1 className=\"text-3xl font-bold mb-8 text-gray-900\">\n        DateTime Picker Component\n      </h1>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n        <div className=\"space-y-6\">\n          <DateTimePicker\n            id=\"single-date\"\n            label=\"Single Date\"\n            value={singleDate}\n            onChange={setSingleDate}\n            placeholder=\"Select a date\"\n            mode=\"date\"\n            helpText=\"Choose any single date\"\n            size=\"md\"\n          />\n\n          <DateTimePicker\n            id=\"datetime\"\n            label=\"Date & Time\"\n            value={dateTime}\n            onChange={setDateTime}\n            placeholder=\"Select date and time\"\n            mode=\"datetime\"\n            helpText=\"Choose date with specific time\"\n            size=\"md\"\n          />\n        </div>\n\n        <div className=\"space-y-6\">\n          <DateTimePicker\n            id=\"date-range\"\n            label=\"Date Range\"\n            value={dateRange}\n            onChange={setDateRange}\n            placeholder=\"Select date range\"\n            mode=\"daterange\"\n            helpText=\"Choose start and end dates\"\n            size=\"md\"\n          />\n\n          <DateTimePicker\n            id=\"datetime-range\"\n            label=\"Date & Time Range\"\n            value={dateTimeRange}\n            onChange={setDateTimeRange}\n            placeholder=\"Select date and time range\"\n            mode=\"datetimerange\"\n            helpText=\"Choose date range with time\"\n            size=\"md\"\n          />\n        </div>\n      </div>\n\n      <div className=\"mt-12 grid grid-cols-1 md:grid-cols-2 gap-8\">\n        <div className=\"space-y-4\">\n          <h3 className=\"text-lg font-semibold text-gray-800\">Single Date:</h3>\n          <pre className=\"bg-white p-4 rounded-lg border text-sm overflow-x-auto\">\n            {JSON.stringify(singleDate, null, 2)}\n          </pre>\n\n          <h3 className=\"text-lg font-semibold text-gray-800\">DateTime:</h3>\n          <pre className=\"bg-white p-4 rounded-lg border text-sm overflow-x-auto\">\n            {JSON.stringify(dateTime, null, 2)}\n          </pre>\n        </div>\n\n        <div className=\"space-y-4\">\n          <h3 className=\"text-lg font-semibold text-gray-800\">Date Range:</h3>\n          <pre className=\"bg-white p-4 rounded-lg border text-sm overflow-x-auto\">\n            {JSON.stringify(dateRange, null, 2)}\n          </pre>\n\n          <h3 className=\"text-lg font-semibold text-gray-800\">\n            DateTime Range:\n          </h3>\n          <pre className=\"bg-white p-4 rounded-lg border text-sm overflow-x-auto\">\n            {JSON.stringify(dateTimeRange, null, 2)}\n          </pre>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["DateTimePicker","_a","id","label","_b","value","_c","size","onChange","placeholder","error","_d","required","helpText","_e","className","_f","disabled","_g","mode","minDate","maxDate","showWeekNumbers","_j","firstDayOfWeek","__rest","_k","useState","isOpen","setIsOpen","_l","Date","currentMonth","setCurrentMonth","_m","startDate","selectedStartDate","setSelectedStartDate","_o","endDate","selectedEndDate","setSelectedEndDate","_p","time","selectedTime","setSelectedTime","_q","isSelectingEnd","setIsSelectingEnd","_r","showYearMonthPicker","setShowYearMonthPicker","_s","getFullYear","tempYear","setTempYear","_t","getMonth","tempMonth","setTempMonth","dropdownRef","useRef","inputRef","weekDays","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","formatDate","date","toLocaleDateString","year","month","day","formatDateTime","dateStr","concat","getDisplayValue","isSameDay","date1","date2","getDate","navigateMonth","direction","_jsxs","children","htmlFor","_jsx","ref","onClick","sm","md","lg","fill","stroke","viewBox","strokeLinecap","strokeLinejoin","strokeWidth","d","type","e","parseInt","currentYear","years","i","push","generateYears","map","index","_Fragment","ChevronLeft","ChevronRight","firstDay","daysInMonth","startDay","getDay","days","prevDate","isCurrentMonth","remainingDays","length","getDaysInMonth","dayObj","isSelected","isDateSelected","isInRange","checkDate","start","end","isDateInRange","isToday","isStartDate","isEndDate","selectedDate","newValue","__assign","undefined","handleDateClick","handleTimeChange","times","hour","minute","minuteStr","toString","padStart","generateTimeOptions","singleDate","setSingleDate","dateTime","setDateTime","dateRange","setDateRange","dateTimeRange","setDateTimeRange","JSON","stringify"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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