{"_id":"@byteflow-ui/aspect-ratio","_rev":"3-ae7d53ae7e12417cc70f5e34b61585d1","name":"@byteflow-ui/aspect-ratio","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@byteflow-ui/aspect-ratio","version":"1.0.0","keywords":["react","aspect-ratio","layout","ui","component"],"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","_id":"@byteflow-ui/aspect-ratio@1.0.0","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"dist":{"shasum":"1db19be59a30db734dcd398144631d834baf8b40","tarball":"https://registry.npmjs.org/@byteflow-ui/aspect-ratio/-/aspect-ratio-1.0.0.tgz","fileCount":10,"integrity":"sha512-tC+GNaYDg8YMbmkpiWpL2fcj0iW4PTh/Le5/STG6z+FEJbI1K6J/n6F+Fj2BSlK+r88enq9E5JpKihRYLzz6Kw==","signatures":[{"sig":"MEUCID9t4HAcPIb02DxxFOQW/rFzQIAtS1DOVTg86DC/g9nOAiEArzE7Qz7gqLywPDRJdw++5pMuzW1JiBROyp+aMXL7YBs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5040},"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":"Componente Aspect Ratio para controlar proporciones de elementos en Byteflow-UI.","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/aspect-ratio_1.0.0_1772841808041_0.29143533761303764","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@byteflow-ui/aspect-ratio","version":"1.0.1","keywords":["react","aspect-ratio","layout","ui","component"],"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","_id":"@byteflow-ui/aspect-ratio@1.0.1","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"dist":{"shasum":"8e6983287f7903ed8dd61cd061db5233e4bf6cdc","tarball":"https://registry.npmjs.org/@byteflow-ui/aspect-ratio/-/aspect-ratio-1.0.1.tgz","fileCount":10,"integrity":"sha512-u643JwHwsYKBaGOzUKi9Jp8MWWZDJ10EQH22IgsklQQqtXMiEjxkCgvJvoddF8eOuXI9xd/+O1EWT3iouWbCUQ==","signatures":[{"sig":"MEUCIQD8dm6o0NSPMGinF0aR1YzDknjB1pXrkGRkrpnq5LvMsAIgM4w9JS0GgMXh4pegmxjXI9opVmF9so5ME7G/0HWln8I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5091},"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":"Componente Aspect Ratio para controlar proporciones de elementos en Byteflow-UI.","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/aspect-ratio_1.0.1_1772896525134_0.916762624545066","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@byteflow-ui/aspect-ratio","version":"1.0.2","description":"Componente Aspect Ratio para controlar proporciones de elementos en Byteflow-UI.","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","aspect-ratio","layout","ui","component"],"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/aspect-ratio@1.0.2","gitHead":"6b38037adcf9ba11da2f9ba43fbd91304e32f774","_nodeVersion":"22.14.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-fEyKyHoWS21KeWig2p0cn9OedvvlUwyKV3jMSDbzq2pZ3k7qOXQDYHFsjvtyIDoMLyGYDlJvCodd2pUHbDo+CQ==","shasum":"acb145423074e24cdb75311af308c428b7688f66","tarball":"https://registry.npmjs.org/@byteflow-ui/aspect-ratio/-/aspect-ratio-1.0.2.tgz","fileCount":10,"unpackedSize":5091,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHS2ZW2BVakehUcN7CSe1V5ghKsgMe/X33EioQ+drOGnAiEA0TPboca0iwv9AkMI3pNeT+F6z3ISAL7D7sZ/QZGXrHo="}]},"_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/aspect-ratio_1.0.2_1774796929443_0.5864374810411217"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-07T00:03:27.964Z","modified":"2026-03-29T15:08:49.725Z","1.0.0":"2026-03-07T00:03:28.224Z","1.0.1":"2026-03-07T15:15:25.287Z","1.0.2":"2026-03-29T15:08:49.586Z"},"author":{"name":"Victor Hugo Cornejo Calderon","email":"rex2002xp@gmail.com"},"license":"MIT","keywords":["react","aspect-ratio","layout","ui","component"],"description":"Componente Aspect Ratio para controlar proporciones de elementos en Byteflow-UI.","maintainers":[{"name":"rex2002xp","email":"rex2002xp@gmail.com"}],"readme":"# @byteflow-ui/aspect-ratio\n\nComponente Aspect Ratio para controlar proporciones de elementos en el kit **Byteflow-UI**.\n\n## Características\n\n- 📐 **Preciso**: Mantiene proporciones exactas mediante la propiedad CSS `aspect-ratio`.\n- 🖼️ **Multimedia**: Ideal para imágenes, videos y mapas.\n- 🌓 **Tematizable**: Consistente con el resto del kit.\n\n## Instalación\n\n```bash\nnpm install @byteflow-ui/aspect-ratio\n```\n\n## Uso\n\n```tsx\nimport { AspectRatio } from '@byteflow-ui/aspect-ratio';\nimport '@byteflow-ui/aspect-ratio/dist/index.css';\n\nfunction ImageCard() {\n  return (\n    <div style={{ width: 300 }}>\n      <AspectRatio ratio={16 / 9}>\n        <img \n          src=\"https://images.unsplash.com/photo-1588345921523-c2dcd57f7dcb?w=800&dpr=2\" \n          alt=\"Paisaje\" \n        />\n      </AspectRatio>\n    </div>\n  );\n}\n```\n\n## Proporciones Comunes\n\n- **Cuadrado**: `ratio={1}`\n- **Video HD**: `ratio={16 / 9}`\n- **Fotografía cinematográfica**: `ratio={21 / 9}`\n- **Retrato**: `ratio={3 / 4}`\n","readmeFilename":"README.md"}