NodeGroup components for collapsible container with items
npm install @hautechai/webui.nodegroupA set of components for creating collapsible groups of items with headers. Provides a hierarchical organization structure for node-like data.
Main container component that provides collapsible functionality.
| Parameter | Type | Description |
| --------- | --------------- | ----------------------------------------------- |
| label | string | Text label for the group header |
| collapsed | boolean | Whether the group is collapsed (default: false) |
| children | React.ReactNode | Children to render when expanded |
| onToggle | () => void | Handler for toggle state |
Header component with label and collapse/expand indicator.
| Parameter | Type | Description |
| --------- | ---------- | ------------------------------ |
| label | string | Text label to display |
| collapsed | boolean | Whether the group is collapsed |
| onToggle | () => void | Handler for toggle state |
Individual item component with icon, title, and optional subtitle.
| Parameter | Type | Description |
| ---------- | --------------- | ----------------------------------------------------------------------- |
| icon | React.ReactNode | Icon to display at the start of the item |
| title | string | Primary title text |
| subtitle | string | Optional subtitle text |
| isDragging | boolean | Whether the item is being dragged (reduces opacity and adds background) |
``tsx``
title="BoundingBox info"
subtitle="Extracts details (position, size) from a bounding box"
/>