@zvoove/unity-ui 2.41.0 → 2.43.0

package/dist/bin/cli.mjs

@@ -342,6 +342,36 @@ function generateRulesContent() {
 - **Always verify props before using them**: Before passing any prop to a Unity UI component, confirm it exists in the component's TypeScript type (e.g. \`ButtonProps\`, \`GridItemProps\`). Do NOT assume a prop exists because it exists on a similar component or seems logical. When in doubt, read the type definition or run a grep. Known traps: \`Button\` has no \`iconPosition\` prop; \`Grid.Item\` has no \`height\` prop (only \`Grid\` does)
 - **No markdown tables in MDX files**: Storybook uses MDX2/3 which does NOT support GitHub Flavored Markdown tables. Never use \`| col | col |\` pipe-table syntax in \`.mdx\` files \u2014 it will not render. Use HTML \`<table>\` elements instead. Markdown tables are fine in \`.md\` files (rules, profiles, skills) since those are only read by AI agents, not rendered by Storybook
 
+## Storybook MCP
+
+Unity UI ships a Storybook MCP server that exposes live component documentation,
+story previews, and test tools. Both profiles (Designer and Developer) rely on it.
+
+### Prerequisites
+
+1. **Storybook must be running** \u2014 start it with \`pnpm storybook\` (serves on \`localhost:6006\`).
+2. **The MCP server must be registered in your IDE.** The repo includes a \`.mcp.json\`
+   that some editors pick up automatically. If your editor does not, add the server
+   manually:
+
+   | Setting | Value                       |
+   | ------- | --------------------------- |
+   | Name    | \`unity-ui-sb-mcp\`           |
+   | Type    | \`http\`                      |
+   | URL     | \`http://localhost:6006/mcp\` |
+
+   In **Cursor**: Settings \u2192 MCP \u2192 "+ Add new MCP server" and enter the values above.
+
+### Available Tools
+
+| Tool                               | Purpose                                                              |
+| ---------------------------------- | -------------------------------------------------------------------- |
+| \`list-all-documentation\`           | List all documented components and their IDs                         |
+| \`get-documentation\`                | Get props, examples, and usage for a specific component              |
+| \`get-documentation-for-story\`      | Get docs for a specific story variant                                |
+| \`get-storybook-story-instructions\` | Get framework-specific story patterns and conventions                |
+| \`preview-stories\`                  | Render story previews \u2014 always share the returned URLs with the user |
+
 ## Skill Routing
 
 Before building UI with Unity UI, load the relevant skill for your task:
@@ -404,6 +434,7 @@ Load the matching skill for full props, examples, and rules:
 | Switch | \`unity-ui-switch\` |
 | Table | \`unity-ui-table\` |
 | Tabs | \`unity-ui-tabs\` |
+| TabStepper | \`unity-ui-tab-stepper\` |
 | Tag | \`unity-ui-tag\` |
 | TextField | \`unity-ui-text-field\` |
 | Textarea | \`unity-ui-textarea\` |
@@ -431,7 +462,8 @@ When a component is requested by a name not listed above, resolve it using this
 | Header, AppBar, Navbar, Navigation bar, Toolbar, App header, Top navigation | **TopBar** |
 | Sidebar, Side menu, Nav, Navigation drawer, NavBar, Left nav | **SideNavigation** |
 | Spinner, Loader, Loading indicator, Loading spinner, Busy indicator | **ProgressIndicator** |
-| Stepper, Wizard steps, Progress steps, Status steps, Step indicator | **StatusStepper** |
+| Stepper, Progress steps, Status steps, Step indicator | **StatusStepper** |
+| Wizard steps, Guided step tabs, Interactive step tabs | **TabStepper** |
 | Context menu, Action menu, Kebab menu, More menu, Dropdown menu, Options menu | **PopUpMenu** |
 | Alert (inline/persistent), Warning banner, Info banner, Notice, Callout, Inline alert | **InfoBox** |
 | Collapsible, Collapse, CollapsePanel, Disclosure (single item) | **Expandable** |
@@ -625,6 +657,7 @@ var SHADCN_MAP = {
     url: "https://ui.shadcn.com/docs/components/data-table"
   },
   Tabs: { name: "Tabs", url: "https://ui.shadcn.com/docs/components/tabs" },
+  TabStepper: null,
   Tag: {
     name: "Badge",
     url: "https://ui.shadcn.com/docs/components/badge",
@@ -719,6 +752,11 @@ var MUI_MAP = {
     note: "For advanced features use MUI X DataGrid (@mui/x-data-grid)."
   },
   Tabs: { name: "Tabs", url: `${MUI_BASE}tabs/` },
+  TabStepper: {
+    name: "Stepper",
+    url: `${MUI_BASE}stepper/`,
+    note: "TabStepper is interactive tab navigation with step statuses and subtitles."
+  },
   Tag: {
     name: "Chip",
     url: `${MUI_BASE}chip/`,
@@ -784,6 +822,7 @@ var STORYBOOK_MAP = {
   Switch: "Forms/Switch",
   Table: "Components/Table",
   Tabs: "Navigation/Tabs",
+  TabStepper: "Navigation/TabStepper",
   Tag: "Components/Tag",
   TextField: "Forms/TextField",
   Textarea: "Forms/Textarea",
@@ -830,6 +869,7 @@ var CATEGORIES = {
   StatusStepper: "data-display",
   CodeBlock: "data-display",
   Tabs: "navigation",
+  TabStepper: "navigation",
   Breadcrumbs: "navigation",
   SideNavigation: "navigation",
   Pagination: "navigation",

package/dist/bin/generate-skills.mjs

@@ -211,6 +211,7 @@ var SHADCN_MAP = {
     url: "https://ui.shadcn.com/docs/components/data-table"
   },
   Tabs: { name: "Tabs", url: "https://ui.shadcn.com/docs/components/tabs" },
+  TabStepper: null,
   Tag: {
     name: "Badge",
     url: "https://ui.shadcn.com/docs/components/badge",
@@ -305,6 +306,11 @@ var MUI_MAP = {
     note: "For advanced features use MUI X DataGrid (@mui/x-data-grid)."
   },
   Tabs: { name: "Tabs", url: `${MUI_BASE}tabs/` },
+  TabStepper: {
+    name: "Stepper",
+    url: `${MUI_BASE}stepper/`,
+    note: "TabStepper is interactive tab navigation with step statuses and subtitles."
+  },
   Tag: {
     name: "Chip",
     url: `${MUI_BASE}chip/`,
@@ -370,6 +376,7 @@ var STORYBOOK_MAP = {
   Switch: "Forms/Switch",
   Table: "Components/Table",
   Tabs: "Navigation/Tabs",
+  TabStepper: "Navigation/TabStepper",
   Tag: "Components/Tag",
   TextField: "Forms/TextField",
   Textarea: "Forms/Textarea",
@@ -416,6 +423,7 @@ var CATEGORIES = {
   StatusStepper: "data-display",
   CodeBlock: "data-display",
   Tabs: "navigation",
+  TabStepper: "navigation",
   Breadcrumbs: "navigation",
   SideNavigation: "navigation",
   Pagination: "navigation",

package/dist/llms.txt

@@ -283,6 +283,7 @@ import { Typography } from '@zvoove/unity-ui';
   textAlign="left"             // 'left' | 'center' | 'right'
   textTransform="uppercase"    // 'uppercase' | 'lowercase' | 'capitalize'
   truncate={2}                 // number - max lines before truncation
+  truncatedBy="word"           // 'word' | 'letter' (default: 'word')
   hyphenate={true}             // boolean (default: true)
   wrap={true}                  // boolean
 >
@@ -658,7 +659,7 @@ PopUpMenuItem special props:
 ## DATA DISPLAY COMPONENTS
 
 ### Table
-Data table with sorting, expandable rows, and actions.
+Data table with sorting, expandable rows, actions, section rows, and clickable rows.
 ```tsx
 import { Table } from '@zvoove/unity-ui';
 
@@ -670,8 +671,9 @@ const columns = [
 
 <Table
   columns={columns}            // TableColumnProps[] (required)
-  data={[                      // TableRowData[] (required)
-    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  data={[                      // TableBodyRow[] (required)
+    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { type: 'section', label: 'Diese Woche' },
   ]}
   title="Users"                // string
   subtitle="All active users"  // string
@@ -684,8 +686,20 @@ const columns = [
   expandedRows={['1']}         // string[]
   emptyState="No data found"   // ReactNode
   footer={footerContent}       // ReactNode
+  onRowClick={(event, row, index) => {}} // data-row callback
+  linkComponent={Link}         // ElementType, defaults to 'a'
+  getRowLinkProps={(_, index) => ({ href: `/users/${index}` })}
+  rowAriaLabel="Open row"      // accessible name fallback
 />
 ```
+Section rows use `{ type: 'section', label, id? }` and span all visible columns.
+Data rows can provide `onClick`, `href`, `to`, and `linkProps`. Use `href` with
+the default anchor; use `to` with a custom router `linkComponent`. For links
+that need additional router props, use `getRowLinkProps`. The `index` passed to
+`onRowClick` and `getRowLinkProps` is the position in `data`, including section
+rows. `rowAriaLabel` supplies a fallback accessible name when no non-empty
+string cell is available. The row keys `type`, `onClick`, `href`, `to`, `target`,
+`rel`, `linkProps`, and `expandableRow` are reserved for Table behavior.
 
 ### Tag
 Colored label/badge for categorization.
@@ -945,6 +959,31 @@ import { Tabs } from '@zvoove/unity-ui';
 />
 ```
 
+### TabStepper
+Interactive step navigation with status icons, subtitles, overflow scrolling, and optional panels.
+```tsx
+import { TabStepper } from '@zvoove/unity-ui';
+
+<TabStepper
+  items={[
+    { id: 'work-app', title: 'Work App', subtitle: 'Abgeschlossen', status: 'done' },
+    { id: 'master-data', title: 'Stammdaten', subtitle: '3 von 8 Feldern' },
+    { id: 'contract', title: 'Vertrag', subtitle: 'Nicht gestartet' },
+  ]}
+  activeItem="master-data"  // string (required)
+  onChange={handleChange}   // (item: TabStepperItem) => void
+  itemsAlignment="left"     // 'left' | 'center' | 'right' | 'between' | 'around' | 'evenly'
+  hideBorder={false}        // boolean
+  isSticky={true}           // boolean
+  linkComponent={Link}      // React.ElementType (default: 'button')
+  panels={[                  // TabStepperPanel[]
+    { id: 'master-data', children: <div>Stammdaten Inhalt</div> },
+  ]}
+/>
+```
+
+`TabStepperItem` accepts `id`, `title`, optional `subtitle`, optional `stepNumber`, and `status` (`'idle' | 'done' | 'failed' | 'warning'`). Idle steps show their number; other statuses show a green check-circle, red cancel-circle, or warning icon. Titles and subtitles stay on one line; truncated subtitles expose their full value in a tooltip. Set `linkComponent` to render anchors or a custom link component, with link props such as `href` on each item. Use `TabStepper` for interactive guided flows and `StatusStepper` for display-only progress indicators.
+
 ### Breadcrumbs
 Navigation breadcrumb trail. First item renders as an icon (customizable via `homeIcon`).
 ```tsx