@ahrowe/ui 0.49.0 → 0.51.0

package/docs/TabHeader.md

@@ -1,18 +1,18 @@
 # TabHeader
 
-**When to use:** A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages. Each tab carries an icon plus an optional title and subtitle.
+**When to use:** A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages. Each tab carries an icon plus an optional title, subtitle and end content such as a badge.
 
-**Keywords:** tabs navigation, tab bar
+**Keywords:** tabs navigation, tab bar, pill, counter
 
 **Import:** `import { TabHeader } from '@ahrowe/ui'`
 
-**Mobile behaviour:** On narrow screens (≤ 640px) only the active tab keeps its title and subtitle; every other tab collapses to just its icon.
+**Mobile behaviour:** On narrow screens (≤ 640px) only the active tab keeps its title and subtitle; every other tab collapses to its icon and `endContent`.
 
 ```tsx
 import { useState } from 'react';
-import { TabHeader } from '@ahrowe/ui';
+import { TabHeader, Badge, ThemeColor } from '@ahrowe/ui';
 import type { TabHeaderTab } from '@ahrowe/ui';
-import { faUser, faBell, faGear } from '@fortawesome/free-solid-svg-icons';
+import { faUser, faBell, faGear, faInbox, faAt } from '@fortawesome/free-solid-svg-icons';
 
 const TABS: TabHeaderTab[] = [
   { id: 'profile', icon: faUser, title: 'Profile', subtitle: 'Your details' },
@@ -32,6 +32,16 @@ function Example() {
   onChange={setTab}
 />
 
+// A count next to the title, still shown when a narrow screen collapses the tab
+<TabHeader
+  tabs={[
+    { id: 'inbox', icon: faInbox, title: 'Inbox', endContent: <Badge count={12} /> },
+    { id: 'mentions', icon: faAt, title: 'Mentions', endContent: <Badge count={3} color={ThemeColor.Error} /> },
+  ]}
+  currentTab={tab}
+  onChange={setTab}
+/>
+
 // Disabled tab — dimmed and not selectable
 <TabHeader
   tabs={[
@@ -57,8 +67,9 @@ function Example() {
 |-------|------|-------------|
 | `id` | `string` | Unique identifier, matched against `currentTab` |
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element (always visible, incl. mobile) |
-| `title` | `string` | Optional title next to the icon |
-| `subtitle` | `string` | Optional subtitle beneath the title |
+| `title` | `ReactNode` | Optional title next to the icon |
+| `subtitle` | `ReactNode` | Optional subtitle beneath the title |
+| `endContent` | `ReactNode` | After the labels. Stays visible when a narrow screen collapses the tab, so keep it small: a `Badge`, a dot |
 | `disabled` | `boolean` | Dim the tab and prevent selection |
 
-**Slots:** `root` `tab` `icon` `labels` `title` `subtitle`
+**Slots:** `root` `tab` `icon` `labels` `title` `subtitle` `endContent`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",