{"_id":"@byteflow-ui/money-input","_rev":"3-f3f78542a348be738955bb5c355f1d0d","name":"@byteflow-ui/money-input","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@byteflow-ui/money-input","version":"1.0.0","keywords":["react","currency","input","money","formatting","rtl"],"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","_id":"@byteflow-ui/money-input@1.0.0","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"dist":{"shasum":"4cc4ff5e13b10dd9db5c153991656e23ac3cb167","tarball":"https://registry.npmjs.org/@byteflow-ui/money-input/-/money-input-1.0.0.tgz","fileCount":10,"integrity":"sha512-WxEPSaBieED1kFPutvm4ORVBZyoLgwEKuFa0tTwL/4WfVvQ34AEhopxNe/WQjXlck1D23lUvyctJ93K3HstJLw==","signatures":[{"sig":"MEYCIQCagLJ/TyVcJsgHbDwS+9s4PmWycmBtv0D3TbMLSjIYugIhAIoi5REeB2wg2cvysnBly2h/0HUB/iEQ4JAwiJOnkoes","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26202},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./dist/index.css":"./dist/index.css"},"gitHead":"35560fe45560623a06f03ca33821bb15e2199768","scripts":{"dev":"tsup src/index.ts --watch --dts","lint":"tsc","build":"tsup"},"_npmUser":{"name":"rex2002xp","email":"rex2002xp@gmail.com"},"_npmVersion":"11.4.1","description":"Un componente de entrada de moneda para React con formato de derecha a izquierda.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.9.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=16","react-dom":">=16"},"_npmOperationalInternal":{"tmp":"tmp/money-input_1.0.0_1772841913079_0.816698722687131","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@byteflow-ui/money-input","version":"1.0.1","keywords":["react","currency","input","money","formatting","rtl"],"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","_id":"@byteflow-ui/money-input@1.0.1","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"dist":{"shasum":"f7a3279111b2387c892247009375545516d2098b","tarball":"https://registry.npmjs.org/@byteflow-ui/money-input/-/money-input-1.0.1.tgz","fileCount":10,"integrity":"sha512-SHY7tdFg8B6XX54bzZrE3miJ2LvteN2xc5gIBt57xCQYUd02rhqBUck+0gxWKyNdCgBiVmCanf/ga5yVBZcYzw==","signatures":[{"sig":"MEUCIQDEfOdngz1Mn3Wwr5zb93rvtD6wy9MvRdtBxSrqcyPAcwIgPer0MciErFEowaD2W79hrz/syRQzT/q9TR4FyLuhgfo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26397},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./index.css":"./dist/index.css"},"gitHead":"d244fae25951d295ecf46dfa671ff02124bbde2f","scripts":{"dev":"tsup src/index.ts --watch --dts","lint":"tsc","build":"tsup"},"_npmUser":{"name":"rex2002xp","email":"rex2002xp@gmail.com"},"_npmVersion":"11.4.1","description":"Un componente de entrada de moneda para React con formato de derecha a izquierda.","directories":{},"sideEffects":["./dist/index.css"],"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.4","react-dom":"^19.2.4","typescript":"^5.9.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=16","react-dom":">=16"},"_npmOperationalInternal":{"tmp":"tmp/money-input_1.0.1_1772896693781_0.1941083472848104","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@byteflow-ui/money-input","version":"1.0.2","description":"Un componente de entrada de moneda para React con formato de derecha a izquierda.","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./index.css":"./dist/index.css"},"scripts":{"dev":"tsup src/index.ts --watch --dts","build":"tsup","lint":"tsc"},"keywords":["react","currency","input","money","formatting","rtl"],"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","type":"module","peerDependencies":{"react":">=16","react-dom":">=16"},"devDependencies":{"@types/react":"^19.2.14","@types/react-dom":"^19.2.3","react":"^19.2.4","react-dom":"^19.2.4","tsup":"^8.5.1","typescript":"^5.9.3"},"sideEffects":["./dist/index.css"],"_id":"@byteflow-ui/money-input@1.0.2","gitHead":"6b38037adcf9ba11da2f9ba43fbd91304e32f774","_nodeVersion":"22.14.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-sFBisDcZqc3nPYrM7xdAPb7LvUSTHfvFsP3nAZ6NPF7dRq7jf/QAaMBDmSJRL13VFCW0m4yvEV6hZ+/BaokuWA==","shasum":"ecc6cc1a4d527f837364797230eed5392949d546","tarball":"https://registry.npmjs.org/@byteflow-ui/money-input/-/money-input-1.0.2.tgz","fileCount":10,"unpackedSize":26397,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCYkgGvs1yUDe6379+6jajFYjk1znlOIOZ89fN+GoEunwIgHVXujDiGGbFkGAY1h1X6Rkc03Inpvf1aMzNehE22Zos="}]},"_npmUser":{"name":"rex2002xp","email":"rex2002xp@gmail.com"},"directories":{},"maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/money-input_1.0.2_1774797019123_0.8454986628737475"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-07T00:05:12.956Z","modified":"2026-03-29T15:10:19.420Z","1.0.0":"2026-03-07T00:05:13.216Z","1.0.1":"2026-03-07T15:18:13.939Z","1.0.2":"2026-03-29T15:10:19.279Z"},"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","keywords":["react","currency","input","money","formatting","rtl"],"description":"Un componente de entrada de moneda para React con formato de derecha a izquierda.","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"readme":"# 💰 Money Input React RTL\n\n**El componente de entrada de moneda más elegante, ligero e intuitivo para React.**\n\n[![NPM Version](https://img.shields.io/npm/v/@byteflow-ui/money-input.svg)](https://www.npmjs.com/package/@byteflow-ui/money-input)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nDiseñado específicamente para ofrecer una experiencia de usuario financiera premium mediante una máscara de entrada de **derecha a izquierda (RTL)**.\n\n---\n\n## ✨ ¿Por qué elegir Byteflow UI Money Input?\n\n1.  **DX Superior**: API intuitiva, totalmente tipado y sin dependencias pesadas.\n2.  **Rendimiento**: < 1.5kb minificado. Carga instantánea.\n3.  **Ultra Personalizable**: Control total mediante variables CSS y props de estilo.\n4.  **Localización**: Soporte nativo para diferentes configuraciones regionales (`locale`).\n\n## 🚀 Instalación rápida\n\n```bash\nnpm install @byteflow-ui/money-input\n# o\nyarn add @byteflow-ui/money-input\n```\n\n## 🛠️ Uso Básico\n\n```tsx\nimport { MoneyInput } from '@byteflow-ui/money-input';\nimport '@byteflow-ui/money-input/dist/index.css';\n\nfunction PaymentForm() {\n  const [total, setTotal] = useState(1500); // Equivale a $15.00\n\n  return (\n    <MoneyInput\n      label=\"Monto de Inscripción\"\n      value={total}\n      onChange={setTotal}\n      currencySymbol=\"€\"\n      locale=\"de-DE\"\n    />\n  );\n}\n```\n\n## 🎨 Personalización Avanzada (Experience First)\n\n### 1. Variables CSS (Recomendado)\nPuedes cambiar la estética global de los componentes simplemente definiendo estas variables en tu CSS:\n\n```css\n:root {\n  --bf-money-input-primary-color: #ff5722; /* Color de enfoque */\n  --bf-money-input-bg-color: #f9f9f9;      /* Fondo */\n  --bf-money-input-border-radius: 4px;     /* Bordes rectos */\n}\n```\n\n### 2. Integración con Tailwind CSS\nEl componente acepta `className` para el contenedor y pronto soportará clases directas para el input.\n\n```tsx\n<MoneyInput\n  className=\"my-8 max-w-sm font-mono\"\n  label=\"Custom Tailwind Style\"\n/>\n```\n\n## 📋 Propiedades (API Reference)\n\n| Prop | Tipo | Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `value` | `number` | `0` | Valor en centavos (ej: 100 = $1.00) |\n| `currencySymbol` | `string` | `$` | Símbolo de la moneda |\n| `locale` | `string` | `en-US` | Configuración regional para formatos numéricos |\n| `onChange` | `function` | `-` | Recibe el nuevo valor en centavos |\n| `label` | `string` | `-` | Etiqueta superior opcional |\n| `disabled` | `boolean` | `false` | Deshabilitar interacción |\n| `containerStyle` | `CSSProperties` | `-` | Estilos inline para el contenedor |\n| `inputStyle` | `CSSProperties` | `-` | Estilos inline para el input |\n\n---\n\n## 🏗️ Cómo contribuir\nSi quieres extender este componente para tu uso personal o público:\n\n1. Clona el repositorio.\n2. `npm install`\n3. `npm run dev` para ver los cambios en tiempo real en la carpeta `example`.\n4. `npm run build` para generar la distribución final.\n\n## 📄 Licencia\nMIT © Realizado con ❤️ para la comunidad de React.\n","readmeFilename":"README.md"}