{"_id":"@chakra-xui/accordion","_rev":"1-af05ea2045fbe959d4d231d37b16317a","name":"@chakra-xui/accordion","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@chakra-xui/accordion","version":"1.0.3","description":"A simple and accessible accordion component for React & Chakra xui","keywords":["react","component","accordion","chakra","chakra xui","collapse","accessible","accessibility","wai-aria","aria","a11y"],"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"homepage":"https://github.com/chakra-xui/chakra-xui#readme","license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","exports":{".":{"require":"./dist/cjs/index.js","default":"./dist/esm/index.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"scripts":{"prebuild":"rimraf dist","start":"nodemon --watch src --exec yarn build -e ts,tsx","build":"concurrently yarn:build:*","test":"jest --env=jsdom --passWithNoTests","lint":"concurrently yarn:lint:*","version":"yarn build","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types","test:cov":"yarn test --coverage","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","lint:types":"tsc --noEmit"},"dependencies":{"@chakra-xui/descendant":"1.0.2","@chakra-xui/hooks":"1.0.2","@chakra-xui/icon":"1.0.2","@chakra-xui/transition":"1.0.3","@chakra-xui/utils":"1.0.2"},"devDependencies":{"@chakra-xui/system":"1.1.0","react":"^17.0.1"},"peerDependencies":{"@chakra-xui/system":">=1.0.0","react":"16.x || 17.x"},"_id":"@chakra-xui/accordion@1.0.3","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KDpVn6yBSJIb4yX1gjsXl0h8/Nx8rlN60feUjU0ZzburZ4z2QP7j26a4q8iBl7zFvyv2iTDtggK+iuwxEaqqeg==","shasum":"4caed90580b057d186351f1d99b8b21d40382cef","tarball":"https://registry.npmjs.org/@chakra-xui/accordion/-/accordion-1.0.3.tgz","fileCount":18,"unpackedSize":114684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5JbTCRA9TVsSAnZWagAAzK0QAIsZFMtkHPsBraE1FVBt\nkKMKeqxbp3RIervMpnJEAdT3emWM/7hGh4RF8/dAWxIG1GUFhF5YhY04Ej9h\n8uZIDUd9ZFEwdSYrkDbdbWVZiHGNCkVNBGRLDh5whu9AAMALjvo7g9DPI5nn\niXmp5RRATdnLDbNAY8CSxRuyw142NcZ+dY+M27lQcYvPUPMN47DAzSf+fM3M\ndFISA+4dT9z03060+p8vCDZWJZVzP3mlywljKLWP+Ep+Ap7mpwbXtLAsfs7W\n7Utjdl4CGuXvg7G26yA54LF85sQj5fYAmuAiBsoikSNLI/DBwm8aCQBE2miA\ngB4I3O1PkM1nCwG0dQqylvDm78mO2lqeNk2ylVP6dApccm3HGd6PV+v8WSjw\nWuR3LvbWOAhhpy//hDzlJ6Tu/9HisL0FxCjIF4UtnAcTDsSMGBKIijyxz+5V\n3DTeBvEnWQ2y8dnSJuZru4LtMrKPJN8zN3qGQ4PhAd4eBAOxHPl1T7QeLlXR\nnbKe7WHNB3Omqs3kGpZC+ZaWizKXVGPK25IP2JGgGryE1ilh2KsiPzPDZA48\nftq93QEiFYz/DejtMcDxefi5M3JEMKCwUd7omlCPEtA/n4k1PHtwaqDyfwem\nbkuEH7FtC56vb8iARnb+AJxexG2crknYa1IyhGCeUwV5aBQEmtDjnmE52QjP\n5Krw\r\n=LLV1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEy8Xt6cQ3LltIYo++wab4NoiPfhguyWWzvAVPEyCBm3AiA6XO6iOmweiAwZhWspmKi5N2Xod1o+6aOFWalgBwSO7Q=="}]},"_npmUser":{"name":"meabed","email":"mo.meabed@gmail.com"},"directories":{},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.0.3_1608816338637_0.8922772491325928"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-24T13:25:38.354Z","1.0.3":"2020-12-24T13:25:38.776Z","modified":"2022-04-04T22:29:03.325Z"},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"description":"A simple and accessible accordion component for React & Chakra xui","homepage":"https://github.com/chakra-xui/chakra-xui#readme","keywords":["react","component","accordion","chakra","chakra xui","collapse","accessible","accessibility","wai-aria","aria","a11y"],"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"license":"MIT","readme":"# @chakra-xui/accordion\n\nAn accordion is a vertically stacked set of interactive headings that each\ncontain a title or content snippet representing a section of content.\n\nThe headings function as controls that enable users to reveal or hide their\nassociated sections of content.\n\n## Installation\n\n```sh\nyarn add @chakra-xui/accordion\n\n# or\n\nnpm i @chakra-xui/accordion\n```\n\n## Import Components\n\n```jsx\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionButton,\n  AccordionPanel,\n} from \"@chakra-xui/accordion\"\n```\n\n## Component:\n\n- `Accordion`: manages the global state of all opened accordion items via\n  context.\n- `AccordionItem`: manages the state for a single accordion item.\n- `AccordionButton`: the trigger to open/close an accordion item.\n- `AccordionPanel`: the main content area for the accordion item.\n\n## Usage\n\nBy default, only one accordion can be visible at a time, and it can't be\ntoggled.\n\n**Note 🚨**: Each accordion button must be wrapped in an heading tag, that is\nappropriate for the information architecture of the page.\n\n```jsx\n<Accordion>\n  <AccordionItem>\n    <h2>\n      <AccordionButton>Section 1 title</AccordionButton>\n    </h2>\n    <AccordionPanel>Panel 1</AccordionPanel>\n  </AccordionItem>\n\n  <AccordionItem>\n    <h2>\n      <AccordionButton>Section 2 title</AccordionButton>\n    </h2>\n    <AccordionPanel>Panel 2</AccordionPanel>\n  </AccordionItem>\n</Accordion>\n```\n\nTo make each accordion toggle (expand/collapse) on click, pass the `allowToggle`\nprop.\n\n```jsx\n<Accordion allowToggle>\n  <AccordionItem>\n    <AccordionButton>\n      <chakra.div flex=\"1\" textAlign=\"left\">\n        Section 1 title\n      </chakra.div>\n      <AccordionIcon />\n    </AccordionButton>\n    <AccordionPanel pb={4}>Panel 1</AccordionPanel>\n  </AccordionItem>\n\n  <AccordionItem>\n    <AccordionButton>\n      <chakra.div flex=\"1\" textAlign=\"left\">\n        Section 2 title\n      </chakra.div>\n      <AccordionIcon />\n    </AccordionButton>\n    <AccordionPanel pb={4}>Panel 2</AccordionPanel>\n  </AccordionItem>\n</Accordion>\n```\n\nTo allow multiple accordions to be visible at a time, pass the `allowMultiple`\nprop.\n\n```jsx\n<Accordion allowMultiple>\n  <AccordionItem>\n    <AccordionButton>\n      <chakra.div flex=\"1\" textAlign=\"left\">\n        Section 1 title\n      </chakra.div>\n      <AccordionIcon />\n    </AccordionButton>\n    <AccordionPanel pb={4}>Panel 1</AccordionPanel>\n  </AccordionItem>\n\n  <AccordionItem>\n    <AccordionButton>\n      <chakra.div flex=\"1\" textAlign=\"left\">\n        Section 2 title\n      </chakra.div>\n      <AccordionIcon />\n    </AccordionButton>\n    <AccordionPanel pb={4}>Panel 2</AccordionPanel>\n  </AccordionItem>\n</Accordion>\n```\n\n## References:\n\nhttps://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html\nhttps://inclusive-components.design/collapsible-sections/\nhttps://github.com/stereobooster/react-accessible-accordion\nhttps://jqueryui.com/accordion/\n","readmeFilename":"README.md"}