@ahrowe/ui 0.35.0 → 0.37.0

package/docs/Rating.md

@@ -2,6 +2,8 @@
 
 **When to use:** A star rating input or display, for review scores, feedback prompts, and quality indicators. Use `readOnly` to just show an existing rating (e.g. a product's average score) rather than collect one.
 
+**Keywords:** stars, ranking, thumbs up
+
 **Import:** `import { Rating } from '@ahrowe/ui'`
 **Types:** `import type { RatingProps } from '@ahrowe/ui'`
 

package/docs/Ripple.md

@@ -6,6 +6,9 @@
 
 **Import:** `import { Ripple } from '@ahrowe/ui'`
 
+A click on a control inside the rippling element does not ripple: the ripple answers for the
+element it wraps, and a field or a button inside it answers for itself.
+
 ```tsx
 import { Ripple } from '@ahrowe/ui';
 

package/docs/RoomViewer.md

@@ -1,13 +1,11 @@
 # RoomViewer
 
-**When to use:** to show a floor plan someone can look at and click, without letting them change it — a building directory, a booking screen, a dashboard beside a room list.
+**When to use:** Shows a floor plan someone can look at and click, without letting them change it — a building directory, a booking screen, a dashboard beside a room list.
 
 **Keywords:** map, site plan, wayfinding, hotspot, clickable regions, blueprint, storey, apartment, read-only
 
-```tsx
-import { RoomViewer } from '@ahrowe/ui';
-import type { RoomViewerProps, RoomViewerHandle } from '@ahrowe/ui';
-```
+**Import:** `import { RoomViewer } from '@ahrowe/ui'`  
+**Types:** `import type { RoomViewerProps, RoomViewerHandle } from '@ahrowe/ui'`
 
 It renders a **`FloorPlan`** — the same document [RoomDrawer](./RoomDrawer.md) edits and downloads, drawn on the same canvas — so the two can never drift apart. See [FloorPlan](./FloorPlan.md) for the model.
 

package/docs/ScrollFade.md

@@ -0,0 +1,77 @@
+# ScrollFade
+
+**When to use:** A scrollable box whose content dissolves at the edge it is scrolling past, instead of being cut off mid-line against it. Use it for a bounded list, a long block of text, a chip or tab row that scrolls sideways — anywhere the hard edge of a scroll container makes content look damaged rather than continued. For a whole page section that pins on scroll use [Sticky](Sticky.md); for thousands of rows use [VirtualList](VirtualList.md).
+
+**Keywords:** scroll shadow, scroll indicator, overflow, edge, gradient, mask, cut off, more content, scrollable list, overscroll hint
+
+**Import:** `import { ScrollFade, ScrollFadeAxis } from '@ahrowe/ui'`
+**Types:** `import type { ScrollFadeProps } from '@ahrowe/ui'`
+
+`ScrollFade` **is** the scroll container, not a wrapper around one. Give it a bound — a `maxHeight`, a `height`, or a flex parent that constrains it — or it grows to its content and never scrolls.
+
+```tsx
+import { ScrollFade, ScrollFadeAxis } from '@ahrowe/ui';
+
+// A bounded list: the bottom fades until you reach the end, the top once you have left it
+<ScrollFade style={{ maxHeight: 280 }}>
+  {items.map((item) => (
+    <Row key={item.id} item={item} />
+  ))}
+</ScrollFade>
+
+// Sideways, for a chip or tab row
+<ScrollFade axis={ScrollFadeAxis.Horizontal} style={{ maxWidth: '100%' }}>
+  <ChipContainer inline>
+    {tags.map((tag) => (
+      <Chip key={tag} text={tag} />
+    ))}
+  </ChipContainer>
+</ScrollFade>
+
+// A longer fade, for larger text
+<ScrollFade fadeLength='48px' style={{ maxHeight: 400 }}>
+  <Article />
+</ScrollFade>
+
+// Both ends faded at all times, no measuring — for a strip whose own padding already
+// holds its first and last item clear of the fade
+<ScrollFade axis={ScrollFadeAxis.Horizontal} isAlwaysFaded style={{ paddingInline: 24 }}>
+  <Thumbnails />
+</ScrollFade>
+```
+
+**Enums:**
+
+- `ScrollFadeAxis`: `Vertical` (default) | `Horizontal`
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | The scrolling content |
+| `axis` | `ScrollFadeAxis` | Which way it scrolls (default `Vertical`) |
+| `fadeLength` | `string` | How far the fade runs from each edge, any CSS length (default `24px`) |
+| `isAlwaysFaded` | `boolean` | Fade both ends whether or not content is hidden there, which skips the measuring entirely (default `false`). Pair it with padding equal to `fadeLength`, so the first and last item start out clear of the fade and only dissolve once scrolled into it — that is how `Carousel` fades its dot strip |
+| `ref` | `Ref<HTMLDivElement>` | The scrolling element itself, for `scrollTo` and friends |
+
+Each end is measured independently, so the fade says which way there is more to go: only the bottom at the top of a list, only the top at the end of it, both in between, and neither on content that fits. Nothing fades while it does not scroll, so a `ScrollFade` around short content looks exactly like a plain `div`. Each end eases in and out over 200ms rather than switching, so reaching an edge doesn't snap. Nothing fades on an axis that cannot scroll: override the overflow to `hidden` or `clip` and the fade goes quiet, since there would be no way to reach what it was hiding.
+
+**How it fades:** a `mask-image`, not a gradient overlay. An overlay has to be painted in the container's own background colour, which a reusable component cannot know; a mask works over a card, a sheet or a photo alike.
+
+The mask covers the whole element, which has two consequences worth knowing. Its own `background`, `border` and `border-radius` fade along with the content, so a bordered box should put the border on a wrapper around `ScrollFade` rather than on `ScrollFade` itself:
+
+```tsx
+<div className="framed">
+  <ScrollFade style={{ maxHeight: 240 }}>{rows}</ScrollFade>
+</div>
+```
+
+And the scrollbar fades with everything else. That is usually invisible with overlay scrollbars; hide the scrollbar on a strip where it shows.
+
+Under `prefers-contrast: more` the fade switches itself off and the edge goes hard again, since fading text costs contrast at exactly the edge someone may be reading. `fadeLength='0px'` turns it off outright.
+
+In a browser without `mask-image` the fade simply does not appear and the box scrolls normally. In one without `@property` it appears and disappears instantly instead of easing, since an unregistered custom property has no type for the browser to interpolate.
+
+**Theming:** `--scroll-fade-length` sets the same distance as the `fadeLength` prop, and can be set theme-wide via `ThemeProvider` or on any ancestor. The prop wins where both are set. It reaches `ScrollFade` only: `Modal` and `Carousel` fade their own scroll ports from `--modal-scroll-fade` and from a length tuned to the dot strip, and neither hands its length down to a `ScrollFade` nested inside it.
+
+**Slots:** none — `ScrollFade` renders a single element around its children, so `className`/`style` on the root is the whole surface.

package/docs/ScrollbarProvider.md

@@ -2,6 +2,8 @@
 
 **When to use:** Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme.
 
+**Keywords:** overflow, scroll area, thin
+
 **Import:** `import { ScrollbarProvider } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Slider.md

@@ -80,7 +80,7 @@ const [value, setValue] = useState(40);
 | `marks` | `SliderMark[]` | Tick marks, `{ value, label? }` |
 | `showValue` | `boolean` | Show the current value in a bubble above the thumb |
 | `formatValue` | `(value: number) => ReactNode` | Format the bubble text and `aria-valuetext` |
-| `size` | `string` | Thumb diameter, any CSS length (default `'18px'`) |
+| `size` | `string` | Thumb diameter, any CSS length. Defaults to `1.125em` of `--default-font-size`, i.e. 18px at a 16px base |
 | `aria-label` | `string` | Accessible label |
 
 **Accessibility:** renders `role="slider"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow` (and `aria-valuetext` when `formatValue` returns a string/number). Give it an `aria-label` (or wire up your own visible label). Respects `prefers-reduced-motion` (no thumb/fill transition).

package/docs/Sticky.md

@@ -2,7 +2,7 @@
 
 **When to use:** Pin a piece of content to the top of the viewport once the page scrolls past it — section headers, toolbars, filter bars, table headers. The content sticks while its original position is above the fold and releases the moment that position scrolls back into view. A placeholder preserves the original space, so nothing below jumps when it detaches.
 
-**Keywords:** sticky header, pinned toolbar, scroll container, app shell, scrollable panel
+**Keywords:** sticky header, pinned toolbar, scroll container, app shell, scrollable panel, stop at the end, confine, within a section, unpin, release
 
 **Import:** `import { Sticky } from '@ahrowe/ui'`
 
@@ -36,6 +36,19 @@ const headerRef = useRef<HTMLElement>(null);
   <Content />
 </div>
 
+// Let it go once the section it labels ends, instead of pinning down the page.
+// A toolbar and a header pointed at the same boundary leave together.
+const section = useRef<HTMLDivElement>(null);
+<div ref={section}>
+  <Sticky boundary={section} boundaryInset={120}>
+    <Toolbar />
+  </Sticky>
+  <Sticky boundary={section} boundaryInset={120}>
+    <TableHeader />
+  </Sticky>
+  <Rows />
+</div>
+
 // React to the stuck state (e.g. add a shadow)
 <Sticky onStuckChange={(stuck) => setElevated(stuck)}>
   <Toolbar />
@@ -60,6 +73,12 @@ const headerRef = useRef<HTMLElement>(null);
 
 **`stickToScrollParent`:** by default `Sticky` always pins relative to the browser viewport, which can overlap other fixed/pinned chrome (e.g. an app header) that sits outside the element's own scroll container. Set `stickToScrollParent` to pin relative to the nearest ancestor with its own scrollbar (`overflow-y: auto`/`scroll`/`overlay`) instead — found once on mount by walking up from the root. Falls back to the viewport if no scrollable ancestor is found. Combine with `offsetTop` for extra spacing from that container's top (e.g. its own internal header).
 
+**`boundary`:** without it the content stays pinned for as long as the page scrolls, which is right for an app bar and wrong for anything that labels a section: a table header outlives its table and ends up captioning whatever scrolls under it next. Point `boundary` at the element the content belongs to, and once that element's bottom edge reaches the pinned content, the content is pushed up with it and leaves the screen together with it. This is what native `position: sticky` gets from its containing block, which a `position: fixed` implementation has no equivalent of, and it works whether the pin is relative to the viewport or to a `stickToScrollParent` container.
+
+**A group confined to one boundary leaves as one block.** Several `Sticky` elements stacked on top of each other and pointed at the same boundary are all lifted by the same amount, the largest any of them needs, so they keep their spacing and the lowest one's bottom edge lands on the boundary. Letting each clamp its own bottom edge instead would pile them all onto that edge and slide the lower ones up through the ones above.
+
+**`boundaryInset`** decides how much of the boundary's lower end stays uncovered while the content leaves. At `0` the content rests on the very bottom edge, so the last stretch of the boundary, as tall as the pinned content itself, is hidden underneath it for the whole exit: a table header ends up floating over nothing with its final rows behind it. Set it to how much you want to stay in sight, which for a table header is a few rows, and the content lifts off that much earlier and keeps that gap all the way out.
+
 **Stacking:** every mounted `Sticky` coordinates automatically, no extra markup needed. When more than one is stuck at the same time, a later one (in DOM order) that horizontally overlaps an earlier stuck one pins below it — `offsetTop` plus the overlapping ones' heights — instead of both landing on the same spot. Stickies that don't overlap horizontally (e.g. two half-width ones side by side under a full-width one) land at the same `top`, next to each other, rather than pushing each other down.
 
 **Key props:**
@@ -70,6 +89,8 @@ const headerRef = useRef<HTMLElement>(null);
 | `offsetTop` | `number` | Distance in px from the top of the viewport the content sticks to (default `0`). Ignored if `offsetElement` is set |
 | `offsetElement` | `RefObject<HTMLElement \| null>` | Element to stick below (e.g. a fixed/pinned header outside this library) — its live height is used as the offset instead of a fixed `offsetTop` |
 | `stickToScrollParent` | `boolean` | Stick to the top of the nearest scrollable ancestor instead of the browser viewport (default `false`). Falls back to the viewport if no scrollable ancestor is found |
+| `boundary` | `RefObject<HTMLElement \| null>` | Element the content is confined to. Once its bottom edge reaches the pinned content, the content rides it up and off screen instead of staying pinned over what follows. Several Stickies sharing one leave together |
+| `boundaryInset` | `number` | How much of the boundary's lower end stays uncovered while the content leaves, in px (default `0`). At `0` the last stretch, as tall as the content, is hidden under it for the whole exit. Ignored without `boundary` |
 | `zIndex` | `number` | z-index applied while stuck (default `20`) |
 | `disabled` | `boolean` | Disable sticking — content stays in normal flow |
 | `onStuckChange` | `(isStuck: boolean) => void` | Fired whenever the stuck state flips |

package/docs/Timer.md

@@ -94,7 +94,7 @@ function Example() {
 | `maxSeconds` | `number` | Optional cap on remaining time when adding |
 | `label` | `ReactNode` | Text under the time readout, inside the ring |
 | `formatTime` | `(remainingMs: number) => ReactNode` | Overrides the default `MM:SS` / `H:MM:SS` formatter |
-| `size` | `string` | Ring diameter, any CSS length (default `'160px'`) |
+| `size` | `string` | Ring diameter, any CSS length. Defaults to `10em`, i.e. 160px at a 16px base |
 | `strokeWidth` | `number` | Ring stroke width in px (default `10`) |
 | `counterClockwise` | `boolean` | Depletes counter-clockwise instead of the default clockwise sweep (default `false`) |
 | `urgentThreshold` | `number` | Fraction (0–1) of the original duration at which the urgent colour/pulse kicks in (default `0.1`) |

package/docs/VirtualList.md

@@ -2,7 +2,7 @@
 
 **When to use:** Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM. Supports column definitions, row selection, multi-select, column sorting, column resizing, column visibility toggling, and infinite scroll.
 
-**Keywords:** data table, virtualized table, sort, sorting, order by, ascending, descending, column header click, resize, resizable, drag column edge, column width, autofit
+**Keywords:** data table, virtualized table, sort, sorting, order by, ascending, descending, column header click, resize, resizable, drag column edge, column width, autofit, double scrollbar, nested scroll, window scrolling, spreadsheet, data entry grid, editable grid
 
 **Import:** `import { VirtualList } from '@ahrowe/ui'`  
 **Types:** `import type { VirtualListProps, VirtualListColumn, VirtualListHandle, VirtualListSort } from '@ahrowe/ui'`
@@ -124,7 +124,8 @@ const columns: VirtualListColumn<User>[] = [
 | `items` | `T[]` | Data array (required) |
 | `renderRow` | `(item, index) => ReactNode` | Row render fn — list mode (no columns) |
 | `columns` | `VirtualListColumn<T>[]` | Column definitions — enables table/header mode |
-| `height` | `number \| string` | Scroll viewport height (default `'100%'`) |
+| `height` | `number \| string` | Scroll viewport height (default `'100%'`). Ignored with `scrollParent` |
+| `scrollParent` | `'nearest' \| 'window' \| HTMLElement \| (() => HTMLElement \| null)` | Drop the list's own scrollbar and virtualize against this scrollport instead — see **No scroll of its own** |
 | `estimatedRowHeight` | `number` | Row height assumed before anything has been measured (default `40`). Once rows have been measured, their average is used for the ones that haven't, so this only has to be roughly right |
 | `overscan` | `number` | Extra rows rendered outside the viewport (default `3`) |
 | `rowGap` | `number \| string` | Gap between rows — number = px; string = any CSS length (`'1em'`, `'var(--spacing-s)'`). Default `0` |
@@ -135,6 +136,7 @@ const columns: VirtualListColumn<User>[] = [
 | `selectedKey` | `string \| number \| null` | Controlled single-select key |
 | `onRowClick` | `(item, index) => void` | Row click handler, also fired by `Enter` on the active row |
 | `keyboardNavigation` | `boolean` | Arrow-key navigation over the rows (default `true`). See **Keyboard** |
+| `tabAcrossRows` | `boolean` | Let `Tab` carry on into the next row instead of leaving the list at the end of the current one (default `false`). See **Keyboard** |
 | `multiSelect` | `boolean` | Enable checkbox multi-select column |
 | `selectedKeys` | `Set<string \| number>` | Controlled multi-select keys |
 | `onSelectionChange` | `(keys) => void` | Multi-select change callback |
@@ -241,6 +243,10 @@ Keys are ignored while the focus is inside a cell, so an input, a `Dropdown` or
 
 **Controls inside rows are not tab stops.** The list holds them at `tabindex="-1"` and puts back the ones of the row being used, so `Tab` walks that row and then leaves the list. Without that, every control in every *rendered* row is a stop, the set changes as the list scrolls, and tabbing through a long list drops out of it at an arbitrary row, because the next one isn't in the DOM yet when the browser looks for the next stop. Entering a row happens with `F2`, with `Enter` when the list has no `onRowClick`, or simply by clicking a control. A `tabindex` you set yourself is restored exactly as it was, and an element you already parked at `-1` stays parked.
 
+**`tabAcrossRows` makes `Tab` walk the whole grid**, for rows that are filled in rather than read: from the last field of a row it enters the next row's first field, `Shift+Tab` walks back the same way, and `Tab` out of the last row (or back out of the first) leaves the list as it always did. The list mounts the row it is moving into, so it works across the edge of the rendered window. A row with nothing focusable in it is stepped over, and when nothing past it has anything either, the focus goes back to the list so the next `Tab` leaves. `Tab` on the list's own stop steps into the active row instead of over the whole list, since otherwise nothing inside it would ever be reachable by tabbing.
+
+It is off by default on purpose: for a list that is read, one tab stop plus the arrow keys is what a screen-reader user expects, and a few thousand rows of tab stops is a trap with no way past it. Turn it on for a grid of inputs — invoice lines, a timesheet — where field-by-field entry is the whole interaction. It does not need `keyboardNavigation`: with that off the list takes no stop of its own and `tabAcrossRows` only carries `Tab` across the boundary between two rows.
+
 The row being used also stays mounted while it holds the focus, even once it scrolls out of the window, so scrolling can't drop the focus to the document body. Set `keyboardNavigation={false}` for a list whose rows bring their own key handling, as [Tree](Tree.md) does.
 
 Because `role="list"` is not a composite role, the active row is only announced in table mode. In list mode, pass `ariaRoles={{ container: 'listbox', row: 'option' }}` (or another composite pair) to have it announced there too.
@@ -280,7 +286,8 @@ listRef.current?.scrollToKey(user.id, { align: 'center' });
 | `scrollToIndex` | `(index, options?) => void` | Scroll so the row at `index` is visible. `options`: `{ align?: 'start' \| 'center' \| 'end'; behavior?: ScrollBehavior }`. A jump into rows that have never been rendered re-aims itself as their real heights are measured, so it lands on the row you asked for rather than on estimated arithmetic. Input of your own during the jump cancels it |
 | `scrollToKey` | `(key, options?) => void` | Scroll to the row whose `getItemKey` matches `key` (no-op if not found) |
 | `scrollToTop` | `(options?) => void` | Scroll back to the top |
-| `getScrollElement` | `() => HTMLDivElement \| null` | The underlying scroll container, for advanced use |
+| `getScrollElement` | `() => HTMLElement \| null` | The element that scrolls: the list itself, or the `scrollParent` it was given. `null` for `scrollParent='window'`, where the page scrolls |
+| `remeasure` | `() => void` | Re-read where the list sits in its `scrollParent`. Only needed in that mode, and only when something **above** the list changed height without the list re-rendering — an element that merely moves fires no event of its own |
 | `resetColumnWidths` | `() => void` | Drop every user-set column width, returning the table to the widths its columns declare, and clear them from `persistColumnsKey` storage |
 | `recalculateColumns` | `() => void` | Re-measure `fit` columns on the next layout. Only needed after an out-of-band content change that doesn't flow through a new `items` array or `columns` set — those re-measure automatically, as does content first appearing in a cell |
 
@@ -355,7 +362,40 @@ interface TreeDropTarget {
 
 **Touch:** a press-and-hold of `longPressDelay` lifts a floating copy of the row that follows your finger, with auto-scroll near the list's top and bottom edges. A swipe before the hold completes scrolls the list as normal instead of starting a drag. With `dragHandle`, only a press that starts on the handle arms it, so the rest of the row stays tappable.
 
-**Lazy loading:** `onLoadMore` fires when the user scrolls within `loadMoreThreshold` px of the bottom, **and** repeatedly whenever the rows don't fill the list's viewport. That second trigger matters because a list shorter than its own height can't be scrolled at all, so a first batch smaller than the viewport would otherwise be the last batch ever loaded. The list keeps asking for pages until the content overflows; each row count is asked at most once, so the loop ends as soon as a call appends nothing. Gate the prop on your own "has more" flag to skip even that last probe:
+**No scroll of its own (`scrollParent`):** the list renders at its full height as a plain block in the page flow and virtualizes against a scrollport it does not own. For a long list at the end of a scrolling page, where an inner scrollbar inside the page's own is the thing you are trying to avoid.
+
+```tsx
+// Whatever scrolls around it, found once on mount. The usual answer.
+<VirtualList items={positions} columns={columns} scrollParent='nearest' estimatedRowHeight={48} />
+
+// Or name it: the page, an element, or a getter for a ref that fills later.
+<VirtualList items={positions} columns={columns} scrollParent='window' estimatedRowHeight={48} />
+<VirtualList items={positions} columns={columns} scrollParent={() => shellRef.current} estimatedRowHeight={48} />
+```
+
+`'nearest'` walks up to the first ancestor whose `overflow-y` is `auto`, `scroll`
+or `overlay`, whether or not it currently scrolls, and falls back to the page. A
+wrapper carrying `overflow: auto` as a layout fix is therefore picked ahead of
+the real scrollport, and the list then renders its first window and stops; name
+the element outright where that happens. That is the same ancestor
+[Sticky](Sticky.md) pins to, which is what a sticky header above the list needs:
+the two have to answer to the same scrollport or they come apart on the first
+scroll. It is resolved once and re-read only if that element leaves the DOM,
+because walking the tree reads computed style.
+
+Everything else works as before — the same windowing, the same `scrollToIndex`, the same keyboard model. What changes:
+
+- **`height` no longer applies.** The list is as tall as its rows.
+- **Set `estimatedRowHeight` to the real height** where the rows have one. Row heights are corrected as rows are measured, and here that correction resizes the *page*, so a guess that is wrong by 10px across 2000 rows moves the page's scrollbar under the user's hand. Rows of one fixed height cost nothing: the first measurement is right and the page height never moves again.
+- **The header sticks to that scrollport**, which is the top of the viewport rather than the top of the list. Give the list `--vl-header-top` to clear a fixed app bar: `<VirtualList style={{ '--vl-header-top': '64px' }} … />`.
+- **A frozen column layout wider than the list overflows the page sideways** instead of scrolling inside the list. A container cannot scroll one axis and not the other, and getting the vertical scrollbar back would undo the whole mode. Only reachable with `resizableColumns`.
+- **Call `remeasure()`** when something above the list changes height without the list re-rendering. The list watches the scrollport's own content box, which covers most of it; an element that merely moves fires nothing.
+
+**The list says so when it isn't virtualizing.** A viewport as tall as its own content renders every row, which is what a percentage `height` amounts to inside a parent with no definite height: the scroll container grows to fit the rows instead of clipping them. Nothing looks broken, the page is just slow. Past a hundred rows the list writes a `console.warn` naming that, which is the one failure mode of this component that is otherwise invisible. Passing `height` alongside `scrollParent` warns too, since the list then has no viewport to size.
+
+Only the rendered rows are in the DOM, in this mode as in the other one, so the browser's own find-in-page and print reach the window on screen and not the rest of the list. That is the price of virtualization, and it is the reason to use it only where the row count earns it.
+
+**Lazy loading:** `onLoadMore` fires when the user scrolls within `loadMoreThreshold` px of the bottom, **and** repeatedly whenever the rows don't fill the list's viewport. That second trigger matters because a list shorter than its own height can't be scrolled at all, so a first batch smaller than the viewport would otherwise be the last batch ever loaded. The list keeps asking for pages until the content overflows. Whichever trigger fires, one row count is asked at most once, so the loop ends as soon as a call appends nothing, and a page scrolled well past the end of the list does not go on asking with every scroll event. Gate the prop on your own "has more" flag to skip even that last probe:
 
 ```tsx
 <VirtualList items={items} onLoadMore={hasMore ? loadNextPage : undefined} height={600} />

package/docs/Wizard.md

@@ -41,4 +41,4 @@ const [step, setStep] = useState(0);
 | `renderStep` | `(stepIndex: number) => ReactNode` | Render function called per step |
 | `className` | `string` | Wrapper class |
 
-**Note:** Legacy JSX component. See [package/common/wizard/wizard.jsx](../common/wizard/wizard.jsx) for full implementation details.
+**Slots:** `root` `container` `step` `stepContent`

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
+    "agent",
+    "ai",
+    "claude",
+    "claude-code",
     "components",
     "css-modules",
+    "design-system",
+    "mcp",
     "react",
     "theming",
     "typescript",
     "ui"
   ],
-  "homepage": "https://github.com/AndreasWeinzierl/ahrowe-ui#readme",
+  "homepage": "https://ahrowe.com/packages/ui/demo/",
   "bugs": {
     "url": "https://github.com/AndreasWeinzierl/ahrowe-ui/issues"
   },
   "license": "MIT",
-  "author": "AndreasWeinzierl",
+  "author": "ahrowe <dev@ahrowe.com>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/AndreasWeinzierl/ahrowe-ui"
+    "url": "git+https://github.com/AndreasWeinzierl/ahrowe-ui.git"
   },
   "style": "./dist/style.css",
   "bin": {
@@ -35,11 +41,17 @@
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/types/index.d.ts"
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.mjs"
+      },
+      "require": {
+        "types": "./dist/cjs-types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
@@ -55,15 +67,20 @@
     "run-stylelint": "stylelint --cache --fix \"package/**/*.pcss\" \"src/**/*.css\"",
     "run-oxfmt": "oxfmt --write .",
     "run-tsc": "tsc --noEmit",
+    "check-oxlint": "oxlint .",
+    "check-stylelint": "stylelint \"package/**/*.pcss\" \"src/**/*.css\"",
+    "check-oxfmt": "oxfmt --check .",
     "format": "oxfmt --write .",
     "lint": "run-p run-tsc run-oxlint run-stylelint run-oxfmt",
+    "check": "run-p run-tsc check-oxlint check-stylelint check-oxfmt",
     "gen-barrel": "tsx scripts/gen-barrel.ts",
     "gen-theme-map": "tsx scripts/gen-theme-map.ts",
-    "gen-readme-table": "tsx scripts/gen-readme-table.ts",
+    "gen-component-table": "tsx scripts/gen-component-table.ts",
     "gc": "tsx scripts/generate-component.ts",
     "changeset": "changeset",
     "release": "bash src/scripts/release.sh",
     "verify-package": "bash src/scripts/verify-package.sh",
+    "check-package": "bash src/scripts/check-package.sh",
     "test": "vitest run",
     "test:browser": "vitest run --config vitest.browser.config.ts",
     "test:watch": "vitest",
@@ -75,12 +92,11 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@mona-health/react-input-mask": "^3.0.3",
     "classnames": "^2.5.1",
-    "downshift": "^9.4.0",
     "react-number-format": "^5.4.5"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@changesets/cli": "^3.0.3",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-solid-svg-icons": "^7.3.1",
@@ -109,10 +125,13 @@
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-nested": "^8.0.1",
+    "publint": "^0.3.24",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-element-to-jsx-string": "^17.0.1",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
     "stylelint": "^17.15.0",
     "stylelint-config-standard": "^40.0.0",
     "three": "^0.186.0",
@@ -132,5 +151,8 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": "vitest related --run"
+  },
+  "engines": {
+    "node": ">=18"
   }
 }

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"../loading/spinnerLoading/index.mjs";import t from"./infiniteBlock.module.mjs";import n,{useCallback as r,useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return e==null||typeof e==`boolean`?``:typeof e==`string`||typeof e==`number`?String(e):Array.isArray(e)?e.map(d).join(``):n.isValidElement(e)?d(e.props.children):``}function f(e,t,n){return e===-1?t>0?0:n-1:(e+t+n)%n}function p(e,t,n){let[r,s]=o(!1),c=a(!1),l=a(null),u=a(t);return i(()=>{u.current=t}),i(()=>{let t=e.current,r=l.current;if(n||!t||!r)return;let i=!1,a=()=>{c.current||(c.current=!0,s(!0),u.current().catch(()=>null).finally(()=>{i||(c.current=!1,s(!1),o.unobserve(r),o.observe(r))}))},o=new IntersectionObserver(([e])=>{e.isIntersecting&&a()},{root:t});return o.observe(r),()=>{i=!0,o.disconnect()}},[e,n]),{isLoading:r,sentinelRef:l}}function m(e,t){let i=a(null),o=a(-1),s=a(null);return{containerRef:i,onKeyDown:r(r=>{let a=i.current;if(!a)return;let c=n.Children.toArray(e);if(c.length===0)return;let l=o.current;if(r.key===`ArrowDown`)r.preventDefault(),l=f(l,1,c.length);else if(r.key===`ArrowUp`)r.preventDefault(),l=f(l,-1,c.length);else if(r.key.length===1){let e=r.key.toLowerCase(),t=s.current===r.key?l+1:0,n=t=>d(t).toLowerCase().startsWith(e),i=c.slice(t).findIndex(n),a=i===-1?c.slice(0,t).findIndex(n):t+i;if(s.current=r.key,a===-1)return;l=a}else return;s.current=r.key,o.current=l;let u=a.children[l];if(u){let e=u.offsetTop,t=e+u.offsetHeight;e<a.scrollTop?a.scrollTop=e:t>a.scrollTop+a.clientHeight&&(a.scrollTop=t-a.clientHeight)}t(l)},[e,t])}}function h({children:n,onScroll:r,className:i=``,style:a,isDataLoading:o=!1,setHighlightedIndex:d=()=>null}){let{containerRef:f,onKeyDown:h}=m(n,d),{isLoading:g,sentinelRef:_}=p(f,r,o);return l(`div`,{className:s(t.infiniteBlock,i),style:a,onKeyDown:h,tabIndex:0,ref:f,children:o?l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})}):u(c,{children:[n,l(`div`,{ref:_,className:t.sentinel,"aria-hidden":`true`}),g&&l(`div`,{className:t.spinnerWrapper,children:l(e,{className:t.spinner})})]})})}export{h as default};
-//# sourceMappingURL=infiniteBlock.mjs.map

package/dist/esm/common/infiniteBlock/infiniteBlock.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"infiniteBlock.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './infiniteBlock.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport type { InfiniteBlockProps } from './infiniteBlock.types';\n\n// Flattens a React node down to the text it renders, so keyboard type-ahead can match\n// against whatever a child actually displays — a plain string, a number, or something\n// wrapped in nested elements/fragments/arrays (e.g. an icon + label pair).\nfunction getNodeText(node: React.ReactNode): string {\n  if (node === null || node === undefined || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getNodeText).join('');\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n  return '';\n}\n\n// Cycles the index by `change`, wrapping directly from last to first (and first to last) —\n// no \"nothing highlighted\" stop in between, in either direction. `-1` means nothing is\n// highlighted yet: ArrowDown from there starts at the first item, ArrowUp at the last.\nfunction clampIndex(index: number, change: number, length: number): number {\n  if (index === -1) return change > 0 ? 0 : length - 1;\n  return (index + change + length) % length;\n}\n\n// Loads more items once a sentinel element at the end of the list scrolls into view.\n// IntersectionObserver only fires on a change of intersection state, so if a page of\n// freshly-loaded items still doesn't fill the container, the sentinel stays visible and\n// we have to re-arm the observer ourselves to pick up the next page.\nfunction useInfiniteScroll(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  onScroll: () => Promise<void>,\n  disabled: boolean,\n) {\n  const [isLoading, setIsLoading] = useState(false);\n  const isLoadingRef = useRef(false);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  // Kept in a ref so a caller passing a fresh onScroll function each render doesn't\n  // tear down and recreate the observer every time.\n  const onScrollRef = useRef(onScroll);\n  useEffect(() => {\n    onScrollRef.current = onScroll;\n  });\n\n  useEffect(() => {\n    const root = containerRef.current;\n    const sentinel = sentinelRef.current;\n    if (disabled || !root || !sentinel) return undefined;\n\n    let cancelled = false;\n\n    const loadMore = () => {\n      if (isLoadingRef.current) return;\n      isLoadingRef.current = true;\n      setIsLoading(true);\n\n      onScrollRef\n        .current()\n        .catch(() => null)\n        .finally(() => {\n          if (cancelled) return;\n          isLoadingRef.current = false;\n          setIsLoading(false);\n          observer.unobserve(sentinel);\n          observer.observe(sentinel);\n        });\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) loadMore();\n      },\n      { root },\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      cancelled = true;\n      observer.disconnect();\n    };\n  }, [containerRef, disabled]);\n\n  return { isLoading, sentinelRef };\n}\n\n// Arrow-key navigation plus type-ahead: pressing a character key jumps to the next child\n// whose text starts with it, cycling through repeats and wrapping at the end of the list.\nfunction useTypeaheadNav(children: React.ReactNode, setHighlightedIndex: (index: number) => void) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef(-1);\n  const lastKeyRef = useRef<string | null>(null);\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const childArray = React.Children.toArray(children);\n      if (childArray.length === 0) return;\n\n      let index = indexRef.current;\n\n      if (event.key === 'ArrowDown') {\n        // Without this, the browser's own native \"scroll a focused scrollable element on\n        // arrow keys\" behavior fires alongside our scrollIntoView math below, stacking an\n        // extra native scroll on top of ours on every press until the highlighted item is\n        // pushed out of view entirely.\n        event.preventDefault();\n        index = clampIndex(index, 1, childArray.length);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        index = clampIndex(index, -1, childArray.length);\n      } else if (event.key.length === 1) {\n        const key = event.key.toLowerCase();\n        const repeatingKey = lastKeyRef.current === event.key;\n        const searchStart = repeatingKey ? index + 1 : 0;\n        const startsWithKey = (child: React.ReactNode) => getNodeText(child).toLowerCase().startsWith(key);\n\n        const afterCurrent = childArray.slice(searchStart).findIndex(startsWithKey);\n        const match =\n          afterCurrent !== -1 ? searchStart + afterCurrent : childArray.slice(0, searchStart).findIndex(startsWithKey);\n\n        lastKeyRef.current = event.key;\n        if (match === -1) return;\n        index = match;\n      } else {\n        return;\n      }\n\n      lastKeyRef.current = event.key;\n      indexRef.current = index;\n\n      const child = container.children[index] as HTMLElement | undefined;\n      if (child) {\n        const childTop = child.offsetTop;\n        const childBottom = childTop + child.offsetHeight;\n        if (childTop < container.scrollTop) {\n          container.scrollTop = childTop;\n        } else if (childBottom > container.scrollTop + container.clientHeight) {\n          container.scrollTop = childBottom - container.clientHeight;\n        }\n      }\n      setHighlightedIndex(index);\n    },\n    [children, setHighlightedIndex],\n  );\n\n  return { containerRef, onKeyDown };\n}\n\nfunction InfiniteBlock({\n  children,\n  onScroll,\n  className = '',\n  style,\n  isDataLoading = false,\n  setHighlightedIndex = () => null,\n}: InfiniteBlockProps) {\n  const { containerRef, onKeyDown } = useTypeaheadNav(children, setHighlightedIndex);\n  const { isLoading: showScrollSpinner, sentinelRef } = useInfiniteScroll(containerRef, onScroll, isDataLoading);\n\n  return (\n    <div\n      className={cx(styles.infiniteBlock, className)}\n      style={style}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n      ref={containerRef}\n    >\n      {isDataLoading ? (\n        <div className={styles.spinnerWrapper}>\n          <SpinnerLoading className={styles.spinner} />\n        </div>\n      ) : (\n        <>\n          {children}\n          <div ref={sentinelRef} className={styles.sentinel} aria-hidden='true' />\n          {showScrollSpinner && (\n            <div className={styles.spinnerWrapper}>\n              <SpinnerLoading className={styles.spinner} />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default InfiniteBlock;\n"],"mappings":"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"}

package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`infiniteBlock_dFv-h`,t=`sentinel_n-Zie`,n=`spinner-wrapper_hsgWz`,r=`spinner_VjUS2`,i={infiniteBlock:e,sentinel:t,"spinner-wrapper":`spinner-wrapper_hsgWz`,spinnerWrapper:n,spinner:r};export{i as default,e as infiniteBlock,t as sentinel,r as spinner,n as spinnerWrapper};
-//# sourceMappingURL=infiniteBlock.module.mjs.map

package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"infiniteBlock.module.mjs","names":[],"sources":["../../../../package/common/infiniteBlock/infiniteBlock.module.pcss"],"sourcesContent":[".infiniteBlock {\n  position: relative;\n  max-height: none;\n}\n\n.sentinel {\n  height: 1px;\n}\n\n.spinner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 0;\n}\n\n.spinner {\n  width: 32px;\n  height: 32px;\n}\n"],"mappings":""}

package/dist/esm/common/loading/iconLoading/iconLoading.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./iconLoading.module.mjs";import"react";import t from"classnames";import{jsx as n,jsxs as r}from"react/jsx-runtime";function i({className:i=``}){return n(`div`,{className:t(e.iconLoading,i),children:r(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`-8 -1 16 14`,children:[n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 C 3 5 6 5 6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 C -3 5 -6 5 -6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingFirst,d:`M 0 0 L 0 10`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingSecond,d:`M 0.1 10 C -3 10 -4 10 -6 12`,strokeWidth:`1.7`,fill:`none`}),n(`path`,{className:e.iconLoadingSecond,d:`M -0.1 10 C 3 10 4 10 6 12`,strokeWidth:`1.7`,fill:`none`})]})})}export{i as default};
-//# sourceMappingURL=iconLoading.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconLoading.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\nimport styles from './iconLoading.module.pcss';\n\nfunction IconLoading({ className = '' }) {\n  return (\n    <div className={cx(styles.iconLoading, className)}>\n      <svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -1 16 14'>\n        <path className={styles.iconLoadingFirst} d='M 0 0 C 3 5 6 5 6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 C -3 5 -6 5 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingFirst} d='M 0 0 L 0 10' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M 0.1 10 C -3 10 -4 10 -6 12' strokeWidth='1.7' fill='none' />\n        <path className={styles.iconLoadingSecond} d='M -0.1 10 C 3 10 4 10 6 12' strokeWidth='1.7' fill='none' />\n      </svg>\n    </div>\n  );\n}\n\nexport default IconLoading;\n"],"mappings":"+IAKA,SAAS,EAAY,CAAE,YAAY,IAAM,CACvC,OACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,CAAS,EAC9C,SAAA,EAAC,MAAD,CAAK,MAAM,6BAA6B,QAAQ,cAAhD,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,uBAAuB,YAAY,MAAM,KAAK,MAAQ,CAAA,EAClG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,0BAA0B,YAAY,MAAM,KAAK,MAAQ,CAAA,EACrG,EAAC,OAAD,CAAM,UAAW,EAAO,iBAAkB,EAAE,eAAe,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,+BAA+B,YAAY,MAAM,KAAK,MAAQ,CAAA,EAC3G,EAAC,OAAD,CAAM,UAAW,EAAO,kBAAmB,EAAE,6BAA6B,YAAY,MAAM,KAAK,MAAQ,CAAA,CACtG,GACF,CAAA,CAET"}

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`iconLoading_wovj4`,t=`spin-to-oblivion_0tZtm`,n=`iconLoading-first_SBwP3`,r=`draw-line_1NiWA`,i=`iconLoading-second_nHrW3`,a=`draw-line-two_HmaHl`,o={iconLoading:e,"spin-to-oblivion":`spin-to-oblivion_0tZtm`,spinToOblivion:t,"iconLoading-first":`iconLoading-first_SBwP3`,iconLoadingFirst:n,"draw-line":`draw-line_1NiWA`,drawLine:r,"iconLoading-second":`iconLoading-second_nHrW3`,iconLoadingSecond:i,"draw-line-two":`draw-line-two_HmaHl`,drawLineTwo:a};export{o as default,r as drawLine,a as drawLineTwo,e as iconLoading,n as iconLoadingFirst,i as iconLoadingSecond,t as spinToOblivion};
-//# sourceMappingURL=iconLoading.module.mjs.map

package/dist/esm/common/loading/iconLoading/iconLoading.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconLoading.module.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/iconLoading.module.pcss"],"sourcesContent":[".iconLoading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  user-select: none;\n  pointer-events: none;\n\n  --draw-duration: 0.8s;\n  --delay: 0.4s;\n\n  svg {\n    stroke-dasharray: 14;\n    stroke-dashoffset: 14;\n    width: 200px;\n    aspect-ratio: 1;\n    animation: calc(var(--draw-duration) * 3) spin-to-oblivion var(--delay) infinite;\n    transform: rotate(0deg);\n    stroke: var(--primary-color);\n    stroke-linecap: round;\n  }\n\n  &-first {\n    animation: calc(var(--draw-duration) * 3) draw-line var(--delay) infinite;\n  }\n\n  &-second {\n    animation: calc(var(--draw-duration) * 3) draw-line-two var(--delay) infinite;\n  }\n\n  @keyframes draw-line {\n    33% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes draw-line-two {\n    33% {\n      stroke-dashoffset: 14;\n    }\n\n    66% {\n      stroke-dashoffset: 0;\n    }\n\n    95% {\n      stroke-dashoffset: 0;\n    }\n\n    96% {\n      stroke-dashoffset: 14;\n    }\n  }\n\n  @keyframes spin-to-oblivion {\n    50% {\n      transform: rotate(180deg);\n    }\n\n    75% {\n      transform: rotate(180deg) scale(0);\n    }\n\n    100% {\n      transform: rotate(180deg) scale(0);\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/loading/iconLoading/index.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./iconLoading.mjs";var t=e;export{t as default};
-//# sourceMappingURL=index.mjs.map

package/dist/esm/common/loading/iconLoading/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../package/common/loading/iconLoading/index.ts"],"sourcesContent":["import IconLoading from './iconLoading.js';\n\nexport default IconLoading;\n"],"mappings":"8CAEA,IAAA,EAAe"}

package/dist/types/common/infiniteBlock/index.d.ts

@@ -1 +0,0 @@
-export { default } from './infiniteBlock';

package/dist/types/common/infiniteBlock/infiniteBlock.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { InfiniteBlockProps } from './infiniteBlock.types';
-declare function InfiniteBlock({ children, onScroll, className, style, isDataLoading, setHighlightedIndex, }: InfiniteBlockProps): React.JSX.Element;
-export default InfiniteBlock;

package/dist/types/common/infiniteBlock/infiniteBlock.types.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-export interface InfiniteBlockProps {
-    children?: React.ReactNode;
-    /** Called when the user scrolls to the bottom; must return a Promise that resolves when the new data has loaded. */
-    onScroll: () => Promise<void>;
-    className?: string;
-    /** Inline style on the scroll container. */
-    style?: React.CSSProperties;
-    /** Replaces children with a full-block spinner (initial load). */
-    isDataLoading?: boolean;
-    /** Called with the newly highlighted child index after keyboard navigation. */
-    setHighlightedIndex?: (index: number) => void;
-}

package/dist/types/common/loading/iconLoading/iconLoading.d.ts

@@ -1,5 +0,0 @@
-import { default as React } from 'react';
-declare function IconLoading({ className }: {
-    className?: string | undefined;
-}): React.JSX.Element;
-export default IconLoading;

package/dist/types/common/loading/iconLoading/index.d.ts

@@ -1,2 +0,0 @@
-import { default as IconLoading } from './iconLoading.js';
-export default IconLoading;

package/docs/Icon.md

@@ -1,27 +0,0 @@
-# Icon
-
-**When to use:** Custom SVG icon set built into the library. Currently only contains the `can` (trash/delete) icon. For most icon needs, use FontAwesome directly via `@fortawesome/react-fontawesome`.
-
-**Keywords:** delete icon, trash icon
-
-**Import:** `import { Icon } from '@ahrowe/ui'`
-
-```tsx
-import { Icon } from '@ahrowe/ui';
-
-<Icon type="can" />
-```
-
-**Key props:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `type` | `string` | Icon type — only `'can'` is currently available |
-
-**Note:** For a rich icon set, use FontAwesome directly:
-
-```tsx
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
-<FontAwesomeIcon icon={faTrash} />
-```

package/docs/InfiniteBlock.md

@@ -1,23 +0,0 @@
-# InfiniteBlock
-
-**When to use:** Infinite scroll container — load more items as the user scrolls to the bottom. Use for paginated lists, feeds, search results.
-
-**Keywords:** pagination
-
-**Import:** `import { InfiniteBlock } from '@ahrowe/ui'`
-
-```tsx
-import { InfiniteBlock } from '@ahrowe/ui';
-
-<InfiniteBlock
-  onLoadMore={async () => {
-    await fetchNextPage();
-  }}
-  hasMore={hasNextPage}
-  isLoading={isFetchingNextPage}
->
-  {items.map(item => <ItemCard key={item.id} item={item} />)}
-</InfiniteBlock>
-```
-
-**Note:** This is a legacy JSX component — check [package/common/infiniteBlock/infiniteBlock.jsx](../common/infiniteBlock/infiniteBlock.jsx) for full prop details.