{"_id":"@codeplex-sac/formularios","_rev":"8-b1decac93e87a1c78f41b3767a895098","name":"@codeplex-sac/formularios","dist-tags":{"latest":"0.1.10"},"versions":{"0.1.2":{"name":"@codeplex-sac/formularios","version":"0.1.2","_id":"@codeplex-sac/formularios@0.1.2","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"37b85a2c420977b25c7088e7400b3f269d76052c","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.2.tgz","fileCount":21,"integrity":"sha512-Czi2mZxanoXJ5+6zlDMlsUBoQk6XxbLdA1qb4jVyTPICCLzm9HJ6F4skylm0f/B5m2gTQ8q+RnKONge/G16vDg==","signatures":[{"sig":"MEUCIFMS7Xkj9kcQZE2zVvnJkS1yacoHAu4MxEtXl3liNyBjAiEA6Fi/AgWAtV6OLC03EXj56Au/M7ca6aooPbIyfygqzi8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":838524},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"a79a8026b56a9210697ddccebd35f8eab7c3686a","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.2_1780500265657_0.7932741528773111","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@codeplex-sac/formularios","version":"0.1.4","_id":"@codeplex-sac/formularios@0.1.4","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"3ca8460de10010456695e72c43f9ea2689a0739a","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.4.tgz","fileCount":22,"integrity":"sha512-L4W7O5D/Vb06r/6cLznw7YkSjlfMVZGNVravcnYxekz/p3Wl+4B3VUMEOTqxe6rJcRRyJPJBB57BuB6EQDpBXA==","signatures":[{"sig":"MEUCIC3yqRUfnf/Q0IfTr6X7Tyw8kvlTHFZWYqD5S0G2KOWqAiEA0qLKtZQUw2tSpqH49quRbcvx9ZvC/VYZijJBeeWmGgQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":852596},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"c886c9d5d03a410cd5133a1c63b41eb74189be22","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.4_1781294909887_0.8299897387803272","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@codeplex-sac/formularios","version":"0.1.5","_id":"@codeplex-sac/formularios@0.1.5","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"6fdf4c94db07003a239310258d942ac422d62e2b","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.5.tgz","fileCount":22,"integrity":"sha512-QytWVkmK8vmrsByz9xN1lLZhGDc1cw9AAFImf9Q+Kwfozu3XKHnLyaPWhLCp8lcrtVSRVV8/bW5iOevdK6IpmQ==","signatures":[{"sig":"MEUCIQCpgmSzEggq5Y2yhpwcNKAA4J9Fq2esN11368+t+k1hpwIgSZOLIgIfDL7J5le1jfUFvn7SNyHNazXkQe4jvRBvg3o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":852596},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"94151effdd9fac04980a1149ec780786fc70cc36","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.5_1781544026971_0.5075602430582469","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@codeplex-sac/formularios","version":"0.1.6","_id":"@codeplex-sac/formularios@0.1.6","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"868210fd347074d783ba4421551c289e1df90c23","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.6.tgz","fileCount":22,"integrity":"sha512-+OJunxl8JAgvf9DLl10XxnDt67HQ9Y5+uWhydMUSp5qCFACwRNSm044FmrxUgbMRVbqJnvj0BavKmC4nxwiKEQ==","signatures":[{"sig":"MEYCIQDzGr3U6+my4+TxRCEjQIe9yEqLDSPPwp5Q2uNEb8rKnAIhAPiNgPuNcgHxV9NNNOMYCdVMNc3Hwj+E/fQizAcBHqKq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":763426},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"94151effdd9fac04980a1149ec780786fc70cc36","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","react-colorful":"^5.7.0","react-dropzone":"^15.0.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.6_1781977521835_0.14702024693183113","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@codeplex-sac/formularios","version":"0.1.7","_id":"@codeplex-sac/formularios@0.1.7","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"60ac86be91465a2bf18714a345a29d807145d8d1","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.7.tgz","fileCount":22,"integrity":"sha512-xgla5MpPPVbhcrR431ipLxtHT4s/eFz8y2mb1QIGhf1bHsmqRa5duRS3xdDdbloJA+9r0MsDB1sUFIyHTqAEHQ==","signatures":[{"sig":"MEUCIQDT8IZDetQlj+411GtIQby2Uy3rXI+Vg/+Csbc3QOz/mgIgbwv+Be+q/7rhPIIa2FnGcjHAUUvlWMF3t4OqFQVYeU8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":763426},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"c0cbacfc4475c905cb4d7a510f963be540061d0a","_npmUser":{"name":"b_manuel","email":"b_manuel@codeplex.pe"},"_npmVersion":"11.16.0","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","react-colorful":"^5.7.0","react-dropzone":"^15.0.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.7_1782918118762_0.06942379092953588","host":"s3://npm-registry-packages-npm-production"}},"0.1.8":{"name":"@codeplex-sac/formularios","version":"0.1.8","_id":"@codeplex-sac/formularios@0.1.8","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"55a2df105e2fb0a512df7aeb4a166bf85df624c8","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.8.tgz","fileCount":22,"integrity":"sha512-2Fs4kxdBEiA1zNNYKjiKhru+gWeVq5YTimoKBzhYIevJANYO5kwusRu67wypdGkINmT/WuAMjcOwYM181ElfEg==","signatures":[{"sig":"MEUCIQCiPx8HSu6dRHm0IoL/oZ9d8aWcGe1SEJJX9rfaUfeqcwIgRAmw8CwVY5UpB0OwP9oRWZzZbVZ8rjHptCRbq8ALzl4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":763642},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"c0cbacfc4475c905cb4d7a510f963be540061d0a","_npmUser":{"name":"b_manuel","email":"b_manuel@codeplex.pe"},"_npmVersion":"11.16.0","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","react-colorful":"^5.7.0","react-dropzone":"^15.0.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.8_1783633567074_0.971976501940172","host":"s3://npm-registry-packages-npm-production"}},"0.1.9":{"name":"@codeplex-sac/formularios","version":"0.1.9","_id":"@codeplex-sac/formularios@0.1.9","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"2abba04d88ebc7ee290adee0d8f900a944d44686","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.9.tgz","fileCount":16,"integrity":"sha512-ruEk8+ZTqmJFztMR638lgwVQyZ4HIXx081/nBYVHCJBxV/abHP1e+QlsnoXfNFJHksz7Rt128jsqGxiXqTRYRw==","signatures":[{"sig":"MEUCIQCQOjKOPKfSfV+FPBtzwzdv+YXymq3Yv18XvKYCGq1HmwIgcMF/x1uNIih7bQibQqKkFgdLR0OIIwM2aJHAcd1mELg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":767525},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"7cf6b4d92888cd3423990ba2bf959e18292bb144","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"11.6.2","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","directories":{},"_nodeVersion":"24.11.1","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.6","@emotion/react":"^11.14.0","react-colorful":"^5.7.0","react-dropzone":"^15.0.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/formularios_0.1.9_1786560129610_0.7277510203393363","host":"s3://npm-registry-packages-npm-production"}},"0.1.10":{"name":"@codeplex-sac/formularios","version":"0.1.10","type":"module","main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"publishConfig":{"access":"public"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6","@mui/system":"^7.3.7","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","react-colorful":"^5.7.0","react-dropzone":"^15.0.0"},"gitHead":"7cf6b4d92888cd3423990ba2bf959e18292bb144","_id":"@codeplex-sac/formularios@0.1.10","description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-zqyD8nXBjx8FQ0+Kd9YMlAtEexg4Ms/EgtUXwsJvrrafORPYMJB6ypcgEHMdZ520wdpc+CyJDkx1He+otLS+/w==","shasum":"2553ab901a6f5bb9e654899eae3f7c93ee87f761","tarball":"https://registry.npmjs.org/@codeplex-sac/formularios/-/formularios-0.1.10.tgz","fileCount":16,"unpackedSize":767526,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCQ2+hoVQK+DF2A0ZZZBsJvZH8F37p/uTXhi2tanNHg/AIhALmd7orrkgi+tRl3thlF3eQC3BrAdV/W39HSpxONNKLA"}]},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"directories":{},"maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/formularios_0.1.10_1786560393729_0.925195962416516"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T15:24:25.481Z","modified":"2026-08-12T18:46:34.250Z","0.1.2":"2026-06-03T15:24:25.924Z","0.1.4":"2026-06-12T20:08:30.107Z","0.1.5":"2026-06-15T17:20:27.138Z","0.1.6":"2026-06-20T17:45:21.983Z","0.1.7":"2026-07-01T15:01:58.925Z","0.1.8":"2026-07-09T21:46:07.225Z","0.1.9":"2026-08-12T18:42:09.799Z","0.1.10":"2026-08-12T18:46:34.047Z"},"description":"Biblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"readme":"# @codeplex-sac/formularios\r\n\r\nBiblioteca de componentes de formulario para aplicaciones React, basada en **Material UI**. Todos los inputs siguen la API en **Español** de la suite `@codeplex-sac/*`.\r\n\r\n## Instalación\r\n\r\n```bash\r\nbun add @codeplex-sac/formularios @codeplex-sac/tema @mui/material @emotion/react @emotion/styled\r\n```\r\n\r\n> [!IMPORTANT]\r\n> Envuelve la aplicación con `CodeplexProveedorTema` de `@codeplex-sac/tema` para que los estilos funcionen correctamente.\r\n\r\n---\r\n\r\n## Componentes\r\n\r\n---\r\n\r\n### CodeplexCampoTexto\r\n\r\nEntrada de texto con iconos, validación visual y soporte multilinea.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexCampoTexto } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexCampoTexto\r\n    etiqueta=\"Correo electrónico\"\r\n    marcador=\"usuario@empresa.com\"\r\n    tipo=\"email\"\r\n    anchoCompleto\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `ReactNode` | — | Texto de la etiqueta superior. |\r\n| `valor` | `string \\| number` | — | Valor controlado del input. |\r\n| `alCambiar` | `ChangeEventHandler` | — | Evento al cambiar el valor. |\r\n| `marcador` | `string` | — | Texto placeholder. |\r\n| `tipo` | `string` | `'text'` | Tipo HTML del input (`email`, `password`, `number`…). |\r\n| `multilinea` | `boolean` | `false` | Activa modo textarea. |\r\n| `filas` | `number` | — | Número fijo de filas en multilinea. |\r\n| `filasMinimas` | `number` | — | Mínimo de filas en multilinea autoajustable. |\r\n| `filasMaximas` | `number` | — | Máximo de filas en multilinea autoajustable. |\r\n| `iconoInicio` | `ReactNode` | — | Icono al inicio del campo. |\r\n| `iconoFin` | `ReactNode` | — | Icono al final del campo. |\r\n| `error` | `boolean` | `false` | Activa estado de error. |\r\n| `mensajeError` | `ReactNode` | — | Texto de error informativo. |\r\n| `textoAyuda` | `ReactNode` | — | Texto de ayuda bajo el campo. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la interacción. |\r\n| `soloLectura` | `boolean` | `false` | Permite visualizar sin editar. |\r\n| `anchoCompleto` | `boolean` | `false` | Ocupa el 100% del contenedor. |\r\n| `alEnfocar` | `FocusEventHandler` | — | Evento al enfocar el campo. |\r\n| `alDesenfocar` | `FocusEventHandler` | — | Evento al perder el foco. |\r\n\r\n---\r\n\r\n### CodeplexCampoNumero\r\n\r\nCampo numérico con botones de incremento/decremento integrados.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexCampoNumero } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexCampoNumero\r\n    etiqueta=\"Cantidad\"\r\n    minimo={1}\r\n    maximo={100}\r\n    paso={1}\r\n    valor={5}\r\n    alCambiar={(val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `string` | — | Texto descriptivo del campo. |\r\n| `valor` | `number` | — | Valor controlado. |\r\n| `alCambiar` | `(val: number) => void` | — | Callback al cambiar. |\r\n| `minimo` | `number` | — | Valor mínimo permitido. |\r\n| `maximo` | `number` | — | Valor máximo permitido. |\r\n| `paso` | `number` | `1` | Incremento por clic en los controles. |\r\n| `mostrarControles` | `boolean` | `true` | Muestra botones +/−. |\r\n| `alineacion` | `'izquierda' \\| 'centro' \\| 'derecha'` | `'centro'` | Alineación del texto. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita el campo. |\r\n| `anchoCompleto` | `boolean` | `false` | Ocupa el 100% del contenedor. |\r\n\r\n---\r\n\r\n### CodeplexSelector\r\n\r\nDropdown con búsqueda, selección múltiple y opción de crear nuevo elemento.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexSelector } from '@codeplex-sac/formularios';\r\n\r\nconst roles = [\r\n  { valor: 'admin', etiqueta: 'Administrador' },\r\n  { valor: 'usuario', etiqueta: 'Usuario' },\r\n];\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexSelector\r\n    etiqueta=\"Rol\"\r\n    opciones={roles}\r\n    buscable\r\n    alCambiar={(val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `string` | — | Label del selector. |\r\n| `opciones` | `{ valor, etiqueta, deshabilitado? }[]` | `[]` | Lista de opciones. |\r\n| `valor` | `string \\| number` | — | Valor seleccionado. |\r\n| `alCambiar` | `SelectChangeEvent handler` | — | Evento de selección. |\r\n| `buscable` | `boolean` | `false` | Activa filtro de búsqueda. |\r\n| `marcador` | `string` | — | Placeholder del buscador. |\r\n| `textoAyuda` | `ReactNode` | — | Texto informativo bajo el selector. |\r\n| `mensajeError` | `string` | — | Texto de error. |\r\n| `alCrearNuevo` | `() => void` | — | Muestra botón \"Crear nuevo\" al final. |\r\n| `textoCrearNuevo` | `string` | `'Crear nuevo'` | Texto del botón de creación. |\r\n| `anchoCompleto` | `boolean` | `false` | Ocupa el 100% del contenedor. |\r\n\r\n---\r\n\r\n### CodeplexAutocompletado\r\n\r\nSelector con búsqueda en tiempo real y soporte para opciones asíncronas.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexAutocompletado } from '@codeplex-sac/formularios';\r\n\r\nconst paises = [\r\n  { etiqueta: 'Perú', valor: 'PE' },\r\n  { etiqueta: 'Chile', valor: 'CL' },\r\n];\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexAutocompletado\r\n    etiqueta=\"País\"\r\n    opciones={paises}\r\n    alCambiar={(val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `opciones` | `any[]` | `[]` | Opciones disponibles. |\r\n| `etiqueta` | `string` | — | Label del campo. |\r\n| `valor` | `any` | — | Valor seleccionado. |\r\n| `alCambiar` | `(valor: any) => void` | — | Evento al seleccionar. |\r\n| `buscable` | `boolean` | `true` | Activa filtrado de opciones. |\r\n| `multiple` | `boolean` | `false` | Permite selección múltiple. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita el campo. |\r\n| `anchoCompleto` | `boolean` | `false` | Ocupa el 100% del contenedor. |\r\n\r\n---\r\n\r\n### CodeplexCasilla\r\n\r\nCheckbox personalizado con estados indeterminado y múltiples variantes visuales.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexCasilla } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexCasilla\r\n    etiqueta=\"Acepto los términos y condiciones\"\r\n    seleccionado={false}\r\n    alCambiar={(_, val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `ReactNode` | — | Texto lateral del checkbox. |\r\n| `seleccionado` | `boolean` | — | Estado marcado. |\r\n| `indeterminado` | `boolean` | `false` | Estado parcial (listas padre/hijo). |\r\n| `tamano` | `'pequeno' \\| 'mediano' \\| 'grande'` | `'mediano'` | Tamaño visual. |\r\n| `color` | `'primario' \\| 'secundario' \\| 'exito' \\| 'error' \\| 'info' \\| 'advertencia'` | `'primario'` | Color al estar marcado. |\r\n| `variante` | `'estandar' \\| 'suave' \\| 'borde'` | `'estandar'` | Estilo visual del cuadro. |\r\n| `posicionEtiqueta` | `'derecha' \\| 'izquierda' \\| 'arriba' \\| 'abajo'` | `'derecha'` | Posición del texto. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la interacción. |\r\n| `error` | `boolean` | `false` | Muestra estado de error. |\r\n| `alCambiar` | `(e, seleccionado: boolean) => void` | — | Callback al cambiar. |\r\n\r\n---\r\n\r\n### CodeplexGrupoRadio\r\n\r\nConjunto de opciones mutuamente excluyentes con diseño personalizado.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexGrupoRadio } from '@codeplex-sac/formularios';\r\n\r\nconst opciones = [\r\n  { valor: 'mensual', etiqueta: 'Mensual' },\r\n  { valor: 'anual', etiqueta: 'Anual' },\r\n];\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexGrupoRadio\r\n    etiqueta=\"Facturación\"\r\n    opciones={opciones}\r\n    valor=\"mensual\"\r\n    alCambiar={(val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `string` | — | Título del grupo. |\r\n| `opciones` | `{ valor, etiqueta, deshabilitado? }[]` | `[]` | Lista de radios. |\r\n| `valor` | `any` | — | Valor seleccionado. |\r\n| `alCambiar` | `(valor: any) => void` | — | Callback al cambiar. |\r\n| `orientacion` | `'horizontal' \\| 'vertical'` | `'vertical'` | Disposición de los radios. |\r\n| `color` | `'primario' \\| 'secundario' \\| 'error' \\| 'exito' \\| 'advertencia' \\| 'info'` | `'primario'` | Color del radio activo. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita todo el grupo. |\r\n\r\n---\r\n\r\n### CodeplexInterruptor\r\n\r\nControl de encendido/apagado (Switch) con soporte de etiquetas y colores semánticos.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexInterruptor } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexInterruptor\r\n    etiqueta=\"Notificaciones activas\"\r\n    seleccionado={true}\r\n    color=\"exito\"\r\n    alCambiar={(_, val) => console.log(val)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `ReactNode` | — | Texto o elemento lateral. |\r\n| `seleccionado` | `boolean` | — | Estado activo/inactivo. |\r\n| `tamano` | `'pequeno' \\| 'mediano'` | `'mediano'` | Tamaño visual. |\r\n| `color` | `'primario' \\| 'secundario' \\| 'exito' \\| 'error' \\| 'advertencia' \\| 'info'` | `'primario'` | Color al estar activo. |\r\n| `posicionEtiqueta` | `'inicio' \\| 'fin' \\| 'arriba' \\| 'abajo'` | `'fin'` | Posición de la etiqueta. |\r\n| `alCambiar` | `(e, checked: boolean) => void` | — | Callback al cambiar estado. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita el interruptor. |\r\n| `error` | `boolean` | `false` | Muestra estado de error. |\r\n| `mensajeError` | `string` | — | Texto de error bajo el control. |\r\n\r\n---\r\n\r\n### CodeplexDeslizador\r\n\r\nSelector de valor o rango numérico con etiqueta de valor flotante.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexDeslizador } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexDeslizador\r\n    etiqueta=\"Porcentaje de descuento\"\r\n    minimo={0}\r\n    maximo={100}\r\n    paso={5}\r\n    valor={25}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `string` | — | Título descriptivo del control. |\r\n| `valor` | `number \\| number[]` | — | Valor actual. |\r\n| `alCambiar` | `(val: number \\| number[]) => void` | — | Callback al mover el control. |\r\n| `minimo` | `number` | `0` | Límite inferior del rango. |\r\n| `maximo` | `number` | `100` | Límite superior del rango. |\r\n| `paso` | `number` | `1` | Incremento mínimo. |\r\n| `mostrarEtiquetaValor` | `'auto' \\| 'siempre' \\| 'nunca'` | `'auto'` | Control del globo de valor. |\r\n| `orientacion` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Dirección del slider. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la interacción. |\r\n\r\n---\r\n\r\n### CodeplexListaTransferencia\r\n\r\nDos columnas que permiten mover elementos entre listas con búsqueda integrada.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexListaTransferencia } from '@codeplex-sac/formularios';\r\n\r\nconst empleados = [\r\n  { id: 1, texto: 'Ana García' },\r\n  { id: 2, texto: 'Carlos López' },\r\n];\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexListaTransferencia\r\n    izquierda={empleados}\r\n    tituloIzquierda=\"Disponibles\"\r\n    tituloDerecha=\"Asignados al proyecto\"\r\n    buscable\r\n    alCambiar={(izq, der) => console.log(izq, der)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `izquierda` | `any[]` | `[]` | Elementos de la columna origen. |\r\n| `derecha` | `any[]` | `[]` | Elementos de la columna destino. |\r\n| `tituloIzquierda` | `string` | `'Izquierda'` | Cabecera de la lista origen. |\r\n| `tituloDerecha` | `string` | `'Derecha'` | Cabecera de la lista destino. |\r\n| `buscable` | `boolean` | `false` | Muestra filtro de búsqueda en ambas listas. |\r\n| `alCambiar` | `(izq: any[], der: any[]) => void` | — | Se ejecuta al mover elementos. |\r\n\r\n---\r\n\r\n### CodeplexAreaTextoAjustable\r\n\r\nTextarea que crece automáticamente con el contenido.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexAreaTextoAjustable } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexAreaTextoAjustable\r\n    etiqueta=\"Descripción\"\r\n    filasMinimas={3}\r\n    filasMaximas={8}\r\n    anchoCompleto\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `etiqueta` | `string` | — | Label del campo. |\r\n| `valor` | `string` | — | Valor controlado. |\r\n| `alCambiar` | `ChangeEventHandler` | — | Evento al cambiar. |\r\n| `filasMinimas` | `number` | `3` | Altura mínima en filas. |\r\n| `filasMaximas` | `number` | — | Altura máxima antes de hacer scroll. |\r\n| `marcador` | `string` | — | Texto placeholder. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la edición. |\r\n| `anchoCompleto` | `boolean` | `false` | Ocupa el 100% del contenedor. |\r\n\r\n---\r\n\r\n### CodeplexCargadorArchivos\r\n\r\nZona de carga de archivos con drag & drop, validación de tipo y tamaño, y lista de archivos cargados.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexCargadorArchivos } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexCargadorArchivos\r\n    tiposAceptados={['image/*', '.pdf']}\r\n    tamanoMaximoMb={5}\r\n    multiple\r\n    alCargar={(archivos) => console.log(archivos)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `tiposAceptados` | `string[]` | — | MIME types o extensiones permitidas. |\r\n| `tamanoMaximoMb` | `number` | — | Tamaño máximo por archivo en MB. |\r\n| `multiple` | `boolean` | `false` | Permite cargar múltiples archivos. |\r\n| `variante` | `'zona' \\| 'compacto' \\| 'boton'` | `'zona'` | Presentación del componente. |\r\n| `alCargar` | `(archivos: File[]) => void` | — | Callback con los archivos validados. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la zona de carga. |\r\n\r\n---\r\n\r\n### CodeplexSelectorColor\r\n\r\nSelector de color con paleta de swatches, input hex y selector nativo del navegador.\r\n\r\n**Ejemplo:**\r\n```tsx\r\nimport { CodeplexSelectorColor } from '@codeplex-sac/formularios';\r\n\r\nexport const Ejemplo = () => (\r\n  <CodeplexSelectorColor\r\n    valor=\"#3B82F6\"\r\n    alCambiar={(color) => console.log(color)}\r\n  />\r\n);\r\n```\r\n\r\n**Props:**\r\n| Propiedad | Tipo | Por defecto | Descripción |\r\n| :--- | :--- | :--- | :--- |\r\n| `valor` | `string` | `'#000000'` | Color en formato hex. |\r\n| `alCambiar` | `(color: string) => void` | — | Callback con el nuevo color. |\r\n| `paleta` | `string[]` | — | Swatches predefinidos. |\r\n| `variante` | `'emergente' \\| 'fija'` | `'emergente'` | Muestra el panel inline o en popup. |\r\n| `deshabilitado` | `boolean` | `false` | Deshabilita la selección. |\r\n\r\n---\r\n\r\n## Personalización\r\n\r\nTodos los componentes heredan la configuración de `CodeplexProveedorTema`. Los colores, radios y sombras se toman del tema activo.\r\n\r\n## Licencia\r\n\r\nPropiedad privada de **Codeplex SAC**. Todos los derechos reservados.\r\n","readmeFilename":"README.md"}