feat(scroll-area): add onScroll prop

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.3] - 2026-05-08
+
+### Features
+- **ScrollArea**: Added `onScroll` prop for scroll event handling (enables infinite scroll, scroll position tracking, etc.)
+- **ScrollArea**: Exported `ScrollAreaProps` type for TypeScript consumers
+
+### Fixes
+- **Tooltip**: Removed unnecessary `TooltipPortal` export (handled internally by `TooltipContent`)
+
+---
+
 ## [1.1.2] - 2026-05-07
 
 ### Fixes
@@ -82,7 +93,8 @@ If you have custom themes or override theme variables, you'll need to update the
 
 ## Version Reference
 
-- **1.1.2** - Current release (missing exports fix)
+- **1.1.3** - Current release (ScrollArea onScroll prop, tooltip export cleanup)
+- **1.1.2** - Missing exports fix
 - **1.1.1** - Sidebar active state underline
 - **1.1.0** - Theming refactor
 - **1.0.0** - Initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nipsys/lsd-monorepo",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "description": "Monorepo for the @nipsys/lsd component library and documentation",
   "license": "MIT",

packages/lsd-docs/app/components/scroll-area/page.tsx

@@ -142,23 +142,26 @@ export default function MyComponent() {
         </PageSection>
 
         <PageSection title="API Reference">
-          <div className="flex flex-col gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
-            <Card>
-              <CardHeader>
-                <CardTitle>Radix UI Documentation</CardTitle>
-                <CardDescription>ScrollArea wraps Radix UI primitives</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <a
-                  href="https://www.radix-ui.com/primitives/docs/components/scroll-area"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline"
-                >
-                  View Radix UI ScrollArea documentation →
-                </a>
-              </CardContent>
-            </Card>
+          <div className="mt-(--lsd-spacing-large)">
+            <Typography variant="h4" className="mb-(--lsd-spacing-base)">
+              ScrollArea
+            </Typography>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-(--lsd-spacing-base)">
+              <Card>
+                <CardHeader>
+                  <CardTitle>onScroll</CardTitle>
+                  <CardDescription>Callback fired when the viewport scrolls</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Typography variant="body2" className="block mb-(--lsd-spacing-smaller)">
+                    <strong>Type:</strong> <code>React.UIEventHandler&lt;HTMLDivElement&gt;</code>
+                  </Typography>
+                  <Typography variant="label1" className="block mt-(--lsd-spacing-smaller)">
+                    <strong>Optional</strong>
+                  </Typography>
+                </CardContent>
+              </Card>
+            </div>
           </div>
         </PageSection>
 

packages/lsd-docs/app/config/site.ts

@@ -3,7 +3,7 @@ export const siteConfig = {
   title: 'LSD Documentation',
   description: 'LSD Component Library Documentation',
   url: 'https://lsd.nipsys.dev',
-  version: '1.1.2',
+  version: '1.1.3',
   github: 'https://github.com/nipsysdev/lsd',
 } as const;
 

packages/lsd-docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nipsys/lsd-docs",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

packages/lsd/package.json

@@ -5,7 +5,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "module": "./dist/main.js",
   "exports": {

packages/lsd/src/components/ui/scroll-area/ScrollArea.tsx

@@ -4,6 +4,14 @@ import type * as React from 'react';
 import { cn } from '@/lib/utils';
 import { ScrollBar } from './ScrollBar';
 
+/**
+ * Props for the ScrollArea component
+ */
+export interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  /** Callback fired when the viewport scrolls */
+  onScroll?: React.UIEventHandler<HTMLDivElement>;
+}
+
 /**
  * ScrollArea - Custom styled scrollable container
  *
@@ -34,13 +42,11 @@ import { ScrollBar } from './ScrollBar';
  * @docSectionAccessibilityFocus
  * Standard focus management for scrollable content. Focus follows native browser behavior when navigating with keyboard.
  *
+ * @param onScroll - Callback fired when the viewport scrolls. Receives the scroll event with scrollTop accessible via event.currentTarget.scrollTop.
+ *
  * @exportAs root
  */
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+function ScrollArea({ className, children, onScroll, ...props }: ScrollAreaProps) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -50,6 +56,7 @@ function ScrollArea({
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
         className="focus-visible:lsd:ring-lsd-text-neutral/50 lsd:size-full lsd:rounded-[inherit] lsd:transition-[color,box-shadow] lsd:outline-none focus-visible:lsd:ring-[3px] focus-visible:lsd:outline-1"
+        onScroll={onScroll}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

packages/lsd/src/components/ui/scroll-area/index.ts

@@ -1,2 +1,2 @@
-export { ScrollArea } from './ScrollArea';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
 export { ScrollBar } from './ScrollBar';

packages/lsd/src/components/ui/tooltip/index.ts

@@ -1,5 +1,4 @@
 export { Tooltip } from './Tooltip';
 export { TooltipContent } from './TooltipContent';
-export { TooltipPortal } from './TooltipPortal';
 export { TooltipProvider } from './TooltipProvider';
 export { TooltipTrigger } from './TooltipTrigger';

skills/nipsys-lsd/SKILL.md

@@ -2,7 +2,7 @@
 name: nipsys-lsd
 description: Use when working with @nipsys/lsd in React 19+ projects for UI component implementation, theming, and design system integration. Provides comprehensive guidance for the LSD monochromatic component library including 39 accessible components with semantic styling, spacing tokens (--lsd-spacing-*), keyboard navigation patterns, and proper composition patterns. Ideal for developers building React applications.
 metadata:
-  version: 1.1.2
+  version: 1.1.3
   category: frontend
   sources:
     - https://github.com/nipsysdev/lsd