{"_id":"@bolttech/molecules-card","_rev":"17-c8aa6cec03bc8c97844c50d481b4cadb","name":"@bolttech/molecules-card","dist-tags":{"latest":"0.6.2"},"versions":{"0.1.0":{"name":"@bolttech/molecules-card","version":"0.1.0","_id":"@bolttech/molecules-card@0.1.0","maintainers":[{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},{"name":"diogo_aleixo_bolttech","email":"diogo.aleixo@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"achraf.ely","email":"achraf.elyaacoubi@bolttech.io"}],"dist":{"shasum":"4b126c3a3968c26a4c75760aadb1780b9ef0fd60","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.1.0.tgz","fileCount":8,"integrity":"sha512-fPtGx/CuJHirgdPG6zRl02sbEuk13mK0AQcoD9zLOo0KUDY4d3ncEbsVMEP7aJWIPw7TETg9GLzFcJoHI8dsmA==","signatures":[{"sig":"MEYCIQCCVbE+EMnAuQ3hjf7kfbgG0rmNUNAjJrQKMBePDsbqlQIhAPYabWTY0O5OlCV1tM5DsJSV3fcEKk0FKdkMsF+TR5hn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9541},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"d41b557d60182b5b63da00cf0f57678a83aaa3e8","_npmUser":{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},"_npmVersion":"10.7.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/default-theme":"0.6.0","@bolttech/frontend-foundations":"0.8.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.1.0_1718639937567_0.2323758610399831","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@bolttech/molecules-card","version":"0.2.0","_id":"@bolttech/molecules-card@0.2.0","maintainers":[{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"}],"dist":{"shasum":"0251441a6fab5122a478b55ce74c08f7110ed765","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.2.0.tgz","fileCount":8,"integrity":"sha512-hL9qK9O/YV25Zy2HQyggw9ejyVuMWu/aqz1AcN1hTtJ1fmU1y7zkNX9brZtPsThPCgWKd69PcMWaaLjtwwg/kw==","signatures":[{"sig":"MEUCIAmHO337I+NZcd+Z5xIwMX9knA2xVDkRHgWxFqAFlS2wAiEAmtaIn745H7Oy/3xbI5am8saGI6AeShk3k6MlgRTbo0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9541},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"19d3a97d039caec680345c2a2ca43a65b77e8aba","_npmUser":{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},"_npmVersion":"8.19.4","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"16.20.2","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/default-theme":"0.8.0","@bolttech/frontend-foundations":"0.9.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.2.0_1725442010610_0.1782268413840089","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"@bolttech/molecules-card","version":"0.2.1","_id":"@bolttech/molecules-card@0.2.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"dc3d186a54dfe281869528190d43efdccc7fd931","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.2.1.tgz","fileCount":9,"integrity":"sha512-+znttW+GpgUcNwROBl8yRdFTb0q8I9qlJSb4cCSlHfmLMnRhkvREV+2iazdr4/5KakgPHY1SDFYZVdaR9jmJIg==","signatures":[{"sig":"MEUCIHXSSQ+bbNlu5fl0sEm1wbnnXcZ3gcjzw+JylwvZynPXAiEA88YsLOwnfcBApyJvpzuaQz0ggNS0vZfHl6gHvulZ5l4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9496},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"90a68e417fd2116bcc69957e68a8709f546c8c5a","_npmUser":{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},"_npmVersion":"10.7.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"19.1.1","styled-components":"6.1.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.2.1_1757947463415_0.5329637047422422","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@bolttech/molecules-card","version":"0.3.0","_id":"@bolttech/molecules-card@0.3.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"ce966dfc74785e01b795f01324569daf9b69dca0","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.3.0.tgz","fileCount":9,"integrity":"sha512-rhSpENGvvjDh8Msrm2+haMzkiiy8m/5IFj5qzgBrBqJZtHas7DhrJzWS2yz1qAUTJxW4Q8Gs7H9TcLF81dMQJw==","signatures":[{"sig":"MEUCIQCROrjiKtXDvzrJwKx6l6OTRrob1tfVyml6Z1KQTbcXVQIgM0ki4NAf82XA/LLhuKYknNYUnEHtE0KFExeWe393dO8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46704},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"15292fa7252aa0087ff6666d188c50d185ad7c82","_npmUser":{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},"_npmVersion":"10.7.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"19.1.1","styled-components":"6.1.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.3.0_1758120813832_0.7773116738168921","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@bolttech/molecules-card","version":"0.3.1","_id":"@bolttech/molecules-card@0.3.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"9261b3cdb67f89d96ef4e3cb6f990c6c7e286b3f","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.3.1.tgz","fileCount":9,"integrity":"sha512-BX46Tt1d2ZFF3m1hacqjalbzpfFq6s0dWLhdtB78a5C/our6K3qi5+cES/KshsK9vFvGrwju848oksYRoq+k7Q==","signatures":[{"sig":"MEYCIQDMlJZK827TvuQ85N3bgJCxOc4vv0sRVWk5fBk+hv4kAwIhAME3BZ0DcUTfNyZoooGcAL3k1Dul8lnpDYVddxk9jHPw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46704},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"e2bafa1b32ca5c66392d2f29ea45cc11756ba8e9","_npmUser":{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},"_npmVersion":"10.7.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"19.1.1","styled-components":"6.1.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.3.1_1758121402374_0.1290981341480708","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@bolttech/molecules-card","version":"0.4.0","_id":"@bolttech/molecules-card@0.4.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"ddb7aa83d018cd310e00de1dfb0864f0f366a268","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.4.0.tgz","fileCount":11,"integrity":"sha512-KhMoHC3YeVOXWV18jtbAsMpXrKVdH3D/Ly8Rk7ebOrg+oLMjNwTWogOm/AEVnAT7v2kN26hntKFwz2FOvK20hA==","signatures":[{"sig":"MEUCIQDJDQlIC7LruRlWDX6yJI6piE7W0xu0xvf012fHxPZoBgIgWvsIr/gbpj8Aa6MomXg8o6lpue2+SdFJEnb4iyBVOAA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132023},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"01c7d8611b8b0244190fc54bc181473b989553d1","_npmUser":{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},"_npmVersion":"10.9.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"22.10.0","dependencies":{"react":"19.1.1","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.4.0_1770713738567_0.47185431845427317","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@bolttech/molecules-card","version":"0.5.0","_id":"@bolttech/molecules-card@0.5.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"8a2ee376358259ac29336ea669a26ca6724b87ea","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.5.0.tgz","fileCount":11,"integrity":"sha512-PN+JfE+2Gn4JfuYGLvTfyVi3fpF52bn3WEnp8o/WBtQR4fFfvufXHmm52GMXGC4Y5lz62wq+cKf0//2HwXi7xw==","signatures":[{"sig":"MEQCIEhRZyXpGJql105JToJcvPV+W3sNIt34av2wIi9AP0/jAiADVolzibisE5AoxO03pxfSmR1kwXfCmdXlkWXkuKbqUw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132054},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"779030e915e201cae44999cab792a8d54a6f5536","_npmUser":{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},"_npmVersion":"10.9.0","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"22.10.0","dependencies":{"react":"19.1.1","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.5.0_1770746113920_0.20589644193856027","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"@bolttech/molecules-card","version":"0.6.0","_id":"@bolttech/molecules-card@0.6.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"c4f6f0faebf1add8883ddb7b71b22f02879d0e87","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.6.0.tgz","fileCount":11,"integrity":"sha512-Uaktsmu2gCEF5/AlVLAZFeWF8pQTv9Dj8Kzclrnqx1HKILMq5qDtUhtZEssc2iOLpIdp7GVcnQhgXy7WJfYCqw==","signatures":[{"sig":"MEQCIA0QKTRfHcrPAmJ028kJR241DPsWinXBoUYz0BFIixzQAiB3gkyaGN8AUKhFr2zRI4IHZLklIWa+n3ZO4XWuNbtjvQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132054},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"c612888d35db58449263d69e3acc00487a801241","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/molecules-card_0.6.0_1775670508222_0.5366063155505467","host":"s3://npm-registry-packages-npm-production"}},"0.6.2":{"name":"@bolttech/molecules-card","version":"0.6.2","dependencies":{"react":"19.1.2","@bolttech/ui-utils":"0.6.7","styled-components":"6.1.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/molecules-card@0.6.2","gitHead":"2d889427b6c9a7f75ce7002d0ad6208b478cb7e7","description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-cG2AdfaQE2xrfRLzMwR2kNlxppeOqls9qiLqq5h7znPqCbeP4l9bksa66pJx7iw2WmWWVT7H26zaKmMjZTul2A==","shasum":"9c8d2706e850dd564f7b1295ec3ab281fefefe16","tarball":"https://registry.npmjs.org/@bolttech/molecules-card/-/molecules-card-0.6.2.tgz","fileCount":11,"unpackedSize":132464,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD2xNiDiUNR1aV3d/DiU8mBDcOIhEWFwSne8L1oaz8wkQIgVeqxPmee1tbDHE2wRL/afc1JwRm0bva6Xh/ySQtR6sM="}]},"_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/molecules-card_0.6.2_1780931177550_0.48286704960032023"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-17T15:58:57.465Z","modified":"2026-06-08T15:06:18.077Z","0.1.0":"2024-06-17T15:58:57.699Z","0.2.0":"2024-09-04T09:26:50.752Z","0.2.1":"2025-09-15T14:44:23.586Z","0.3.0":"2025-09-17T14:53:33.998Z","0.3.1":"2025-09-17T15:03:22.574Z","0.4.0":"2026-02-10T08:55:38.711Z","0.5.0":"2026-02-10T17:55:14.063Z","0.6.0":"2026-04-08T17:48:28.364Z","0.6.2":"2026-06-08T15:06:17.698Z"},"description":"The **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# Card Component\n\nThe **Card** component is a customizable React component that displays a Card with border and some status as selected or disabled, it's necessary to pass a children that will represent the content of Card component\n\n## Installation\n\nTo use the **Card** component, you need to install the required dependencies:\n\n```bash\nnpm install @bolttech/frontend-foundations @bolttech/molecules-card\n```\n\nor\n\n```bash\nyarn add @bolttech/frontend-foundations @bolttech/molecules-card\n```\n\n## Usage\n\n### Single Card\n\nYou can utilize the **Card** component individually as a toggle or button:\n\n```jsx\nimport React, { useState } from 'react';\nimport { Card } from '@bolttech/molecules-card';\nimport { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';\n\nfunction App() {\n  const [selected, setSelected] = useState(false);\n\n  return (\n    <BolttechThemeProvider theme={bolttechTheme}>\n      <Card selected={selected} onClick={() => setSelected(!selected)}>\n        <div>Click me to toggle selection</div>\n      </Card>\n    </BolttechThemeProvider>\n  );\n}\n```\n\n### Card Group\n\nUse **CardGroup** to coordinate a single selection among multiple cards. It uses the `id` of each card to track selection:\n\n```jsx\nimport React, { useState } from 'react';\nimport { Card, CardGroup } from '@bolttech/molecules-card';\nimport { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';\n\nfunction App() {\n  const [selectedValue, setSelectedValue] = useState('card-1');\n\n  return (\n    <BolttechThemeProvider theme={bolttechTheme}>\n      <CardGroup name=\"my-group\" value={selectedValue} onChange={(val) => setSelectedValue(val)}>\n        <Card id=\"card-1\">Option 1</Card>\n        <Card id=\"card-2\">Option 2</Card>\n        <Card id=\"card-3\">Option 3</Card>\n      </CardGroup>\n    </BolttechThemeProvider>\n  );\n}\n```\n\n## Props\n\n### Card\n\n| Prop         | Type        | Description                                     |\n| ------------ | ----------- | ----------------------------------------------- |\n| `children`   | `ReactNode` | Content to be displayed within the card.        |\n| `dataTestId` | `string`    | The data-testid attribute for testing purposes. |\n| `disabled`   | `boolean`   | If true, the card is disabled.                  |\n| `selected`   | `boolean`   | If true, the card is selected (active).         |\n| `id`         | `string`    | Unique identifier (required for CardGroup).     |\n| `variant`    | `string`    | Style variant: `primary` or `secondary`.        |\n| `onClick`    | `function`  | Click event handler.                            |\n| `className`  | `string`    | Custom class name.                              |\n\n### CardGroup\n\n| Prop            | Type       | Description                                                    |\n| --------------- | ---------- | -------------------------------------------------------------- | ---------------------------------------------- |\n| `children`      | `node[]`   | List of Card components.                                       |\n| `name`          | `string`   | Name of the group (for form submission).                       |\n| `value`         | `string    | string[]`                                                      | The `id`(s) of the currently selected card(s). |\n| `selectionType` | `string`   | Type of selection: `single` (default) or `multiple`.           |\n| `disabled`      | `boolean`  | If true, all cards in the group are disabled.                  |\n| `errorMessage`  | `string`   | Error message to display.                                      |\n| `onChange`      | `function` | Callback when selection changes. Returns the `id` of the card. |\n| `dataTestId`    | `string`   | The data-testid attribute for testing purposes.                |\n\n## Responsibility\n\nThe **CardGroup** is responsive by default:\n\n- **Mobile (< 768px)**: Displays cards in a vertical `column`.\n- **Desktop (>= 768px)**: Displays cards in a horizontal `row`.\n\n## Contributions\n\nContributions to the **Card** component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.\n","readmeFilename":"README.md"}