@zvoove/unity-ui 2.44.0 → 2.45.0

package/dist/bin/cli.mjs

@@ -423,6 +423,7 @@ Load the matching skill for full props, examples, and rules:
 | PopUpMenu | \`unity-ui-pop-up-menu\` |
 | ProgressIndicator | \`unity-ui-progress-indicator\` |
 | Radio / RadioGroup | \`unity-ui-radio\` |
+| ScrollableArea | \`unity-ui-scrollable-area\` |
 | Segment / SegmentGroup | \`unity-ui-segment\` |
 | Select | \`unity-ui-select\` |
 | Sheet | \`unity-ui-sheet\` |
@@ -482,6 +483,7 @@ When a component is requested by a name not listed above, resolve it using this
 | Label tag, Status tag, Status label, Category label | **Tag** |
 | Flexbox container, HStack, VStack, Flex, Box | **Stack** |
 | Grid layout, CSS grid, Masonry (equal columns) | **Grid** |
+| Scroll area, ScrollArea, Overflow container, Custom scrollbar | **ScrollableArea** |
 | Menu list, Navigation list, Action list, Vertical menu | **ListMenu** |
 | Tab navigation, Sub navigation, Section tabs, Tab bar (secondary) | **MidSectionMenus** |
 | Content section, Page section, Content container, Content area | **ContentBlock** |
@@ -624,6 +626,10 @@ var SHADCN_MAP = {
     url: "https://ui.shadcn.com/docs/components/radio-group"
   },
   ScoreCard: null,
+  ScrollableArea: {
+    name: "ScrollArea",
+    url: "https://ui.shadcn.com/docs/components/scroll-area"
+  },
   Segment: {
     name: "ToggleGroup",
     url: "https://ui.shadcn.com/docs/components/toggle-group"
@@ -723,6 +729,11 @@ var MUI_MAP = {
   },
   Radio: { name: "RadioGroup", url: `${MUI_BASE}radio-button/` },
   ScoreCard: null,
+  ScrollableArea: {
+    name: "Box (overflow)",
+    url: `${MUI_BASE}box/`,
+    note: "MUI has no dedicated scroll area. Use Box with overflow, or a custom scrollbar."
+  },
   Segment: {
     name: "ToggleButtonGroup",
     url: `${MUI_BASE}toggle-button/`
@@ -811,6 +822,7 @@ var STORYBOOK_MAP = {
   ProgressIndicator: "Components/ProgressIndicator",
   Radio: "Forms/Radio/RadioGroup",
   ScoreCard: "Components/ScoreCard",
+  ScrollableArea: "Layout/ScrollableArea",
   Segment: "Components/Buttons/Segment/SegmentGroup",
   Select: "Forms/Select",
   Sheet: "Components/Sheet",
@@ -840,6 +852,7 @@ function storybookUrl(name) {
 var CATEGORIES = {
   Stack: "layout",
   Grid: "layout",
+  ScrollableArea: "layout",
   Card: "layout",
   Divider: "layout",
   Expandable: "layout",

package/dist/bin/generate-skills.mjs

@@ -178,6 +178,10 @@ var SHADCN_MAP = {
     url: "https://ui.shadcn.com/docs/components/radio-group"
   },
   ScoreCard: null,
+  ScrollableArea: {
+    name: "ScrollArea",
+    url: "https://ui.shadcn.com/docs/components/scroll-area"
+  },
   Segment: {
     name: "ToggleGroup",
     url: "https://ui.shadcn.com/docs/components/toggle-group"
@@ -277,6 +281,11 @@ var MUI_MAP = {
   },
   Radio: { name: "RadioGroup", url: `${MUI_BASE}radio-button/` },
   ScoreCard: null,
+  ScrollableArea: {
+    name: "Box (overflow)",
+    url: `${MUI_BASE}box/`,
+    note: "MUI has no dedicated scroll area. Use Box with overflow, or a custom scrollbar."
+  },
   Segment: {
     name: "ToggleButtonGroup",
     url: `${MUI_BASE}toggle-button/`
@@ -365,6 +374,7 @@ var STORYBOOK_MAP = {
   ProgressIndicator: "Components/ProgressIndicator",
   Radio: "Forms/Radio/RadioGroup",
   ScoreCard: "Components/ScoreCard",
+  ScrollableArea: "Layout/ScrollableArea",
   Segment: "Components/Buttons/Segment/SegmentGroup",
   Select: "Forms/Select",
   Sheet: "Components/Sheet",
@@ -394,6 +404,7 @@ function storybookUrl(name) {
 var CATEGORIES = {
   Stack: "layout",
   Grid: "layout",
+  ScrollableArea: "layout",
   Card: "layout",
   Divider: "layout",
   Expandable: "layout",

package/dist/llms.txt

@@ -189,6 +189,25 @@ Common patterns:
 </Grid>
 ```
 
+### ScrollableArea
+Overflow container with an Apple-like overlay scrollbar. Use it when content may exceed its parent. When `height` and `width` are omitted, the area fills its parent (`size-full`).
+```tsx
+import { ScrollableArea } from '@zvoove/unity-ui';
+
+<ScrollableArea
+  height={240}                 // ResponsiveType<number | string> — omit to fill parent height
+  width="100%"                 // ResponsiveType<number | string> — omit to fill parent width
+  hideScrollbar={false}        // boolean — hide the scrollbar entirely (wins over useDefaultScrollbar)
+  useDefaultScrollbar={false}  // boolean — use the browser native scrollbar instead of the overlay style
+  addFade={false}              // boolean | { top?, bottom?, left?, right?, block?, inline? } — show edge fades while there is remaining overflow
+  bgColor="surface"            // BackgroundColors — wrapper background and fade gradient source
+>
+  {children}
+</ScrollableArea>
+```
+
+The default overlay scrollbar is a thin, rounded thumb that uses `on-surface` so it works in light and dark mode, and appears on hover or while scrolling. `addFade` shows a gradient on any enabled edge (top, bottom, left, right) that still has remaining overflow; the fade disappears when that edge of the container is reached. Pass `true` for all edges, or an object to pick sides (`block` = top and bottom, `inline` = left and right; explicit sides override the matching axis). Pass `bgColor` so the gradient matches the surrounding surface.
+
 ### Card
 **Visual container** with background, elevation, and border. Use Card to group content visually (e.g., a profile card, a settings panel, a content section). Do NOT use Card for layout — use Stack or Grid instead. Card is a surface, not a layout tool.
 ```tsx