haze-ui 1.30.0 → 1.31.0

package/dist/mcp-docs.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-14T15:54:16.071Z",
+  "generatedAt": "2026-10-04T04:21:23.583Z",
   "components": {
     "Accordion": {
       "cssFamily": "accordion",
@@ -50,6 +50,86 @@
         ]
       }
     },
+    "ActivityRail": {
+      "cssFamily": "activity-rail",
+      "importStatement": "import { ActivityRail, ActivityRailItem } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/activity-rail.css';",
+      "peerDeps": [],
+      "description": "VSCode-style vertical icon rail (`nav`): 44px items with icon/label/badge/active indicator, tooltip labels and `slot=\"end\"` bottom pinning.",
+      "props": {
+        "ActivityRailItemProps": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Item icon (rendered centered in the 44px target)"
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "required": true,
+            "description": "Item name — drives the tooltip and the accessible name"
+          },
+          {
+            "name": "badge",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Overlay badge (usually <Badge/>) — counters like pending reviews"
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Marks the current view: aria-current + the 2px rail-side indicator"
+          },
+          {
+            "name": "onSelect",
+            "type": "() => void",
+            "required": false,
+            "description": "Selection callback"
+          },
+          {
+            "name": "slot",
+            "type": "'start' | 'end'",
+            "required": false,
+            "default": "'start'",
+            "description": "end slots pin to the rail bottom (settings/account entries)"
+          },
+          {
+            "name": "...rest",
+            "type": "button attributes",
+            "required": false,
+            "description": "Native button props (type=button is built in)"
+          }
+        ],
+        "ActivityRailProps": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "ActivityRailItem elements"
+          },
+          {
+            "name": "orientation",
+            "type": "'vertical' | 'horizontal'",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "...rest",
+            "type": "nav attributes",
+            "required": false,
+            "description": "Renders a nav landmark — pass aria-label via rest"
+          }
+        ]
+      }
+    },
     "Affix": {
       "cssFamily": "affix",
       "importStatement": "import { Affix } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/affix.css';",
@@ -1057,7 +1137,7 @@
           },
           {
             "name": "layout",
-            "type": "'horizontal' | 'vertical'",
+            "type": "'vertical' | 'horizontal'",
             "required": false,
             "description": ""
           },
@@ -1640,7 +1720,7 @@
           },
           {
             "name": "ref",
-            "type": "Ref<HTMLDivElement | HTMLButtonElement>",
+            "type": "Ref<HTMLButtonElement | HTMLDivElement>",
             "required": false,
             "description": ""
           }
@@ -2316,6 +2396,12 @@
             "required": true,
             "description": "ConversationItem elements"
           },
+          {
+            "name": "onLoadMore",
+            "type": "() => void",
+            "required": false,
+            "description": ""
+          },
           {
             "name": "className",
             "type": "string",
@@ -3151,7 +3237,7 @@
         "DividerProps": [
           {
             "name": "orientation",
-            "type": "'horizontal' | 'vertical'",
+            "type": "'vertical' | 'horizontal'",
             "required": false,
             "default": "'horizontal'",
             "description": "Direction of the divider"
@@ -4515,6 +4601,12 @@
             "type": "ReactNode",
             "required": true,
             "description": "ListItem elements"
+          },
+          {
+            "name": "loadMore",
+            "type": "ReactNode",
+            "required": false,
+            "description": ""
           }
         ]
       }
@@ -4572,6 +4664,12 @@
             "required": false,
             "description": "Active level filter (controllable)"
           },
+          {
+            "name": "onLoadMore",
+            "type": "() => void",
+            "required": false,
+            "description": ""
+          },
           {
             "name": "className",
             "type": "string",
@@ -5936,7 +6034,7 @@
         "ResizableGroupProps": [
           {
             "name": "direction",
-            "type": "'horizontal' | 'vertical'",
+            "type": "'vertical' | 'horizontal'",
             "required": false,
             "default": "'horizontal'",
             "description": "Layout direction"
@@ -5953,6 +6051,18 @@
             "required": false,
             "description": "Additional CSS class"
           },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "onResizeCommit",
+            "type": "(sizes: Record<string, number>) => void",
+            "required": false,
+            "description": "Fires once when a drag or keyboard resize settles, mapping fixed-panel ids to their committed px sizes — the persistence hook (write it back into a store or Control)"
+          },
           {
             "name": "SplitterGroup · SplitterPanel · SplitterHandle",
             "type": "aliases",
@@ -5965,16 +6075,60 @@
             "name": "className",
             "type": "string",
             "required": false,
-            "description": ""
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "...rest",
+            "type": "div attributes",
+            "required": false,
+            "description": "role=separator with aria-orientation/valuenow is built in; arrow keys resize in 16px steps, Enter or double-click resets the adjacent panel to its defaultSize, and the hit area widens to 44px on coarse pointers"
           }
         ],
         "ResizablePanelProps": [
+          {
+            "name": "id",
+            "type": "string",
+            "required": true,
+            "description": "Stable panel identity — keys the sizes map reported by onResizeCommit; keep it stable across renders for persistence"
+          },
           {
             "name": "defaultSize",
             "type": "number",
             "required": false,
-            "default": "50",
-            "description": "Default size as percentage"
+            "description": "Initial size in px. Omit to make the panel flexible (it absorbs the remaining space); changing this prop after a resize re-pins the panel outside gestures"
+          },
+          {
+            "name": "minSize",
+            "type": "number",
+            "required": false,
+            "default": "—",
+            "description": "Clamp in px enforced by both pointer drags and keyboard steps"
+          },
+          {
+            "name": "maxSize",
+            "type": "number",
+            "required": false,
+            "default": "—",
+            "description": "Clamp in px enforced by both pointer drags and keyboard steps"
+          },
+          {
+            "name": "collapsible",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Enables collapse semantics: the panel collapses to zero width/height and its handle becomes a keyboard-reachable expander"
+          },
+          {
+            "name": "collapsed",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": "Controlled/uncontrolled collapsed state — survives breakpoint flips (desktop dock ⇄ mobile overlay) as one source of truth"
+          },
+          {
+            "name": "onCollapsedChange",
+            "type": "(collapsed: boolean) => void",
+            "required": false,
+            "description": "Notifies on collapse toggles (handle expander, resets crossing the threshold)"
           },
           {
             "name": "children",
@@ -6897,6 +7051,52 @@
         ]
       }
     },
+    "Sparkline": {
+      "cssFamily": "sparkline",
+      "importStatement": "import { Sparkline, sparklineToneStrokes, sparklineToneFills } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/sparkline.css';",
+      "peerDeps": [],
+      "description": "Inline-SVG mini trend chart (line/area variants, tone colors); stateless, recharts-free and RSC-safe.",
+      "props": {
+        "SparklineProps": [
+          {
+            "name": "data",
+            "type": "readonly number[]",
+            "required": true,
+            "description": ""
+          },
+          {
+            "name": "width",
+            "type": "number",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "variant",
+            "type": "'area' | 'line'",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "tone",
+            "type": "'info' | 'success' | 'warning' | 'danger' | 'primary'",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": ""
+          }
+        ]
+      }
+    },
     "Spinner": {
       "cssFamily": "spinner",
       "importStatement": "import { Spinner } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/spinner.css';",
@@ -6992,6 +7192,67 @@
         ]
       }
     },
+    "StatusBar": {
+      "cssFamily": "status-bar",
+      "importStatement": "import { StatusBar, StatusItem } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/status-bar.css';",
+      "peerDeps": [],
+      "description": "VSCode-style status strip (`footer`): `left`/`right` groups, selectable `StatusItem`s, `priority` items survive the mobile breakpoint.",
+      "props": {
+        "StatusBarProps": [
+          {
+            "name": "left",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Left-aligned items (branch, problems, cursor position…)"
+          },
+          {
+            "name": "right",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Right-aligned items (language, encoding, sync state…)"
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "...rest",
+            "type": "footer attributes",
+            "required": false,
+            "description": "Renders a footer landmark — pass aria-label via rest"
+          }
+        ],
+        "StatusItemProps": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Item content"
+          },
+          {
+            "name": "priority",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Priority items survive the ≤768px breakpoint (non-priority items are hidden there)"
+          },
+          {
+            "name": "onSelect",
+            "type": "() => void",
+            "required": false,
+            "description": "Presence switches the item to a button; omit for plain text"
+          },
+          {
+            "name": "...rest",
+            "type": "span | button attributes",
+            "required": false,
+            "description": "Native props forwarded to the rendered element"
+          }
+        ]
+      }
+    },
     "StepTimeline": {
       "cssFamily": "step-timeline",
       "importStatement": "import { StepTimeline, StepTimelineItem } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/step-timeline.css';",
@@ -7277,6 +7538,79 @@
         ]
       }
     },
+    "TabBar": {
+      "cssFamily": "tab-bar",
+      "importStatement": "import { TabBar, TabBarItem } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tab-bar.css';",
+      "peerDeps": [],
+      "description": "Mobile bottom navigation (the ActivityRail viewport peer): 56px safe-area strip, icon+label items, badge, `onSelect`/`onReselect` semantics.",
+      "props": {
+        "TabBarItemProps": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Item icon (above the label)"
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "required": true,
+            "description": "Item name — rendered under the icon and used as the accessible name"
+          },
+          {
+            "name": "badge",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Overlay badge (usually <Badge/>)"
+          },
+          {
+            "name": "active",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Marks the current view: aria-current + the 2px top indicator"
+          },
+          {
+            "name": "onSelect",
+            "type": "() => void",
+            "required": false,
+            "description": "Fires when a non-active item is tapped"
+          },
+          {
+            "name": "onReselect",
+            "type": "() => void",
+            "required": false,
+            "description": "Fires when the already-active item is tapped again — the 'tap-again-to-dismiss/back-to-root' affordance"
+          },
+          {
+            "name": "...rest",
+            "type": "button attributes",
+            "required": false,
+            "description": "Native button props (type=button is built in)"
+          }
+        ],
+        "TabBarProps": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "TabBarItem elements (horizontally distributed; safe-area aware)"
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "...rest",
+            "type": "nav attributes",
+            "required": false,
+            "description": "Renders a nav landmark — pass aria-label via rest. Positioning (fixed) is left to the Workbench or the consumer"
+          }
+        ]
+      }
+    },
     "Table": {
       "cssFamily": "table",
       "importStatement": "import { Table, TableHead, TableBody, TableRow, TableCell } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/table.css';",
@@ -7377,21 +7711,59 @@
     },
     "Tabs": {
       "cssFamily": "tabs",
-      "importStatement": "import { Tabs, TabList, Tab, TabPanel } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tabs.css';",
+      "importStatement": "import { Tabs, TabList, Tab, TabPanel, SortableTabList } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/tabs.css';",
       "peerDeps": [],
       "description": "Tab panel switcher with controllable active tab (`TabList`, `Tab`, `TabPanel`).",
       "props": {
+        "SortableTabListProps": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Tab elements (drag reordering via dnd-kit; keyboard lift via Space, drop via Enter, cancel via Escape). Note: the ⋯ overflow menu is not rendered in the sortable variant — keep the strip scrollable instead"
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "onReorder",
+            "type": "(nextOrder: number[]) => void",
+            "required": false,
+            "description": "Reports the new index order when a drag or keyboard sort settles — re-rendering the tabs is the owner's job"
+          }
+        ],
         "TabListProps": [
           {
             "name": "className",
             "type": "string",
             "required": false,
+            "description": "Additional CSS class"
+          },
+          {
+            "name": "listRef",
+            "type": "RefObject<HTMLDivElement | null>",
+            "required": false,
             "description": ""
           },
+          {
+            "name": "overflowLabel",
+            "type": "string",
+            "required": false,
+            "description": "Overrides the ⋯ overflow button's accessible label (default from the tabs locale pack: More tabs)"
+          },
           {
             "name": "children",
             "type": "ReactNode",
             "required": true,
+            "description": "Tab elements; overflowing tabs stay reachable through the ⋯ menu, and the strip scrolls horizontally as the fallback"
+          },
+          {
+            "name": "tabMetas",
+            "type": "TabMeta[]",
+            "required": false,
             "description": ""
           }
         ],
@@ -7422,6 +7794,43 @@
             "required": true,
             "description": "Unique value identifying this tab"
           },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Leading icon slot (aria-hidden — decorative)"
+          },
+          {
+            "name": "status",
+            "type": "TabStatus",
+            "required": false,
+            "description": "Status dot: dirty=neutral, error=danger, syncing=primary; the SR status word comes from the tabs locale pack unless statusLabel overrides it"
+          },
+          {
+            "name": "statusLabel",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Overrides the status word appended to the accessible name (the i18n hook for SR users)"
+          },
+          {
+            "name": "closable",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Renders a close × (aria-label from the tabs locale pack, overridable via closeLabel); clicking or pressing Delete closes — unmounting the tab is the owner's job via onClose"
+          },
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "required": false,
+            "description": "Overrides the close button's accessible label"
+          },
+          {
+            "name": "onClose",
+            "type": "(event: MouseEvent<HTMLSpanElement, MouseEvent> | KeyboardEvent<HTMLDivElement>) => void",
+            "required": false,
+            "description": "Close notification — pure notification, the controlled tabs array is the owner's to mutate"
+          },
           {
             "name": "className",
             "type": "string",
@@ -8407,7 +8816,7 @@
         "ToolbarProps": [
           {
             "name": "orientation",
-            "type": "'horizontal' | 'vertical'",
+            "type": "'vertical' | 'horizontal'",
             "required": false,
             "description": ""
           },
@@ -9671,6 +10080,18 @@
             "default": "5",
             "description": "Extra items to render outside viewport"
           },
+          {
+            "name": "onEndReached",
+            "type": "() => void",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "endReachedThreshold",
+            "type": "number",
+            "required": false,
+            "description": ""
+          },
           {
             "name": "reverse",
             "type": "boolean",
@@ -9761,6 +10182,130 @@
           }
         ]
       }
+    },
+    "Workbench": {
+      "cssFamily": "workbench",
+      "importStatement": "import { Workbench } from 'haze-ui';\nimport 'haze-ui/css/tokens.css';\nimport 'haze-ui/css/workbench.css';",
+      "peerDeps": [],
+      "description": "IDE-style application frame (`100dvh`): activityBar/sidebar/auxiliaryBar/panel/statusBar/tabBar slots with px-resizable collapsible regions and a maximizable bottom panel; below 768px sides become overlays and the tabBar takes over.",
+      "props": {
+        "WorkbenchProps": [
+          {
+            "name": "activityBar",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Left icon rail slot (usually <ActivityRail/>) — hidden below 768px where the tabBar takes over"
+          },
+          {
+            "name": "activityBarPosition",
+            "type": "ControlOrValue<'top' | 'bottom' | 'side'>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "sidebar",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Primary side region (explorer, search…); docked+resizable on desktop, a scrimmed overlay on mobile"
+          },
+          {
+            "name": "auxiliaryBar",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Secondary side region (inspector) docked right; also overlay below 768px"
+          },
+          {
+            "name": "panel",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Bottom panel region (terminal/output/problems); docked+resizable on desktop, hidden on mobile — surface it as a view there"
+          },
+          {
+            "name": "statusBar",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Status strip slot (usually <StatusBar/>)"
+          },
+          {
+            "name": "tabBar",
+            "type": "ReactNode",
+            "required": false,
+            "description": "Mobile bottom navigation slot (usually <TabBar/>); hidden on desktop"
+          },
+          {
+            "name": "sidebarWidth",
+            "type": "ControlOrValue<number>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "sidebarCollapsed",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "mobileSidebarOpen",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "auxiliaryBarWidth",
+            "type": "ControlOrValue<number>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "auxiliaryBarCollapsed",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "panelHeight",
+            "type": "ControlOrValue<number>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "panelCollapsed",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": ""
+          },
+          {
+            "name": "panelMaximized",
+            "type": "ControlOrValue<boolean>",
+            "required": false,
+            "description": "Maximizes the bottom panel over the main area (VSCode ctrl+J style); reversible through the same Control"
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "required": true,
+            "description": "Main editor area — compose freely (Tabs + TabPanel, anything)"
+          },
+          {
+            "name": "sidebarWidth / auxiliaryBarWidth / panelHeight",
+            "type": "Control<number> | number",
+            "required": false,
+            "description": "Region sizes in px — plain props double as defaults after a resize (commit via the internal group's onResizeCommit semantics)"
+          },
+          {
+            "name": "sidebarCollapsed / auxiliaryBarCollapsed / panelCollapsed",
+            "type": "Control<boolean> | boolean",
+            "required": false,
+            "description": "Region visibility — one source of truth across breakpoints: docked collapse on desktop reads as the overlay being closed on mobile"
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "required": false,
+            "description": "Additional CSS class"
+          }
+        ]
+      }
     }
   },
   "tokens": [