{"_id":"@blur-ui/scroll-area","_rev":"1-4d7f3e1b0b0276b1be7ba7bdc366e69f","name":"@blur-ui/scroll-area","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@blur-ui/scroll-area","version":"1.0.0","keywords":["scroll-area","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"@blur-ui/scroll-area@1.0.0","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/scroll-area","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"dist":{"shasum":"2f84249d5fe6d8295e3994d42e264e96adea3524","tarball":"https://registry.npmjs.org/@blur-ui/scroll-area/-/scroll-area-1.0.0.tgz","fileCount":6,"integrity":"sha512-8LHjIV1oQSpgZvyNEzidpjbXsAp4R7dK80ISa9n7C+EbT8JQQQWvSiZoRGyvuxzEr4OomOZmU++GILaU1H+7+Q==","signatures":[{"sig":"MEYCIQDSt3jyQhD5PlzlJZbQxG3q7/diEJNHCvzD10Dhe1iOygIhAOHu1zDskSQH+iCnQEVfyQfDHJ7Gsv3rZoTwAchYxLum","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29939},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"235365375499af0c4466e7ec4fb4603d34c7d7af","private":false,"scripts":{"lint":"eslint .","build":"tsup src/index.ts --format cjs,esm --dts","lint:fix":"eslint . --fix"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/blur.git","type":"git","directory":"packages/standalone/scroll-area"},"_npmVersion":"10.8.2","description":"The Scroll Area component for React","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"@blur-ui/react-utils":"*","@radix-ui/react-scroll-area":"^1.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","eslint":"^9","react-dom":"^19.0.0","@blur-ui/tsup-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/typescript-config":"workspace:*"},"peerDependencies":{"react":"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc","react-dom":"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"},"_npmOperationalInternal":{"tmp":"tmp/scroll-area_1.0.0_1737491490450_0.5228940359807928","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@blur-ui/scroll-area","description":"The Scroll Area component for React","keywords":["scroll-area","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"version":"1.0.1","license":"MIT","private":false,"publishConfig":{"access":"public"},"exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/blur.git","directory":"packages/standalone/scroll-area"},"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/scroll-area","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"scripts":{"lint":"eslint .","lint:fix":"eslint . --fix","build":"tsup src/index.ts --format cjs,esm --dts"},"peerDependencies":{"react":"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc","react-dom":"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"},"dependencies":{"@radix-ui/react-scroll-area":"^1.2.2","@blur-ui/react-utils":"*"},"devDependencies":{"@blur-ui/typescript-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/tsup-config":"workspace:*","eslint":"^9","tsup":"^8.3.5","react":"^19.0.0","react-dom":"^19.0.0"},"_id":"@blur-ui/scroll-area@1.0.1","gitHead":"b94b222903bde9dd5207903e402c64292924ff87","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-xc9imGjFquH7+5IS61k6sUgDsmnpQ0E+kkbPnw8O5dAHciekA3Q36CGnf6ky8g3F+XfOQSlNrHc3e3Ujl1RenA==","shasum":"9902fb5adad5882636025459608ee3ba1daac70f","tarball":"https://registry.npmjs.org/@blur-ui/scroll-area/-/scroll-area-1.0.1.tgz","fileCount":6,"unpackedSize":29938,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPMoNIXTJCjCr6y/TWibD/qB2rCw2YZVNljRxgTnaN2gIhAN2rFEaqYJbF1w/Rfhyh52G9mbpqXrh9Q6i7iBHESljX"}]},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"directories":{},"maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scroll-area_1.0.1_1737494017915_0.17945490539268105"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-21T20:31:30.348Z","modified":"2025-01-21T21:13:38.339Z","1.0.0":"2025-01-21T20:31:30.659Z","1.0.1":"2025-01-21T21:13:38.088Z"},"bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/scroll-area","keywords":["scroll-area","react","ui","component"],"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/blur.git","directory":"packages/standalone/scroll-area"},"description":"The Scroll Area component for React","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"readme":"# Scroll Area\n\nAugments native scroll functionality for custom, cross-browser styling. Optionally applies shadows when content overflows on scroll.\n\n<b>[Live Examples](https://blur-ui-storybook.vercel.app/?path=/docs/components-scrollarea--docs)</b>\n\n## Features\n\n- Large-dependencies free.\n- Supports vertical, horizontal, and both orientations.\n- Fully unstyled and customizable.\n- RTL support.\n- Keyboard support.\n\n## Requirements\n\n- `react` >= 18.0.0\n\n## Installation\n\n```bash\nnpm install @blur-ui/scroll-area\n```\n\nor\n\n```bash\nyarn add @blur-ui/scroll-area\n```\n\n## Usage\n\n```tsx\nconst scrollAreaClassnames: ScrollAreaClassnames = {\n  root: 'w-60 h-60',\n  scrollbar: 'p-[1px]',\n  verticalScrollbar: 'w-2.5',\n  horizontalScrollbar: 'h-2.5',\n  thumb: 'bg-neutral-100 rounded-full',\n};\n\n<ScrollArea classNames={scrollAreaClassnames}>\n  <p>Lorem ...</p>\n</ScrollArea>;\n```\n\n## Props\n\n### `ScrollArea`\n\n| Prop Name              | Type                                         | Default     | Description                                                                                                                                                           |\n|------------------------|----------------------------------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `viewportProps`        | `ScrollAreaViewportProps`                    | `undefined` | Props to pass to the viewport element, including a `ref` to the DOM element.                                                                                            |\n| `scrollbarProps`       | `ScrollAreaScrollbarProps`                   | `undefined` | Props to customize the scrollbar.                                                                                                                                     |\n| `verticalScrollbarProps` | `ScrollAreaScrollbarProps`                 | `undefined` | Props to customize the vertical scrollbar specifically.                                                                                                               |\n| `horizontalScrollbarProps` | `ScrollAreaScrollbarProps`               | `undefined` | Props to customize the horizontal scrollbar specifically.                                                                                                             |\n| `thumbProps`           | `ScrollAreaThumbProps`                       | `undefined` | Props to customize the scrollbar thumb.                                                                                                                                 |\n| `verticalThumbProps`   | `ScrollAreaThumbProps`                       | `undefined` | Props to customize the vertical scrollbar thumb specifically.                                                                                                         |\n| `horizontalThumbProps` | `ScrollAreaThumbProps`                       | `undefined` | Props to customize the horizontal scrollbar thumb specifically.                                                                                                       |\n| `cornerProps`          | `ScrollAreaCornerProps`                      | `undefined` | Props to customize the scrollbar corner element.                                                                                                                       |\n| `classNames`           | `ScrollAreaClassNames`                       | `undefined` | An object to override default class names for various parts of the ScrollArea component.                                                                                |\n| `disableShadow`        | `boolean`                                    | `false`     | If `true`, disables the scroll shadow effect.                                                                                                                          |\n| `shadowSize`           | `number`                                     | `40`        | The size of the shadow in pixels applied when content overflows.                                                                                                      |\n| `orientation`          | `'vertical' \\| 'horizontal' \\| 'both'`        | `'vertical'`| Determines the scroll orientation. Can be vertical, horizontal, or both.                                                                                                |\n| `ref`                  | `React.Ref<HTMLDivElement>`                  | `undefined` | A ref to access the root DOM element of the ScrollArea.                                                                                                               |\n| `children`             | `React.ReactNode`                             | `undefined` | The content to be displayed within the ScrollArea.                                                                                                                     |\n| `offset`               | `number`                                     | `0`         | The offset used in calculating the scroll shadow visibility.                                                                                                         |\n| `visibility`           | `'auto' \\| 'visible' \\| 'hidden'`             | `'auto'`    | Controls the visibility behavior of the scroll shadows.                                                                                                              |\n| `onVisibilityChange`   | `(visible: boolean) => void`                  | `undefined` | Callback function invoked when the visibility of the scroll shadows changes.                                                                                          |\n\n### `classNames` Object\n\n| Class Name Key          | Description                                          |\n|-------------------------|------------------------------------------------------|\n| `root`                  | Class name for the root ScrollArea element.          |\n| `viewport`              | Class name for the viewport area.                    |\n| `scrollbar`             | Class name for the scrollbar container.              |\n| `verticalScrollbar`     | Class name for the vertical scrollbar.               |\n| `horizontalScrollbar`   | Class name for the horizontal scrollbar.             |\n| `thumb`                 | Class name for the scrollbar thumbs.                 |\n| `verticalThumb`         | Class name for the vertical scrollbar thumb.         |\n| `horizontalThumb`       | Class name for the horizontal scrollbar thumb.       |\n| `corner`                | Class name for the scrollbar corner element.         |\n\n\n## Credits\n\n[Radix UI Scroll Area](https://www.radix-ui.com/primitives/docs/components/scroll-area) | [Hero UI ScrollShadow](https://www.heroui.com/docs/components/scroll-shadow)\n","readmeFilename":"README.md"}