@ahrowe/ui 0.1.19 → 0.1.21

package/docs/TabHeader.md

@@ -0,0 +1,62 @@
+# 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.
+
+**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.
+
+```tsx
+import { useState } from 'react';
+import { TabHeader } from '@ahrowe/ui';
+import type { TabHeaderTab } from '@ahrowe/ui';
+import { faUser, faBell, faGear } from '@fortawesome/free-solid-svg-icons';
+
+const TABS: TabHeaderTab[] = [
+  { id: 'profile', icon: faUser, title: 'Profile', subtitle: 'Your details' },
+  { id: 'notifications', icon: faBell, title: 'Notifications', subtitle: 'Email & push' },
+  { id: 'settings', icon: faGear, title: 'Settings' },        // title only
+];
+
+function Example() {
+  const [tab, setTab] = useState('profile');
+  return <TabHeader tabs={TABS} currentTab={tab} onChange={setTab} />;
+}
+
+// Icon-only tabs
+<TabHeader
+  tabs={[{ id: 'a', icon: faUser }, { id: 'b', icon: faGear }]}
+  currentTab={tab}
+  onChange={setTab}
+/>
+
+// Disabled tab — dimmed and not selectable
+<TabHeader
+  tabs={[
+    { id: 'a', icon: faUser, title: 'Profile' },
+    { id: 'b', icon: faGear, title: 'Billing', disabled: true },
+  ]}
+  currentTab={tab}
+  onChange={setTab}
+/>
+```
+
+**TabHeaderProps:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `tabs` | `TabHeaderTab[]` | The tabs to render, in order |
+| `currentTab` | `string` | `id` of the selected tab |
+| `onChange` | `(id: string) => void` | Called with the tab `id` when a different, enabled tab is clicked |
+
+**TabHeaderTab:**
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string` | Unique identifier, matched against `currentTab` |
+| `icon` | `IconDefinition` | FontAwesome icon (always visible, incl. mobile) |
+| `title` | `string` | Optional title next to the icon |
+| `subtitle` | `string` | Optional subtitle beneath the title |
+| `disabled` | `boolean` | Dim the tab and prevent selection |
+
+**Slots:** `root` `tab` `icon` `labels` `title` `subtitle`

package/docs/VirtualList.md

@@ -90,7 +90,8 @@ const columns: VirtualListColumn<User>[] = [
 | `height` | `number \| string` | Scroll viewport height (default `'100%'`) |
 | `estimatedRowHeight` | `number` | Estimated row height before measurement (default `40`) |
 | `overscan` | `number` | Extra rows rendered outside the viewport (default `3`) |
-| `rowGap` | `number` | Gap in px between rows (default `0`) |
+| `rowGap` | `number \| string` | Gap between rows — number = px; string = any CSS length (`'1em'`, `'var(--spacing-s)'`). Default `0` |
+| `rowPadding` | `number \| string` | Padding on every row — number = px; string = any CSS padding value (`'8px 12px'`, `'var(--spacing-s)'`) |
 | `showDivider` | `boolean` | Row divider lines (default `true`) |
 | `getItemKey` | `(item, index) => string \| number` | Stable key per item |
 | `selectedKey` | `string \| number \| null` | Controlled single-select key |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "publishConfig": {
     "access": "public"
   },