{"_id":"@claralight-design/smooth-capsule","_rev":"4-265df74de40fbe458791098bcf1b35c3","name":"@claralight-design/smooth-capsule","dist-tags":{"latest":"2.0.0"},"versions":{"0.1.0":{"name":"@claralight-design/smooth-capsule","version":"0.1.0","_id":"@claralight-design/smooth-capsule@0.1.0","maintainers":[{"name":"alanyan9526","email":"3618542587@qq.com"},{"name":"lesetong","email":"oscarlbw@qq.com"},{"name":"yulimfish","email":"feifanxiaowang@163.com"}],"dist":{"shasum":"ac0b34ae7168574ad460a5a4c79f356e96f5f760","tarball":"https://registry.npmjs.org/@claralight-design/smooth-capsule/-/smooth-capsule-0.1.0.tgz","fileCount":10,"integrity":"sha512-2Z8AJCAPC9aTvhks39IsgaR72Il6phffHmH298f3qv8dYxIQXDbIbVvyUjcLkYCOjg1WBLDh2ZLDXIeQNb3z+A==","signatures":[{"sig":"MEQCIACp3vBapcNlWzpn7E/PPsO6sCOqSa3p1BfDYNtKYB97AiAhiAQzMffNDs0c2saHLuZv4fZA4iqCODwBQNUAoSr3wg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7978},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./smooth-capsule.css":"./dist/smooth-capsule.css"},"gitHead":"c775cf474c9cf2c5f2b3e1f38c7cfd4802862267","scripts":{"dev":"node ./node_modules/vite/bin/vite.js --host 127.0.0.1","build":"node ./node_modules/typescript/bin/tsc && node -e \"const fs=require('node:fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/smooth-capsule.css','dist/smooth-capsule.css')\""},"_npmUser":{"name":"alanyan9526","email":"3618542587@qq.com"},"_npmVersion":"11.11.0","description":"A React smooth capsule glass mask component.","directories":{},"sideEffects":["./dist/smooth-capsule.css"],"_nodeVersion":"24.14.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react-dom":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/smooth-capsule_0.1.0_1780709859621_0.9457413653201288","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@claralight-design/smooth-capsule","version":"0.1.1","_id":"@claralight-design/smooth-capsule@0.1.1","maintainers":[{"name":"alanyan9526","email":"3618542587@qq.com"},{"name":"lesetong","email":"oscarlbw@qq.com"},{"name":"yulimfish","email":"feifanxiaowang@163.com"}],"dist":{"shasum":"fea760dc45c8bc0924b9c307bc279e3bec2f878c","tarball":"https://registry.npmjs.org/@claralight-design/smooth-capsule/-/smooth-capsule-0.1.1.tgz","fileCount":10,"integrity":"sha512-3qWua1kUaC0khVU1LFnNkp4Kuls6SYESCfw8Holq5ybA6v//WAPDOwirga3mOLh/kWbwDkRf1/80R6iW0o6/MA==","signatures":[{"sig":"MEYCIQDphMvDw53g9Rsc0NgF9XGy7skMar5H1ImNeoe9/0P7zAIhAORYVjyzDIA/uFE8Sh+/rApRN0UwclG53zA4FgpiiyiD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12646},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./smooth-capsule.css":"./dist/smooth-capsule.css"},"gitHead":"1ff3f6de47d20733066df0d0202d4163ae02ec47","scripts":{"dev":"node ./node_modules/vite/bin/vite.js --host 127.0.0.1","build":"node ./node_modules/typescript/bin/tsc && node -e \"const fs=require('node:fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/smooth-capsule.css','dist/smooth-capsule.css')\""},"_npmUser":{"name":"alanyan9526","email":"3618542587@qq.com"},"_npmVersion":"11.11.0","description":"A React smooth capsule glass mask component.","directories":{},"sideEffects":["./dist/smooth-capsule.css"],"_nodeVersion":"24.14.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react-dom":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/smooth-capsule_0.1.1_1780724009566_0.8227214447374183","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@claralight-design/smooth-capsule","version":"0.1.2","_id":"@claralight-design/smooth-capsule@0.1.2","maintainers":[{"name":"alanyan9526","email":"3618542587@qq.com"},{"name":"lesetong","email":"oscarlbw@qq.com"},{"name":"yulimfish","email":"feifanxiaowang@163.com"}],"dist":{"shasum":"4b835cf8c14bb0b0757f0088c3718f9272f3ff38","tarball":"https://registry.npmjs.org/@claralight-design/smooth-capsule/-/smooth-capsule-0.1.2.tgz","fileCount":10,"integrity":"sha512-D82OkDLFZyIZ8pe/MKV0n0bSGX5Fr0btqVZTUCmR57vbQyN60KcYKAv/J0HnEOtjv38czlv5g3f2kuxZFBkjOw==","signatures":[{"sig":"MEQCICFjdNGses9JOXyJ1VxUSROOaChsx6ij3hontF7LOClDAiBJzaEiM6kLxe3wuWCen92apfjnghBqKpS/iljVF0gVlA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13047},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./smooth-capsule.css":"./dist/smooth-capsule.css"},"gitHead":"1a3aa4a581c724a4b48558ae051bc09cd0609ed7","scripts":{"dev":"node ./node_modules/vite/bin/vite.js --host 127.0.0.1","build":"node ./node_modules/typescript/bin/tsc && node -e \"const fs=require('node:fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/smooth-capsule.css','dist/smooth-capsule.css')\""},"_npmUser":{"name":"alanyan9526","email":"3618542587@qq.com"},"_npmVersion":"11.11.0","description":"A React smooth capsule glass mask component.","directories":{},"sideEffects":["./dist/smooth-capsule.css"],"_nodeVersion":"24.14.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","react-dom":"^19.0.0","typescript":"^5.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/smooth-capsule_0.1.2_1786702712872_0.8571288841233298","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@claralight-design/smooth-capsule","version":"2.0.0","description":"A React smooth capsule glass mask component.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./smooth-capsule.css":"./dist/smooth-capsule.css"},"scripts":{"build":"node ./node_modules/typescript/bin/tsc && node -e \"const fs=require('node:fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/smooth-capsule.css','dist/smooth-capsule.css')\"","dev":"node ./node_modules/vite/bin/vite.js --host 127.0.0.1"},"peerDependencies":{"react":">=18"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.0.0","vite":"^7.0.0"},"sideEffects":["./dist/smooth-capsule.css"],"dependencies":{"@lisse/core":"0.6.3"},"gitHead":"1a3aa4a581c724a4b48558ae051bc09cd0609ed7","_id":"@claralight-design/smooth-capsule@2.0.0","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-wbfhQeGDLf8a6a66Rg2uNOpozhgmY0IEvXW+7vlTW+Ve9KBUI5QOtkzoqAjl99Hn3aGaxS9lXVZQHtgWvngT4A==","shasum":"d658a85fc3297c7b594a201f1e063d48a98045df","tarball":"https://registry.npmjs.org/@claralight-design/smooth-capsule/-/smooth-capsule-2.0.0.tgz","fileCount":10,"unpackedSize":11737,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD3LzUF1uMU7qsIcCWCxX01DZHs3tazaonfirN6hgnO8wIgUYZ5Zb8S2thh3k4+xWNkcFQc402yeNLz1QNcSDKMEyQ="}]},"_npmUser":{"name":"alanyan9526","email":"3618542587@qq.com"},"directories":{},"maintainers":[{"name":"alanyan9526","email":"3618542587@qq.com"},{"name":"lesetong","email":"oscarlbw@qq.com"},{"name":"yulimfish","email":"feifanxiaowang@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/smooth-capsule_2.0.0_1786704091488_0.47066058816841383"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-06T01:37:39.498Z","modified":"2026-08-14T10:41:31.807Z","0.1.0":"2026-06-06T01:37:39.767Z","0.1.1":"2026-06-06T05:33:29.721Z","0.1.2":"2026-08-14T10:18:33.046Z","2.0.0":"2026-08-14T10:41:31.624Z"},"description":"A React smooth capsule glass mask component.","maintainers":[{"name":"alanyan9526","email":"3618542587@qq.com"},{"name":"lesetong","email":"oscarlbw@qq.com"},{"name":"yulimfish","email":"feifanxiaowang@163.com"}],"readme":"# @claralight-design/smooth-capsule\n\n\n\nReact component for rendering a smooth, glass-like capsule mask with configurable blur, tint, size, and highlight.\n\n用于在 React 中渲染平滑玻璃质感胶囊遮罩的组件，支持配置模糊、色调、尺寸和高光。\n\n## Features / 特性\n\n- Lisse-generated smooth capsule path based on the rendered element size.\n- 使用 Lisse 根据元素实际尺寸生成完整平滑胶囊路径。\n- CSS backdrop blur and tint layer for glass-style UI.\n- 使用 CSS 背景模糊和色调层实现玻璃质感。\n- Size is driven by capsule height while preserving cap proportions.\n- 通过胶囊高度控制尺寸，并保持端帽比例。\n- Optional inset highlight for stronger depth.\n- 可选内侧高光，用于增强层次感。\n- Ships TypeScript types and auto-loaded component styles.\n- 提供 TypeScript 类型，并自动加载组件样式。\n\n## Installation / 安装\n\n```bash\npnpm add @claralight-design/smooth-capsule\n```\n\n```bash\nnpm install @claralight-design/smooth-capsule\n```\n\nReact 18 or later is required.\n\n需要 React 18 或更高版本。\n\n## Usage / 使用\n\nImport the component directly in your application.\n\n在应用中直接导入组件即可使用。\n\n```tsx\nimport { SmoothCapsule } from \"@claralight-design/smooth-capsule\";\n\nexport function Example() {\n return (\n \n 平滑胶囊\n \n );\n}\n```\n\nWith custom size and visual settings:\n\n使用自定义尺寸和视觉参数：\n\n```tsx\nimport { SmoothCapsule } from \"@claralight-design/smooth-capsule\";\n\nexport function CustomCapsule() {\n return (\n \n Smooth Capsule\n \n );\n}\n```\n\n## Props / 属性\n\n| Prop / 属性 | Type / 类型 | Default / 默认值 | Description / 说明 |\n| --- | --- | --- | --- |\n| `capWidth` | `number` | `undefined` | Sets the reference cap width. If `capHeight` is not provided, height is calculated from this value. / 设置参考端帽宽度。未传入 `capHeight` 时，会根据该值计算高度。 |\n| `capHeight` | `number` | `22` | Sets the capsule cap height. This is the primary size control. / 设置胶囊端帽高度，是主要尺寸控制项。 |\n| `blur` | `number` | `24` | Backdrop blur radius in pixels. / 背景模糊半径，单位为像素。 |\n| `tint` | `string` | `rgb(255 255 255 / 0.14)` | CSS color used as the translucent tint layer. / 用作半透明色调层的 CSS 颜色。 |\n| `highlight` | `boolean` | `false` | Enables inset highlight and brighter backdrop filtering. / 启用内侧高光，并提高背景滤镜亮度。 |\n| `className` | `string` | `undefined` | Additional class name applied to the root element. / 追加到根元素的类名。 |\n| `children` | `ReactNode` | `undefined` | Content rendered inside the capsule. / 渲染在胶囊内部的内容。 |\n\n## Styling Notes / 样式说明\n\nThe root element is an inline-flex ``. The component defines CSS custom properties internally from props, then applies a size-aware Lisse `clip-path`, blur, tint, and optional highlight through its bundled stylesheet.\n\n根元素是一个 `inline-flex` 的 ``。组件会根据属性生成 CSS 自定义属性，并通过内置样式应用遮罩、模糊、色调和可选高光。\n\nChild content controls the visible middle width. Set width, padding, or layout styles on the child element when you need a specific capsule length.\n\n子内容会影响中间区域的可见宽度。需要固定胶囊长度时，请在子元素上设置宽度、内边距或布局样式。\n\n## Local Development / 本地开发\n\nInstall dependencies:\n\n安装依赖：\n\n```bash\npnpm install\n```\n\nStart the Vite demo:\n\n启动 Vite 演示：\n\n```bash\npnpm dev\n```\n\nBuild the package:\n\n构建组件包：\n\n```bash\npnpm build\n```\n\n## Package Exports / 包导出\n\n```ts\nexport { SmoothCapsule } from \"@claralight-design/smooth-capsule\";\nexport type { SmoothCapsuleProps } from \"@claralight-design/smooth-capsule\";\n```\n\n## Browser Support / 浏览器支持\n\nThe component relies on CSS `clip-path: path(...)` and `backdrop-filter`. For the intended glass effect, use browsers that support CSS path clipping and `backdrop-filter`.\n\n组件依赖 CSS `clip-path: path(...)` 和 `backdrop-filter`。如需完整玻璃效果，请使用支持 CSS 路径裁切和 `backdrop-filter` 的浏览器。\n\n## License / 许可证\n\nSee [LICENSE](./LICENSE).\n","readmeFilename":"README.md"}