{"_id":"@solid-aria/progress","_rev":"1-af011db825d431aaa899d146ee889a7d","name":"@solid-aria/progress","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@solid-aria/progress","version":"0.0.1","private":false,"description":"Primitives for building accessible progress bar component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/progress#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/i18n":"^0.2.0","@solid-aria/label":"^0.1.4","@solid-aria/types":"^0.1.2","@solid-aria/utils":"^0.2.0","@solid-primitives/props":"^2.1.7","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"progress","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/progress@0.0.1","_integrity":"sha512-WXer1T/jUPR8WVo5kkV3rgjeOIBha0jH2/mvN6zroJ4rrwOaizFOiI3lcsY9lEP5f9sa+4QHcCwEAbI6UGOY5g==","_resolved":"/tmp/3a145ca30ca6d8f1844e207a1de220ef/solid-aria-progress-0.0.1.tgz","_from":"file:solid-aria-progress-0.0.1.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-WXer1T/jUPR8WVo5kkV3rgjeOIBha0jH2/mvN6zroJ4rrwOaizFOiI3lcsY9lEP5f9sa+4QHcCwEAbI6UGOY5g==","shasum":"b5726ec7e2ab08f5d619ee5c157a0e584ffc4cae","tarball":"https://registry.npmjs.org/@solid-aria/progress/-/progress-0.0.1.tgz","fileCount":6,"unpackedSize":14548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9UuTwn588F5qbD3Vn9NRFrDkszYGBImi9YAMdha6pWwIgeRXIvldztMKoelLUQKvfINhNDzKhrLi/rSwggm30oEY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirtDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzng//ZJFQ+Z8At9CnprtSxZAACIBxxv52gRr3C21ccIJumRFpkLWi\r\nYVxdLs2CJclVFZq0s0enYJziW+leDoebQvfKw68LSuHFO8zUyOuvFye8AkjN\r\nk826Sbpo9KjX10yik3zL6hh0CITo3Lp4OBfi141PbfsQJpbREM7k4mG+mxAc\r\nP/vXNHQqMlhkZjt9cXGxMFB1vncaL1UxNIx+oFt7rqtnxmI7j6t+fPCtmuI4\r\nPXKDONm2hEFoGfDDguuoetAAoUPOKS7u9XE4sTRnUby4J3FM7gNOcoF/UvZx\r\netPk0JQZPJ83nA8BYdiYwbWm3l26Ieq9MAoGBjGll6oPmCbkOQAUhVvKkTQI\r\n7lFw2pHcw6k3MRmLQczuRh8/ic0tNWzFki6jE46ydYh/cDBP7n3QDblQZrlg\r\nFTeXbYMS5OaKIOWNh2/iL1GW6jFdFmZYmMIlELKbOzn2pcEV76+XSnrQ53o2\r\nm6PsEN/XWTHCxyo9Gzgv3Os0SNjc4EHX8GINqCIx2RlK93Rep4/V7mJk5IDm\r\n+ilOYGdmD0iEnzLl8pvSjeE8cyzg6GuF2Nzcj4SV6lkwBVr8jQsews56HSbN\r\nFF/iKK06T+KhMl5Oq/TYysCVw3Sk11VFowaTytyae4hAXYLXIlPG2Kx+66os\r\nZLCR5sEk1bhdLZnTWgS7oU2kShh5woyoFyY=\r\n=5Jak\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/progress_0.0.1_1655623910859_0.03625123751621273"},"_hasShrinkwrap":false},"0.0.2":{"name":"@solid-aria/progress","version":"0.0.2","private":false,"description":"Primitives for building accessible progress bar component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/progress#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/i18n":"^0.2.0","@solid-aria/label":"^0.1.4","@solid-aria/types":"^0.1.4","@solid-aria/utils":"^0.2.1","@solid-primitives/props":"^2.1.7","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"progress","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/progress@0.0.2","_integrity":"sha512-RBxkiIaDy+UUMH783b005O+/agokU0tmOpbbwSvWBj4ZUbM/WBC2HiWNMuxN6TTItQobtK1TnlzOHTcwd1m9Ag==","_resolved":"/tmp/08e5cc93346fc52442b835d7612cba1f/solid-aria-progress-0.0.2.tgz","_from":"file:solid-aria-progress-0.0.2.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-RBxkiIaDy+UUMH783b005O+/agokU0tmOpbbwSvWBj4ZUbM/WBC2HiWNMuxN6TTItQobtK1TnlzOHTcwd1m9Ag==","shasum":"dbc15d8fe6edc924f16f72d64d76581e9ebe6a2a","tarball":"https://registry.npmjs.org/@solid-aria/progress/-/progress-0.0.2.tgz","fileCount":6,"unpackedSize":14533,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+RChXSJTSr9W7QDYVGhHgZJs+IB1Bx9m5XQZ9cNvEnAiALwJDuwB8C0wVKv2HjNe6dWH4CD4Ff2QGGPzoBoLpRtA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sb5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJtg//Tom2XZnmJdVy8CsnJVwJiqH5vFw7Lhv8Rbgghm6s49jfYSGS\r\nDd9/uyostlQB+HahCGUZfANlghQW1rAT3etwRNnetlwqlFtczEabQIE5dOID\r\nC1qKzrcX+CbcSCnc/CZ/qQD4ohIq3FqXDROstxkaDMUtVIlJ1COZvrwVFbZz\r\nb5i3ITVgI/Jr5VLKXyxwvlsUn7uUzAbTTkOvkiPNPchqovbjEihgMiUHUuZt\r\nn784GE084cw1ga12KAbQzFhecVxNv3+8VxdIyDZwB2GtXDBsukg77NIbzV7O\r\nXVxWw4bVNvlXhsIPRmkQivmjdH+DaskGlhrpouIlYdCTsHgpWKBeRpMskRpk\r\njU5SrsDaMEnStURy7PrSaS6vjp6oLLX3HJ/yfWIB6+c6+VG6ZhaU8JgRfUUn\r\n7Q3NdAXQYGVaDJ9vFBAmy8D+DZEDeQeSS7N6gjr21jCyv2LQ0F2CHlrvX95N\r\nAT16oJeQDTbyRptvdnuSHc9i26fjia2doaiA4BMjV/sf2IbkZa8TIutGuNFr\r\nYMyBYdxfGVb6VLCYo2plkJJmVkVuhyrIaLx9ji5g15gV/QEqzcwnFiBof2SS\r\nPi9py5rpOktahKW4EkCfuYl15NkZS/HUFtdzM3ufNZ7tKF9IaKTcRaebKm6H\r\n+lVk2tYVoCDuKypl06ddJHje+zw6n3kcW8c=\r\n=FX5Z\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/progress_0.0.2_1657874169036_0.9665926196427619"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-19T07:31:50.801Z","0.0.1":"2022-06-19T07:31:51.052Z","modified":"2022-07-15T08:36:09.359Z","0.0.2":"2022-07-15T08:36:09.259Z"},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"description":"Primitives for building accessible progress bar component.","homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/progress#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/progress\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/progress?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/progress)\n[![version](https://img.shields.io/npm/v/@solid-aria/progress?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/progress)\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\nProgress bars show either determinate or indeterminate progress of an operation over time.\n\n- [`createProgressBar`](#createprogressbar) - Provides the accessibility implementation for a progress bar component.\n\n## Installation\n\n```bash\nnpm install @solid-aria/progress\n# or\nyarn add @solid-aria/progress\n# or\npnpm add @solid-aria/progress\n```\n\n## `createProgressBar`\n\n### Features\n\nThe `` HTML element can be used to build a progress bar, however it is very difficult to style cross browser. `createProgressBar` helps achieve accessible progress bars and spinners that can be styled as needed.\n\n- Exposed to assistive technology as a progress bar via ARIA\n- Labeling support for accessibility\n- Internationalized number formatting as a percentage or value\n- Determinate and indeterminate progress support\n\n### How to use it\n\n```tsx\nimport { AriaProgressBarProps, createProgressBar } from \"@solid-aria/progress\";\nimport { createMemo, Show } from \"solid-js\";\n\nfunction ProgressBar(props: AriaProgressBarProps) {\n const { progressBarProps, labelProps, percentage } = createProgressBar(props);\n\n const barWidth = createMemo(() => `${Math.round(percentage() * 100)}%`);\n\n return (\n
\n
\n \n {props.label}\n {progressBarProps[\"aria-valuetext\"]}\n \n
\n
\n
\n
\n
\n );\n}\n\nfunction App() {\n return ;\n}\n```\n\n### Indeterminate state\n\nProgress bars can represent an indeterminate operation. They may also be used to represent progress visually as a circle rather than as a line. The following example shows an indeterminate progress bar visualized as a circular spinner using SVG.\n\n```tsx\nimport { createProgressBar } from \"@solid-aria/progress\";\n\nfunction Spinner() {\n const { progressBarProps } = createProgressBar({\n isIndeterminate: true,\n \"aria-label\": \"Loading...\"\n });\n\n const center = 16;\n const strokeWidth = 4;\n const r = 16 - strokeWidth;\n const c = 2 * r * Math.PI;\n const offset = c - (1 / 4) * c;\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction App() {\n return ;\n}\n```\n\n### Internationalization\n\n#### Value formatting\n\n`createProgressBar` will handle localized formatting of the value label for accessibility automatically. This is returned in the `aria-valuetext` prop in `progressBarProps`. 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 progress bar 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"}