{"_id":"@solid-aria/meter","_rev":"1-89ac68277ea45187aee3ac20ba53e1da","name":"@solid-aria/meter","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@solid-aria/meter","version":"0.0.1","private":false,"description":"Primitives for building accessible meter component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/meter#readme","bugs":{"url":"https://github.com/solidjs-community/solid-aria/issues"},"repository":{"type":"git","url":"git+https://github.com/solidjs-community/solid-aria.git"},"license":"MIT","author":{"name":"Fabien Marie-Louise","email":"fabienml.dev@gmail.com"},"contributors":[],"sideEffects":false,"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","dependencies":{"@solid-aria/progress":"^0.0.1","@solid-aria/types":"^0.1.2","@solid-aria/utils":"^0.1.2","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"meter","stage":0,"list":[],"category":""},"scripts":{"build":"tsup","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist","dev":"vite serve dev --host","test":"jest --passWithNoTests","test:watch":"jest --watch --passWithNoTests","typecheck":"tsc --noEmit"},"_id":"@solid-aria/meter@0.0.1","_integrity":"sha512-6W4InY5yD62a032LPzZgxtLFmEvDV+xOOC0lxdHv4Clg3RTQ2A1Ed5G41FDqi21AIthV1t+0A/04b2+Fc0E+DQ==","_resolved":"/tmp/8ee49d2da49072180d2725d3b6b450ea/solid-aria-meter-0.0.1.tgz","_from":"file:solid-aria-meter-0.0.1.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-6W4InY5yD62a032LPzZgxtLFmEvDV+xOOC0lxdHv4Clg3RTQ2A1Ed5G41FDqi21AIthV1t+0A/04b2+Fc0E+DQ==","shasum":"52335e93324b1aaa201a982875de808fabbf4b36","tarball":"https://registry.npmjs.org/@solid-aria/meter/-/meter-0.0.1.tgz","fileCount":6,"unpackedSize":8631,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7RHcUOwk0rRrFMGBrY2ZL7n11mmwZfypVqyFfCAOjWgIhAOW7Zk5m//uHzSf43AMjvsVyakg6u3SwhT394++aS40l"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiruHqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqj7A//Ta8iHFrwS05PTu5iMR/wYg5iXiED+3gl2JRE0wVkjnC3IY0X\r\nCrvsf3qoS4YsFnavUdNgRBxzoYO8WfcqfNRvu+sTteXIvfbC7JbKZjmOADAT\r\nRjOtDRdIq1/PTPyUFwKwXFXaM0hUJA+mGHEDTzGBrRejNuwTBXwfqjN2o6uh\r\nqeHPWjeuKbZJ7doskt6yYdsWQ4FPDYp68fRk8ilSrlVlBTHpQofZf8pFndOf\r\nwSyae8VCGZjio1Z5WrIyIFL4AgAD2aUv3bZWrKUJDdVW8/HbkQgB7WOydmhN\r\ndKSnFox6RP95HaGgtUnbLXYoh2DAMeHOnMnVrAXEhTJhoQ+1pMYcrlfnOWxN\r\nHfRlA1Lqk2H6YT6mW95jaRhAW0nS4+T+Pb2zywZI7jeoDX/a4Ef6p3gFGOwI\r\nxVBvF9ZvzIg7+iA/JpOmfIMDKQmI9/6gJUcsHZ/1y1C5o/tRlNDj7fJKVqOy\r\npAHG9jLP1HejPI4WekMgUt+mIqxnSLHmkCIZpJelt/0KIl0EtuNV3eoa1xT5\r\neNdB1ZQ1+2T7LIhPRXjGhmlvAYyTf+iU+yLMZlr4nGfsfq8m7B/EYBpxAI1Q\r\nDLwPJrLOrblKnjmIUQTFHSl7qJW0vjreAfQvvDy9IwrR6ZRODCCAZbDH3SC/\r\nb+vkPCFFcxjeyfNiwqBhRr6Djnvz/1/+4qw=\r\n=2uF9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fabienml","email":"fabienml.dev@gmail.com"},"directories":{},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/meter_0.0.1_1655628266722_0.6640338830737502"},"_hasShrinkwrap":false},"0.0.2":{"name":"@solid-aria/meter","version":"0.0.2","private":false,"description":"Primitives for building accessible meter component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/meter#readme","bugs":{"url":"https://github.com/solidjs-community/solid-aria/issues"},"repository":{"type":"git","url":"git+https://github.com/solidjs-community/solid-aria.git"},"license":"MIT","author":{"name":"Fabien Marie-Louise","email":"fabienml.dev@gmail.com"},"contributors":[],"sideEffects":false,"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","dependencies":{"@solid-aria/progress":"^0.0.2","@solid-aria/types":"^0.1.4","@solid-aria/utils":"^0.2.1","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"meter","stage":0,"list":[],"category":""},"scripts":{"build":"tsup","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist","dev":"vite serve dev --host","test":"jest --passWithNoTests","test:watch":"jest --watch --passWithNoTests","typecheck":"tsc --noEmit"},"_id":"@solid-aria/meter@0.0.2","_integrity":"sha512-CnMoAUg6BbRwrXYGkEYSEnNMBPuZ2WLcVse0oNcddktr5G6n1j+v5IyPSfjiq/NNsj7eIVH4QyEHxk8q7WTjQg==","_resolved":"/tmp/03a29f115f14a7e3b4985114559a794a/solid-aria-meter-0.0.2.tgz","_from":"file:solid-aria-meter-0.0.2.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-CnMoAUg6BbRwrXYGkEYSEnNMBPuZ2WLcVse0oNcddktr5G6n1j+v5IyPSfjiq/NNsj7eIVH4QyEHxk8q7WTjQg==","shasum":"ab5f859dbabde263d3b043f1b35fe8d1541ed13d","tarball":"https://registry.npmjs.org/@solid-aria/meter/-/meter-0.0.2.tgz","fileCount":6,"unpackedSize":8616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRuHVrjhSkbqjo8Cs2fu1EoZbClDqUXn7PJzcV+NHvBAIhAJ5rgX73p51QSq9MxJt2OSa+89xhKjPvuadNfXYcUNcR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sb5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcaRAApBC3q2ggtsfNW1B5TkFurJLBGvkScQeGSojcjbjQR1a6A6S8\r\nkl1sQirXb3jIBLdaN/a4aX9y1NNZn74pyuuoAXUgLFZHqHS8HxSFZfXKdxQS\r\nWrKqCqfM1HHkHrcAcjKtZuvMHGlxckfTAZaNzKvfvWJEh/qS7OI6WMtrdq8z\r\nx55ynirMooS93BamhNm7rsmJZZJ70ziOaqbvGiUkgffltwAb0fpspZf4iflY\r\n0zcqJy2vL86E+IfLvvn1cRNc1Mz6vEFPa//7VWdMBfkyZ9t8sJtn8nQYHAek\r\nNgCNgXrlsLGftiLxD5EtfMQo7vSSfzJnRtL1TCFj9DAFzb+KToJxhMvVg6x/\r\nFtZUv6SJuqSEOcMHRptWicy7GQzI6TdxorTgai0Vij/PJa1MDGTC6cdcC0Hg\r\nBp9aYHP9Em2Rnw29oLQiJ5TvLvR/PYH9MAS6tDgCvRiPwThLAedWFA5eMWeh\r\n7ehFES8ciBs7dU09sS9DfcEtz5SSN/s0m4yUKfd1q07GYuc1iqqkNNAaaa6v\r\nl+nmdGyXyFGvR3fDGnea4LMhgnu2eVSJdgrQl8LLWYdOx/1s6JCo4H1xlyOG\r\niM/je/LkzJTHtVlDFX4rCKIw5dAKCUekdX0q13jkoma8kEVI0wOo3eZpag5U\r\narGfXxAoISBHV3fNRLtZ2+DkhS393msW+x4=\r\n=cxK5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fabienml","email":"fabienml.dev@gmail.com"},"directories":{},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/meter_0.0.2_1657874168998_0.8414244044836725"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-19T08:44:26.651Z","0.0.1":"2022-06-19T08:44:26.880Z","modified":"2022-07-15T08:36:09.299Z","0.0.2":"2022-07-15T08:36:09.208Z"},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"description":"Primitives for building accessible meter component.","homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/meter#readme","keywords":["solid","aria","headless","design","system","components"],"repository":{"type":"git","url":"git+https://github.com/solidjs-community/solid-aria.git"},"contributors":[],"author":{"name":"Fabien Marie-Louise","email":"fabienml.dev@gmail.com"},"bugs":{"url":"https://github.com/solidjs-community/solid-aria/issues"},"license":"MIT","readme":"

\n \"Solid\n

\n\n# @solid-aria/meter\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)\n[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/meter?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/meter)\n[![version](https://img.shields.io/npm/v/@solid-aria/meter?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/meter)\n[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)\n\nMeters represent a quantity within a known range, or a fractional value.\n\n- [`createMeter`](#createmeter) - Provides the accessibility implementation for a meter component.\n\n## Installation\n\n```bash\nnpm install @solid-aria/meter\n# or\nyarn add @solid-aria/meter\n# or\npnpm add @solid-aria/meter\n```\n\n## `createMeter`\n\n### Features\n\nThe `` HTML element can be used to build a meter, however it is very difficult to style cross browser. `createMeter` helps achieve accessible meters that can be styled as needed.\n\nMeters are similar to progress bars, but represent a quantity as opposed to progress over time. See the [`createProgressBar`](../progress/) primitive for more details about progress bars.\n\n- Exposed to assistive technology as a `meter` via ARIA, with fallback to `progressbar` where unsupported\n- Labeling support for accessibility\n- Internationalized number formatting as a percentage or value\n\n### How to use it\n\n```tsx\nimport { AriaMeterProps, createMeter } from \"@solid-aria/meter\";\nimport { Show } from \"solid-js/web\";\n\nfunction Meter(props: AriaMeterProps) {\n const { meterProps, labelProps, percentage } = createMeter(props);\n\n // Calculate the width of the progress bar as a percentage\n const barWidth = `${Math.round(percentage() * 100)}%`;\n\n return (\n
\n
\n \n {props.label}\n {meterProps[\"aria-valuetext\"]}\n \n
\n
\n
\n
\n
\n );\n}\n\nfunction App() {\n return ;\n}\n```\n\n### Internationalization\n\n#### Value formatting\n\n`createMeter` will handle localized formatting of the value label for accessibility automatically. This is returned in the `aria-valuetext` prop in `meterProps`. You can use this to create a visible label if needed and ensure that it is formatted correctly. The number formatting can also be controlled using the `formatOptions` prop.\n\n#### RTL\n\nIn right-to-left languages, the meter should be mirrored. Ensure that your CSS accounts for this.\n\n## Changelog\n\nAll notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.\n","readmeFilename":"README.md"}