{"_id":"@darksnow-ui/separator","name":"@darksnow-ui/separator","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/separator","version":"1.0.0","description":"separator component for DarkSnow UI","keywords":["react","separator","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/separator"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-separator":"^1.1.7","clsx":"^2.1.1"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/separator@1.0.0","_integrity":"sha512-35T32kdahQup1c4yGtZdJh/LxwlWaaCb8BrYH64kheRG7eedHb4lSeUUHR9VibjMgxXJL7jNGHReq+j2CBC7fA==","_resolved":"/tmp/fddc5633c68cb3e4f9f54e4f0aeeffd2/darksnow-ui-separator-1.0.0.tgz","_from":"file:darksnow-ui-separator-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-35T32kdahQup1c4yGtZdJh/LxwlWaaCb8BrYH64kheRG7eedHb4lSeUUHR9VibjMgxXJL7jNGHReq+j2CBC7fA==","shasum":"a153894ee25a54bfaa45c2caf47d578ad175b5ef","tarball":"https://registry.npmjs.org/@darksnow-ui/separator/-/separator-1.0.0.tgz","fileCount":8,"unpackedSize":8642,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDbuDH+ksFdmdkzOy3BPXhgMMtBexGZARibsRwKB4g5tQIgRkxt8ZZ1k3L9xfmTvaDBhkfqM8MXf37mwpfiUMRrKTw="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/separator_1.0.0_1749338989904_0.46331814608055"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:49.832Z","1.0.0":"2025-06-07T23:29:50.135Z","modified":"2025-06-07T23:29:50.394Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"separator component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","separator","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/separator"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# Separator\n\nVisually or semantically separates content. Built on top of Radix UI Separator primitive.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/separator\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Usage\n\n```tsx\nimport { Separator } from \"@darksnow-ui/separator\"\n\nexport function SeparatorExample() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm font-medium leading-none\">Radix Primitives</h4>\n        <p className=\"text-sm text-theme-content-muted\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n```\n\n## Props\n\n| Prop        | Type                              | Default      | Description                    |\n|-------------|-----------------------------------|--------------|--------------------------------|\n| orientation | \"horizontal\" \\| \"vertical\"       | \"horizontal\" | Separator orientation          |\n| decorative  | boolean                           | true         | Whether separator is decorative|\n| className   | string                            | -            | Additional CSS classes         |\n\n## Examples\n\n### Horizontal Separator\n\n```tsx\n<div>\n  <p>Above separator</p>\n  <Separator className=\"my-4\" />\n  <p>Below separator</p>\n</div>\n```\n\n### Vertical Separator\n\n```tsx\n<div className=\"flex h-5 items-center space-x-4\">\n  <div>Home</div>\n  <Separator orientation=\"vertical\" />\n  <div>About</div>\n  <Separator orientation=\"vertical\" />\n  <div>Contact</div>\n</div>\n```\n\n### Custom Styling\n\n```tsx\n<Separator className=\"my-8 bg-red-500\" />\n```\n\n## Accessibility\n\n- Proper semantic markup\n- Screen reader accessible\n- ARIA attributes when not decorative\n\n## Styling\n\nUses `bg-theme-mark-light` for consistent theming.\n\n## Related Components\n\n- [Divider](/components/ui/divider) - Alternative separator styles\n","readmeFilename":"README.md","_rev":"1-c1673ffbc98d45a6d50962dd53aa9ec9"}