{"_id":"@solid-aria/accordion","name":"@solid-aria/accordion","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@solid-aria/accordion","version":"0.0.1","private":false,"description":"Primitives for building accessible accordion component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/accordion#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/button":"^0.1.3","@solid-aria/collection":"^0.2.0","@solid-aria/interactions":"^0.1.4","@solid-aria/selection":"^0.1.5","@solid-aria/tree":"^0.1.4","@solid-aria/types":"^0.1.4","@solid-aria/utils":"^0.2.1","@solid-primitives/props":"^2.1.8","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"accordion","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/accordion@0.0.1","_integrity":"sha512-FFMh7ELf4TnpGTD1djuLJsHjtpAbvcKkRBE1M/IcUJ1HPq2n7dQ61KPBQabQPY0EdtPLGItr7eW0PxFCAcWpoQ==","_resolved":"/tmp/ea4e254c253bd88895dfa0a6c072d8c6/solid-aria-accordion-0.0.1.tgz","_from":"file:solid-aria-accordion-0.0.1.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FFMh7ELf4TnpGTD1djuLJsHjtpAbvcKkRBE1M/IcUJ1HPq2n7dQ61KPBQabQPY0EdtPLGItr7eW0PxFCAcWpoQ==","shasum":"322b335faa32ecd814f3b759dabdc8f0ce85499b","tarball":"https://registry.npmjs.org/@solid-aria/accordion/-/accordion-0.0.1.tgz","fileCount":6,"unpackedSize":15181,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMH94A3ilOzKKFvFvorRsdCAguvINguWtMDueVjR1gGAiAWbzRDwYwxx4UX36/luqJ/xYGn25wpxmKYtprys6oOLw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sb5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMdQ//UTBFCQFzSoCpUJ4hnVHoFGiA8RAEw728euFa6t6RcSmJDJDS\r\ntoEYp0FRBSvCMP62tnB2uNaeSNdzLe57P27BZhgQuYzr9Q0cQAdffotpCw1M\r\nM63nop+QGD6nWltedvclZQifkfnBKIKr3yzxq6jpNBkuiRtaobdDNeIOCDgG\r\nl7CFWmok1soMIH0JEjrMXkV7usIwGKnKVztDzKaqP84MJfgzpVuIv9wQsh5H\r\nlGsvO9VcTs5oDM1wrIrpE48qxY9jmlYxyn/jFyzHywRt5OI/VsXrJ7NAWbW6\r\n726Ssee1cwpsI/OKZv0R36lVBhlimcC6XFYqqC4Sb/kax8/oKgo3NAsit3Kr\r\nfKm3FOD9wm3r7bq1FNRo1lMFc/h7+WvNanWwGhNiRFwaJKz1QNge6H6kg8y/\r\nmJezQRlGPCqt3/P7HG5sBYj78LMp8ToLhgqpwZawHaMphUTNHSdcO547y8vu\r\niR/+WSArsyW/qOMghH4B2w61DAUJVQRzyaep1fFzRmHQVahd+XdIti53+Ex5\r\n+iLq1Gnn1prBBd+Fz6eVziSXRUmZAmNfpT3rZOl6W/nj6yT0nKfZ3uav6RM8\r\nMX5kAbl/o1B+m2NNNKLNm97/6TLFpVTnNBZ9sZ3ufcukzGfoWGzh3AHMMk0i\r\nW6WbrJw3wDbX4phHrvJJaiH0FS7bd87M0B4=\r\n=qyJE\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/accordion_0.0.1_1657874169046_0.49833923391007495"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-15T08:36:08.969Z","0.0.1":"2022-07-15T08:36:09.157Z","modified":"2022-07-15T08:36:09.306Z"},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"description":"Primitives for building accessible accordion component.","homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/accordion#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/accordion\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/accordion?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/accordion)\n[![version](https://img.shields.io/npm/v/@solid-aria/accordion?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/accordion)\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\nAccordion display a list of high-level options that can expand/collapse to reveal more information.\n\n- [`createAccordion` and `createAccordionItem`](#createaccordion-and-createaccordionitem) - Provides the behavior and accessibility implementation for an accordion component.\n\n## Installation\n\n```bash\nnpm install @solid-aria/accordion\n# or\nyarn add @solid-aria/accordion\n# or\npnpm add @solid-aria/accordion\n```\n\n## `createAccordion` and `createAccordionItem`\n\nProvides the behavior and accessibility implementation for an accordion component.\n\n### Features\n\nAn accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. `createAccordion` and `createAccordionItem` help implement these in an accessible way.\n\n- Exposed to assistive technology using ARIA\n- Support for disabled items\n- Labeling support for accessibility\n- Support for mouse, touch, and keyboard interactions\n- Keyboard navigation support including arrow keys and home/end\n\n### How to use it\n\n```tsx\nimport {\n AriaAccordionItemProps,\n AriaAccordionProps,\n createAccordion,\n createAccordionItem\n} from \"@solid-aria/accordion\";\nimport { ForItems, Item } from \"@solid-aria/collection\";\nimport { filterDOMProps } from \"@solid-aria/utils\";\n\nimport { createMemo, mergeProps } from \"solid-js\";\n\nfunction AccordionItem(props: AriaAccordionItemProps) {\n let ref: HTMLButtonElement | undefined;\n\n const { buttonProps, regionProps, isExpanded } = createAccordionItem(props, () => ref);\n\n return (\n
\n

\n \n {props.item.title}\n \n

\n \n {props.item.children}\n
\n \n );\n}\n\nfunction Accordion(props: AriaAccordionProps) {\n let ref: HTMLDivElement | undefined;\n\n const { AccordionProvider, accordionProps, state } = createAccordion(props, () => ref);\n\n const domProps = createMemo(() => filterDOMProps(props));\n\n const rootProps = mergeProps(domProps, accordionProps);\n\n return (\n \n \n {item => }\n \n \n );\n}\n\nfunction App() {\n return (\n \n \n Content One\n \n \n Content Two\n \n \n Content Three\n \n \n );\n}\n```\n\n## Changelog\n\nAll notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.\n","readmeFilename":"README.md"}