{"_id":"@bolttech/ob-atoms-price","_rev":"4-778d99c06f267e4ed9d2a6c53b7bc703","name":"@bolttech/ob-atoms-price","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-price","version":"1.0.0","_id":"@bolttech/ob-atoms-price@1.0.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":"c9ed4434cd6a33bcdf6675f6c987e2c041dceb15","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-price/-/ob-atoms-price-1.0.0.tgz","fileCount":9,"integrity":"sha512-Fuo88FT6ozQ9zshWrsfYMlmnlWKKs7ZBV4r5ZMijuHFq85KNXH6H7en/gDwLmjiXdI1ZIE4vd6AwQzzYuH2L/g==","signatures":[{"sig":"MEYCIQCQZTyWeIiEOF/Vx0QQmF0FfxPM0H+zVH6nrbW9EubDAQIhAPT1mFDixHad/iuHIN/ZJvO1Gx+I3FIlGR9IrznN2s84","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":101497},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"ef49602170015d6f383f6c10b104da94ee7b5f48","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-price_1.0.0_1778515824104_0.045497593853274676","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-price","version":"1.0.1","_id":"@bolttech/ob-atoms-price@1.0.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":"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":"2fb1710a2cc50e9777bcd754aafe707243d17dba","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-price/-/ob-atoms-price-1.0.1.tgz","fileCount":5,"integrity":"sha512-OwoQVMG/tz+mO3kc6F2lMH7U2LzARjTPaipF1Fdozx1mUx+YJiKB7RQoBYvzrA7b0EEBFaO2o5gJQB0PhQkizg==","signatures":[{"sig":"MEQCIFHB8uVFF4wM4JFweUuuHCSjWEL1rka34McO8lirY6BKAiBWYp9x2jRkoZdoZZCuItfIdMyaGYNa4qVT3C17gYhzbA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96781},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"fb624a09d413ed3baf11b8e43b427a7eb27d0160","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-price_1.0.1_1780926906053_0.12882820400348405","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-price","version":"1.0.2","_id":"@bolttech/ob-atoms-price@1.0.2","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":"92c49c6a17901deed28ccf025b734d6ccb7346d9","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-price/-/ob-atoms-price-1.0.2.tgz","fileCount":9,"integrity":"sha512-oWhPHyUevhGq2r7z8DHXGzJb0jLlyGGWssCD51TjdDskxjlk9KWM3skN24nlYdISdkvyYsYEOHyYE2TQHySnPQ==","signatures":[{"sig":"MEUCIDZhEMsGADQyd10oaizAidSk6AHeCkK035SH+BTKmTBEAiEAtqW67mRd4jukrwjLpYQPSahrCNVdXb1qOhOqQeSEqtQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":100289},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"3582b02e92784af3f8281bd679369a177947a01c","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-price_1.0.2_1788778886894_0.633529912864826","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-price","version":"1.0.3","dependencies":{"@bolttech/ui-utils":"0.6.7","react":"19.1.2","classnames":"^2.5.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-price@1.0.3","gitHead":"afd2f0ca9e51ae3b519671126f1f1d9df635534d","description":"The **Price** component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance th","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-DUOkFyNzXfxcYFlnRSkx0tJWuhOkGgntMJeCiTwzcsuhhJVDddcjMQzZxgtSqMJb32HtLPTATgBdsaU0vYb54g==","shasum":"c9e4ff141f97c8933b97af1c52b5299fd4bc9e88","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-price/-/ob-atoms-price-1.0.3.tgz","fileCount":8,"unpackedSize":104089,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDgd5PzfKzU6GmlUYGf+Ghj8bBgSSWRrDkOBpUs7aaAQwIgOfjUUHpjtoukIJ7j1uXsEawKzGgg14tXkGIQ/XXZ7ek="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@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/ob-atoms-price_1.0.3_1788796431468_0.13935579754351846"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:10:23.994Z","modified":"2026-09-07T15:53:51.756Z","1.0.0":"2026-05-11T16:10:24.286Z","1.0.1":"2026-06-08T13:55:06.193Z","1.0.2":"2026-09-07T11:01:27.056Z","1.0.3":"2026-09-07T15:53:51.594Z"},"description":"The **Price** component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance th","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":"# Price Component README\n\nThe **Price** component is a React component designed to display a formatted numerical value along with optional currency symbols and animated transitions for value updates. This component is a part of the project's UI module and is intended to enhance the visual representation of numerical values in various contexts.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Example](#example)\n- [Contributing](#contributing)\n\n## Installation\n\nTo use the **Price** component in your React application, you need to follow these steps:\n\n1. Install the necessary dependencies:\n\n   ```bash\n   npm install @bolttech/atoms-price\n   ```\n\n2. Copy the `atoms-price.type.ts` and `atoms-price.style.ts` files along with the `Price` component definition into your project.\n\n3. You can now use the `Price` component in your React application.\n\n## Usage\n\nThe **Price** component is used to display a numerical value along with animated transitions for value updates. It supports various customization options such as specifying the currency symbol, its position, size, and variant.\n\nTo use the component, import it and include it in your JSX:\n\n```jsx\nimport React from 'react';\nimport {Price} from '@bolttech/atoms-price';\n\nfunction App() {\n  return (\n      <Price\n        value=\"1234.56\"\n        prevValue=\"1234.00\"\n        currency=\"$\"\n        currencyPosition=\"left\"\n        size=\"medium\"\n        variant=\"base\"\n      />\n  );\n}\n\nexport default App;\n```\n\n## Props\n\nThe **Price** component accepts the following props:\n\n| Prop             | Type          | Description                                                                                         |\n|------------------|---------------|-----------------------------------------------------------------------------------------------------|\n| `id`             | string        | The ID attribute for the component.                                                                |\n| `dataTestId`     | string        | The data-testid attribute for testing purposes.                                                     |\n| `value`          | string        | The current numerical value to be displayed.                                                       |\n| `prevValue`      | string        | The previous numerical value to calculate and render transitions.                                  |\n| `currency`       | string        | The currency symbol to display alongside the value.                                                |\n| `currencyPosition` | string       | The position of the currency symbol (`'left'` or `'right'`).                                       |\n| `size`           | string        | The size of the component (`'small'`, `'medium'`, or `'large'`).                                  |\n| `variant`        | string        | The variant of the component (`'base'` or `'alternate'`).                                          |\n\n## Example\n\nHere's an example of using the **Price** component:\n\n```jsx\n<Price\n  value=\"99.99\"\n  prevValue=\"89.99\"\n  currency=\"€\"\n  currencyPosition=\"right\"\n  size=\"large\"\n  variant=\"alternate\"\n/>\n```\n\nThis will render a **Price** component with the value \"99.99\", a previous value of \"89.99\", a euro (€) currency symbol on the right, a large size, and using the alternate variant.\n\n## Contributing\n\nContributions to the **Price** component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's GitHub repository.\n","readmeFilename":"README.md"}