{"_id":"@byteland/ink-scroll-bar","_rev":"3-a15d694834a27616b4875b7f3c01e6da","name":"@byteland/ink-scroll-bar","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@byteland/ink-scroll-bar","version":"0.1.0","keywords":["react","ink","cli","terminal","scrollbar","component","ui"],"author":{"name":"ByteLand Technology","email":"github@byteland.app"},"license":"MIT","_id":"@byteland/ink-scroll-bar@0.1.0","maintainers":[{"name":"byteland-technology","email":"npm@byteland.app"}],"homepage":"https://www.byteland.app/opensource/ink-scroll-bar","bugs":{"url":"https://github.com/ByteLandTechnology/ink-scroll-bar/issues"},"dist":{"shasum":"c809ff2d1565fe8d9b790d70758afa64c660df04","tarball":"https://registry.npmjs.org/@byteland/ink-scroll-bar/-/ink-scroll-bar-0.1.0.tgz","fileCount":20,"integrity":"sha512-TDaOx8e4CPsAvddsYVGha3TN139D3RtsoWbI4/dHYKXjCJnQwgF942yJpniZ5BfxIXjfYRuxBXkfHQbzHLmMWQ==","signatures":[{"sig":"MEUCICZ90StvXtVsIkkgQYlzi0jKzm7N39GZSUV8SgV/hsZdAiEA6o0X3K59LHg998gHC1GZopPkl8gCBR2wSxJlWT58KW0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":446547},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","source":"src/index.tsx","gitHead":"ab0772ab6d0ac99b7fcd11ffe8101c916de77174","scripts":{"docs":"typedoc --plugin typedoc-plugin-markdown --out docs/api src/index.tsx && prettier --write docs/api","test":"vitest run","build":"tsup","prepare":"husky"},"_npmUser":{"name":"byteland-technology","email":"npm@byteland.app"},"repository":{"url":"git+https://github.com/ByteLandTechnology/ink-scroll-bar.git","type":"git"},"_npmVersion":"11.6.2","description":"A vertical ScrollBar component for Ink CLI applications","directories":{},"_nodeVersion":"25.2.0","_hasShrinkwrap":false,"devDependencies":{"ink":"^6.5.1","tsup":"^8.5.1","husky":"^9.1.7","react":"^19.2.1","typedoc":"^0.28.15","prettier":"^3.7.4","@types/ink":"^0.5.2","@types/node":"^24.10.1","lint-staged":"^16.2.7","@types/react":"^19.2.7","@commitlint/cli":"^20.2.0","@sindresorhus/tsconfig":"^8.1.0","typedoc-plugin-markdown":"^4.9.0","@commitlint/config-conventional":"^20.2.0"},"peerDependencies":{"ink":"^4.0.0","react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ink-scroll-bar_0.1.0_1765273365927_0.7073692723910592","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@byteland/ink-scroll-bar","version":"0.1.1","keywords":["react","ink","cli","terminal","scrollbar","component","ui"],"author":{"name":"ByteLand Technology","email":"github@byteland.app"},"license":"MIT","_id":"@byteland/ink-scroll-bar@0.1.1","maintainers":[{"name":"byteland-technology","email":"npm@byteland.app"}],"homepage":"https://www.byteland.app/opensource/ink-scroll-bar","bugs":{"url":"https://github.com/ByteLandTechnology/ink-scroll-bar/issues"},"dist":{"shasum":"879aab189fc8a038c3019b32e5ecfc50611040c0","tarball":"https://registry.npmjs.org/@byteland/ink-scroll-bar/-/ink-scroll-bar-0.1.1.tgz","fileCount":20,"integrity":"sha512-ANoJhOWdkK6cFNBFtLH8lXrBy5a8aWGylcugnjSaoQ0qziCYhx0DTdLszQoIxIPciHuCBHJXcm8eKEQ2cQmpBQ==","signatures":[{"sig":"MEUCIEEr27M7czF2DQXjcoM/vpDiEoCG7y8S6MemzJMZKPBbAiEAjeqOQ0E2ZQu4Mj+NgXOzBlU7L8isLpC2q8wtEVn/FSI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":446541},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","source":"src/index.tsx","gitHead":"82be9b11b8061c4730a3edf7c063715a04b007b7","scripts":{"docs":"typedoc --plugin typedoc-plugin-markdown --out docs/api src/index.tsx && prettier --write docs/api","test":"vitest run","build":"tsup","prepare":"husky"},"_npmUser":{"name":"byteland-technology","email":"npm@byteland.app"},"repository":{"url":"git+https://github.com/ByteLandTechnology/ink-scroll-bar.git","type":"git"},"_npmVersion":"11.6.2","description":"A vertical ScrollBar component for Ink CLI applications","directories":{},"_nodeVersion":"25.2.0","_hasShrinkwrap":false,"devDependencies":{"ink":"^6.5.1","tsup":"^8.5.1","husky":"^9.1.7","react":"^19.2.1","typedoc":"^0.28.15","prettier":"^3.7.4","@types/ink":"^0.5.2","@types/node":"^24.10.1","lint-staged":"^16.2.7","@types/react":"^19.2.7","@commitlint/cli":"^20.2.0","@sindresorhus/tsconfig":"^8.1.0","typedoc-plugin-markdown":"^4.9.0","@commitlint/config-conventional":"^20.2.0"},"peerDependencies":{"ink":">=6","react":">=19"},"_npmOperationalInternal":{"tmp":"tmp/ink-scroll-bar_0.1.1_1765337697351_0.40907118823974975","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@byteland/ink-scroll-bar","version":"1.0.0","description":"A vertical ScrollBar component for Ink CLI applications","keywords":["react","ink","cli","terminal","scrollbar","component","ui"],"homepage":"https://www.byteland.app/opensource/ink-scroll-bar","bugs":{"url":"https://github.com/ByteLandTechnology/ink-scroll-bar/issues"},"repository":{"type":"git","url":"git+https://github.com/ByteLandTechnology/ink-scroll-bar.git"},"license":"MIT","author":{"name":"ByteLand Technology","email":"github@byteland.app"},"type":"module","main":"dist/index.js","types":"dist/index.d.ts","source":"src/index.tsx","scripts":{"test":"vitest run","prepare":"husky","build":"tsup","docs":"typedoc --plugin typedoc-plugin-markdown --out docs/api src/index.tsx && prettier --write docs/api"},"peerDependencies":{"ink":">=6","react":">=19"},"devDependencies":{"@commitlint/cli":"^20.2.0","@commitlint/config-conventional":"^20.2.0","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.1","@semantic-release/git":"^10.0.1","@semantic-release/github":"^12.0.5","@semantic-release/npm":"^13.1.4","@semantic-release/release-notes-generator":"^14.1.0","@sindresorhus/tsconfig":"^8.1.0","@types/ink":"^0.5.2","@types/node":"^24.10.1","@types/react":"^19.2.7","conventional-changelog-conventionalcommits":"^9.1.0","husky":"^9.1.7","ink":"^6.5.1","lint-staged":"^16.2.7","prettier":"^3.7.4","react":"^19.2.1","semantic-release":"^25.0.3","tsup":"^8.5.1","typedoc":"^0.28.15","typedoc-plugin-markdown":"^4.9.0"},"gitHead":"261593a23f4a4f468e3aa8560cd5b42d10ad855a","_id":"@byteland/ink-scroll-bar@1.0.0","_nodeVersion":"22.22.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-5wfUK9H6iQI3v66uk7nQ3mJIahooA2oYpVKc5PtXMb68+z8EbWFT15wxVSJ9/x8an8oGgeGvdJcLCKdv9bjVdg==","shasum":"4ad94dd18473b16039d3b960734b95c574e1c548","tarball":"https://registry.npmjs.org/@byteland/ink-scroll-bar/-/ink-scroll-bar-1.0.0.tgz","fileCount":20,"unpackedSize":446860,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@byteland%2fink-scroll-bar@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCbYpVamPY7eKx8AvfieL4VJ7FXQm/+j6x2myjtVxvCqgIgItkbnfDTQcKyUZjR+mTE8vpkHpDREwUMWbA+oOPxyGE="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:9a336b3d-925a-4636-861b-1a34c3bdf5b2"}},"directories":{},"maintainers":[{"name":"byteland-technology","email":"npm@byteland.app"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ink-scroll-bar_1.0.0_1770704474274_0.6846547817004867"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-09T09:42:45.795Z","modified":"2026-02-10T06:21:14.825Z","0.1.0":"2025-12-09T09:42:46.079Z","0.1.1":"2025-12-10T03:34:57.502Z","1.0.0":"2026-02-10T06:21:14.451Z"},"bugs":{"url":"https://github.com/ByteLandTechnology/ink-scroll-bar/issues"},"author":{"name":"ByteLand Technology","email":"github@byteland.app"},"license":"MIT","homepage":"https://www.byteland.app/opensource/ink-scroll-bar","keywords":["react","ink","cli","terminal","scrollbar","component","ui"],"repository":{"type":"git","url":"git+https://github.com/ByteLandTechnology/ink-scroll-bar.git"},"description":"A vertical ScrollBar component for Ink CLI applications","maintainers":[{"name":"byteland-technology","email":"npm@byteland.app"}],"readme":"# 📜 ink-scroll-bar\n\nA customizable, high-precision vertical scroll bar component for [Ink](https://github.com/vadimdemedes/ink) CLI applications.\n\n![License](https://img.shields.io/npm/l/@byteland/ink-scroll-bar)\n![Version](https://img.shields.io/npm/v/@byteland/ink-scroll-bar)\n\n## ✨ Features\n\n- **Two Rendering Modes**:\n  - **Border Mode**: Seamlessly integrates with container borders (replaces one side).\n\n    ![Border Mode Demo](./docs/border.svg)\n\n  - **Inset Mode**: Renders inside the content area, perfect for floating scroll bars.\n\n    ![Inset Mode Demo](./docs/inset.svg)\n    - Supports `autoHide`: Completely hide the scroll bar when content fits the viewport.\n    - If `autoHide` is `false` (default) and content fits, only the track is shown.\n\n    ![Auto Hide Demo](./docs/autohide.svg)\n\n- **Rich Styling**:\n  - Supports all standard Ink border styles (`single`, `double`, `round`, `bold`, etc.).\n  - Special inset styles (`block`, `line`, `thick`, `dots`).\n  - Customizable colors and dimming.\n- **Flexible Integration**:\n  - Standalone `ScrollBar` component for custom layouts.\n  - `ScrollBarBox` wrapper for instant bordered containers with scroll bars.\n- **Auto-hide**: Option to hide the scroll bar when content fits the viewport (inset mode).\n\n## 📦 Installation\n\n```bash\nnpm install @byteland/ink-scroll-bar\n```\n\n## 🚀 Usage\n\n### Basic Usage with `ScrollBarBox`\n\nThe easiest way to use `ink-scroll-bar` is with the `ScrollBarBox` component. It wraps your content in a bordered box and handles the scroll bar positioning for you.\n\n```tsx\nimport React, { useState } from \"react\";\nimport { Text } from \"ink\";\nimport { ScrollBarBox } from \"ink-scroll-bar\";\n\nconst MyComponent = () => {\n  const [offset, setOffset] = useState(0);\n  const totalItems = 50;\n  const viewportHeight = 10;\n\n  return (\n    <ScrollBarBox\n      height={viewportHeight + 2} // +2 for borders\n      width={40}\n      borderStyle=\"single\"\n      scrollBarPosition=\"right\"\n      contentHeight={totalItems}\n      viewportHeight={viewportHeight}\n      scrollOffset={offset}\n    >\n      {/* Your scrollable content here */}\n      <Text>Item 1...</Text>\n    </ScrollBarBox>\n  );\n};\n```\n\n### Advanced Usage with `ScrollBar`\n\nFor more control over layout, use the standalone `ScrollBar` component.\n\n#### Border Mode\n\nIn border mode, the scroll bar renders corner characters to connect with adjacent borders.\n\n```tsx\nimport { Box } from \"ink\";\nimport { ScrollBar } from \"ink-scroll-bar\";\n\n<Box flexDirection=\"row\">\n  {/* Content Box with right border removed */}\n  <Box borderStyle=\"single\" borderRight={false}>\n    <Content />\n  </Box>\n\n  {/* ScrollBar completes the border */}\n  <ScrollBar\n    placement=\"right\"\n    style=\"single\"\n    contentHeight={100}\n    viewportHeight={20}\n    scrollOffset={offset}\n  />\n</Box>;\n```\n\n#### Inset Mode\n\nInset mode renders without corners, suitable for placing _inside_ a container.\n\n```tsx\n<Box borderStyle=\"round\" padding={1}>\n  <Box flexDirection=\"row\">\n    <Content />\n    <ScrollBar\n      placement=\"inset\"\n      style=\"block\" // 'block', 'line', 'thick', 'dots'\n      color=\"cyan\"\n      contentHeight={100}\n      viewportHeight={20}\n      scrollOffset={offset}\n      autoHide // Hide if content fits\n    />\n  </Box>\n</Box>\n```\n\n## 📚 API\n\n### `ScrollBar` Props\n\n| Prop             | Type                           | Default              | Description                                                                           |\n| ---------------- | ------------------------------ | -------------------- | ------------------------------------------------------------------------------------- |\n| `contentHeight`  | `number`                       | **Required**         | 📏 Total height of the scrollable content.                                            |\n| `viewportHeight` | `number`                       | **Required**         | 👁️ Height of the visible area.                                                        |\n| `scrollOffset`   | `number`                       | **Required**         | ⬇️ Current scroll position (0 to max).                                                |\n| `placement`      | `'left' \\| 'right' \\| 'inset'` | `'right'`            | 📍 Rendering mode/position.                                                           |\n| `style`          | `ScrollBarStyle`               | `'single'`/`'block'` | 🎨 Visual style (see below).                                                          |\n| `color`          | `string`                       | `undefined`          | 🌈 Color of the scroll bar characters.                                                |\n| `dimColor`       | `boolean`                      | `false`              | 🌑 Whether to dim the scroll bar.                                                     |\n| `autoHide`       | `boolean`                      | `false`              | 👻 Hide when content fits (Inset mode only). If false, shows track when content fits. |\n| `thumbChar`      | `string`                       | -                    | 👍 Custom thumb character.                                                            |\n| `trackChar`      | `string`                       | -                    | 🛤️ Custom track character (Inset mode only).                                          |\n\n### `ScrollBarBox` Props\n\nInherits all [Ink Box Props](https://github.com/vadimdemedes/ink#box), plus:\n\n| Prop                | Type                | Default      | Description                                 |\n| ------------------- | ------------------- | ------------ | ------------------------------------------- |\n| `contentHeight`     | `number`            | **Required** | 📏 Total height of the content.             |\n| `viewportHeight`    | `number`            | **Required** | 👁️ Height of the viewport.                  |\n| `scrollOffset`      | `number`            | **Required** | ⬇️ Current scroll position.                 |\n| `scrollBarPosition` | `'left' \\| 'right'` | `'right'`    | 📍 Which border to replace with scroll bar. |\n| `scrollBarAutoHide` | `boolean`           | `false`      | 👻 Hide thumb if content fits.              |\n| `thumbChar`         | `string`            | -            | 👍 Custom thumb character.                  |\n\n### 🎨 Styles\n\n**Border Mode Styles** (matches Ink borders):\n\n- `single`, `double`, `round`, `bold`, `singleDouble`, `doubleSingle`, `classic`, `arrow`\n\n**Inset Mode Styles**:\n\n- `block`: █ thumb, ░ track\n- `line`: │ thumb, (blank) track\n- `thick`: ┃ thumb, ╏ track\n- `dots`: ● thumb, · track\n\n## 📄 License\n\nMIT\n","readmeFilename":"README.md"}