{"_id":"@solid-aria/separator","_rev":"1-a1b68aaf84c09e03f5a510def93c3b60","name":"@solid-aria/separator","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@solid-aria/separator","version":"0.0.1","private":false,"description":"Primitives for building accessible separator component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/separator#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/types":"^0.1.2","@solid-aria/utils":"^0.2.0","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"separator","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/separator@0.0.1","_integrity":"sha512-j/9YXcZPQNLmRRXca+vTMzmC6Ki5AbqcVjVhOy2vvuBVATBG/9PXGq3qoGAl+6KhST8g2zOWFhtCmW1Dte/1Rg==","_resolved":"/tmp/cc144d8d28529431080fdee8bf2af0bc/solid-aria-separator-0.0.1.tgz","_from":"file:solid-aria-separator-0.0.1.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-j/9YXcZPQNLmRRXca+vTMzmC6Ki5AbqcVjVhOy2vvuBVATBG/9PXGq3qoGAl+6KhST8g2zOWFhtCmW1Dte/1Rg==","shasum":"b340968490b7cbc090d6507f8dca42f019e9834f","tarball":"https://registry.npmjs.org/@solid-aria/separator/-/separator-0.0.1.tgz","fileCount":6,"unpackedSize":8556,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCcE86m75ipT9fY4nSe5dhR8agN5h7NyaZfg3tg3u/CAIhAM/TisXqZp4V9+5k0Et8eOP3SGlHmvh5mWsZEHvf88Kj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirtDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHzQ//X4zTwChryp95lxgjb6PEeAUSv/ANVGHoWj5nUZYzutdMsASt\r\nc9UhWtm5YmFGLSHErdVQ1TVcmqQh6xaun/PiEImYejlArerpTK+Yii20WDr6\r\nF7a3eM6iTuBJXTq8TJUzMmj4+0tRcvJsZO87YYN28zVQYvNPM2Zebn6DIZVN\r\naG/85+5TrOuyvv4qVnsjGk7GER7LUMLGD2zf9RW1oUxwisEC3sfgjAtilFBA\r\n+YUcE1dnkvl8wK58JbPOR+d2Yglw18xh7RVCEXUNLMn7aW+2auGtQFJBOIHp\r\nphxjhrW0GHTqO+8knjIhUP3sPrmi6QJar0I8j8nZHCHmpGP1ldvvIHBTnzWZ\r\nY2oZneVDxCD7cO+2qvkTRgDscxDiTWBAu2ZhqUMPm0WfNCBBxXMiR/Maeaau\r\nmIzkKi2zjhRdHTFdqsj1SZ7brzKffsH730wdvnCyIm7q1B08OoGDrxgpuOCc\r\nF+F+9W6WQB2NGxqStghtcHpQiK87qva+1/hhPtHcApK6MAsfK3tNGCm5aIpu\r\nKsax9+PwXwAXQt+as5gVluznXB+ZUD5lOnUIApWlQ34KDS+o+x+8HXSkpFXB\r\nqiI70akjw+BjnziVP8VxhuhCWSTEIhOLVDe1NYP1/Iw/r7odEImg6H8C8FWR\r\n60pTmVqNgD9S7j2Qfn2PLDwapXQuch4nOYY=\r\n=Tyty\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/separator_0.0.1_1655623910912_0.27200394252904925"},"_hasShrinkwrap":false},"0.0.2":{"name":"@solid-aria/separator","version":"0.0.2","private":false,"description":"Primitives for building accessible separator component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/separator#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/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":"separator","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/separator@0.0.2","_integrity":"sha512-e5Ia8aLLtD6DRb9HIwaMvPd1Za2Lf+AIWwn3Da8qIiFolejnmSgFYrPFnIxA2QZr19h0Ew5RTxfaSlc85tpZ0w==","_resolved":"/tmp/268be4f315cd3e67cd3c5cf9a2b7236c/solid-aria-separator-0.0.2.tgz","_from":"file:solid-aria-separator-0.0.2.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-e5Ia8aLLtD6DRb9HIwaMvPd1Za2Lf+AIWwn3Da8qIiFolejnmSgFYrPFnIxA2QZr19h0Ew5RTxfaSlc85tpZ0w==","shasum":"88a16b8aaadb32170e3444e74fbc5101d67c73e4","tarball":"https://registry.npmjs.org/@solid-aria/separator/-/separator-0.0.2.tgz","fileCount":6,"unpackedSize":8538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVRoPgCthJ59L4nTIJZpLUoI0rzr7S618cCNWv5mKuLAiEAtWeLYEdd6K1k/ujH7+S0Qz76yKrP79uTNaqH67oQwt8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonPA//eNsTy3XKLiZyI98nRo1vexCrmzO0bpsQHle4oJe8M5mXBnCb\r\nrPJ4EfZq9hIP5w3tJ+1fWbWrehCyD1yzvdbZWkBNHXnSuE4+8xY72yjiSH+F\r\n2pgUxZB+LbclNos74xO/aSoxudGdZFtNfilo1ySx1c7AZentD7JmmorsLZ6A\r\nISGNpZRJZB4VGOmtw+ND4XXJ39EJoJj4VQl1eSz5lweHENFhiEKNl5aHSUna\r\nyYH8Zp0/HoSaj6Aib4Ujej1ihthBZe0NSPZbqP/nXSUQhxtm6RSCkWadyLVY\r\nu14LeDxlUGOG2TEdDDZrnfKfXeyhqc3WRd8B5XLjNomg4sxH8iEUY7lCcBg1\r\nA+TQ3enqOcgNINn+15ziRlimd//wL2Ht7cHk2gV1VNDTUKU3mHi/QeD0p1Jm\r\nV6CAUr8907tE/rNaIh7qnEWdIhIzmyVaeRsrzbtrmBrVL4m9kjSKeUEvf2K0\r\nKZN9sfp0AVdmZFhgPbDD0lLAmSSw3HRx+xKCJiJO0FkoHi4UeC9v8Y65/MoU\r\nbZfHiT0NmUoXG3NpQEY530jNignEN+Qoht72TNVO8PxYHHCOah7woTLH7p2l\r\n7Z27zZEh96QUMPLpRVP1Vsj0oz+bke70qzbWnc6HjvxK6r3O/K7fr+AXrX6F\r\n8ZAWDNdyKUJ4p1AUVk9skk9YqTYnL841EfI=\r\n=cOBf\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/separator_0.0.2_1657874172862_0.9545672539343251"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-19T07:31:50.856Z","0.0.1":"2022-06-19T07:31:51.098Z","modified":"2022-07-15T08:36:13.132Z","0.0.2":"2022-07-15T08:36:13.026Z"},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"description":"Primitives for building accessible separator component.","homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/separator#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":"<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Separator\" alt=\"Solid Aria - Separator\">\n</p>\n\n# @solid-aria/separator\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/separator?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/separator)\n[![version](https://img.shields.io/npm/v/@solid-aria/separator?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/separator)\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\nA separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.\n\n- [`createSeparator`](#createseparator) - Provides the accessibility implementation for a separator.\n\n## Installation\n\n```bash\nnpm install @solid-aria/separator\n# or\nyarn add @solid-aria/separator\n# or\npnpm add @solid-aria/separator\n```\n\n## `createSeparator`\n\n### Features\n\nHorizontal separators can be built with the HTML `<hr>` element. However, there is no HTML element for a vertical separator. `createSeparator` helps achieve accessible separators that can be styled as needed.\n\n- Support for horizontal and vertical orientation\n- Support for HTML `<hr>` element or a custom element type\n\n### How to use it\n\nThis example shows how create both a horizontal and a vertical oriented separator.\n\n```tsx\nimport { AriaSeparatorProps, createSeparator } from \"@solid-aria/separator\";\n\nfunction Separator(props: AriaSeparatorProps) {\n  const { separatorProps } = createSeparator(props);\n\n  return (\n    <div\n      {...separatorProps}\n      style={{\n        background: \"gray\",\n        width: props.orientation === \"vertical\" ? \"1px\" : \"100%\",\n        height: props.orientation === \"vertical\" ? \"100%\" : \"1px\",\n        margin: props.orientation === \"vertical\" ? \"0 5px\" : \"5px 0\"\n      }}\n    />\n  );\n}\n\nfunction App() {\n  return (\n    <>\n      <div style={{ display: \"flex\", \"flex-direction\": \"column\" }}>\n        Content above\n        <Separator />\n        Content below\n      </div>\n      <div\n        style={{\n          display: \"flex\",\n          \"flex-direction\": \"row\",\n          \"margin-top\": \"20px\",\n          height: \"40px\",\n          \"align-items\": \"center\"\n        }}\n      >\n        Content left\n        <Separator orientation=\"vertical\" />\n        Content right\n      </div>\n    </>\n  );\n}\n```\n\n## Changelog\n\nAll notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.\n","readmeFilename":"README.md"}