@rinzai/zen 0.15.0 → 0.16.0

package/dist/dialog/index.js

@@ -1,115 +1,95 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useGraphicsMode as t } from "../utils/graphics.js";
-import { useMergedRefs as n } from "../utils/refs.js";
-import { useMessages as r } from "../locale-provider/index.js";
-import i from "../button/index.js";
-import a from "../icons/micro/x-mark.js";
-import { useToastHost as o } from "../toast/index.js";
-import { useSwipe as s } from "../utils/swipe.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useGraphicsMode as n } from "../utils/graphics.js";
+import { useMergedRefs as r } from "../utils/refs.js";
+import { useSheetSwipe as i } from "../utils/swipe.js";
+import a from "../button/index.js";
+import o from "../icons/micro/x-mark.js";
+import { useToastHost as s } from "../toast/index.js";
 import { createContext as c, useContext as l, useEffect as u, useId as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region packages/dialog/index.tsx
 var h = c(() => {});
-function g({ open: t, onOpenChange: i, title: o, description: s, children: c, dismissible: l = !0, initialFocus: u, size: g = "md", side: v, className: b, role: x, closeLabel: S, ref: C, ...w }) {
-	let T = r(), E = S ?? T.close, D = f(null), O = n(D, C), k = d(), A = d();
-	return y(D, l && t ? v : void 0, () => i?.(!1)), _(D, t, u), /* @__PURE__ */ m("dialog", {
+function g({ open: n, onOpenChange: a, title: s, description: c, children: l, dismissible: u = !0, initialFocus: g, size: v = "md", side: y, className: b, role: x, closeLabel: S, ref: C, ...w }) {
+	let T = e(), E = S ?? T.close, D = f(null), O = r(D, C), k = d(), A = d();
+	return i(D, u && n ? y : void 0, () => a?.(!1)), _(D, n, g), /* @__PURE__ */ m("dialog", {
 		...w,
 		ref: O,
 		role: x,
 		"aria-labelledby": k,
-		"aria-describedby": s ? A : void 0,
-		"data-side": v,
-		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !v && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !v && (g === "lg" ? "w-[60rem]" : "w-[28rem]"), v === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (v === "left" || v === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", v === "right" && "mr-0 ml-auto rounded-l-2xl", v === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", b),
+		"aria-describedby": c ? A : void 0,
+		"data-side": y,
+		className: t("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !y && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !y && (v === "lg" ? "w-[60rem]" : "w-[28rem]"), y === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (y === "left" || y === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", y === "right" && "mr-0 ml-auto rounded-l-2xl", y === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", b),
 		onCancel: (e) => {
-			e.preventDefault(), l && i?.(!1);
+			e.preventDefault(), u && a?.(!1);
 		},
 		onClick: (e) => {
-			e.target === e.currentTarget && l && i?.(!1);
+			e.target === e.currentTarget && u && a?.(!1);
 		},
 		children: [/* @__PURE__ */ m("div", {
-			className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", v ? v === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
+			className: t("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", y ? y === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
 			children: [
-				v === "bottom" && /* @__PURE__ */ p("div", {
+				y === "bottom" && /* @__PURE__ */ p("div", {
 					"aria-hidden": !0,
 					className: "bg-tint/20 mx-auto h-1 w-10 shrink-0 rounded-full"
 				}),
 				/* @__PURE__ */ m("div", {
-					className: e("flex flex-col gap-2", l && "pe-8"),
+					className: t("flex flex-col gap-2", u && "pe-8"),
 					children: [/* @__PURE__ */ p("h2", {
 						id: k,
 						className: "text-lg font-semibold tracking-tight text-balance",
-						children: o
-					}), s && /* @__PURE__ */ p("p", {
+						children: s
+					}), c && /* @__PURE__ */ p("p", {
 						id: A,
 						className: "text-muted-foreground mt-0! text-sm leading-5",
-						children: s
+						children: c
 					})]
 				}),
 				/* @__PURE__ */ p(h.Provider, {
-					value: () => i?.(!1),
-					children: c
+					value: () => a?.(!1),
+					children: l
 				})
 			]
-		}), l && /* @__PURE__ */ p("button", {
+		}), u && /* @__PURE__ */ p("button", {
 			type: "button",
 			"aria-label": E,
-			onClick: () => i?.(!1),
-			className: e("text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground absolute end-4 grid size-8 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-ring", v === "bottom" ? "top-7.5" : "top-5.5"),
-			children: /* @__PURE__ */ p(a, { className: "size-4" })
+			onClick: () => a?.(!1),
+			className: t("text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground absolute end-4 grid size-8 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-ring", y === "bottom" ? "top-7.5" : "top-5.5"),
+			children: /* @__PURE__ */ p(o, { className: "size-4" })
 		})]
 	});
 }
-function _(e, n, r) {
-	t(), u(() => {
-		let t = e.current;
-		if (t) {
-			if (n && !t.open) {
+function _(e, t, r) {
+	n(), u(() => {
+		let n = e.current;
+		if (n) {
+			if (t && !n.open) {
 				let e = document.documentElement;
 				e.toggleAttribute("data-zen-scrollbar", window.innerWidth > e.clientWidth);
-				let n = document.activeElement === document.body ? null : document.activeElement?.getBoundingClientRect(), i = !!n && !t.dataset.side;
-				if (t.toggleAttribute("data-zen-from", i), t.showModal(), i) {
-					let e = n.left + n.width / 2 - t.offsetLeft, r = n.top + n.height / 2 - t.offsetTop;
-					t.style.transformOrigin = `${Math.round(e)}px ${Math.round(r)}px`;
+				let t = document.activeElement === document.body ? null : document.activeElement?.getBoundingClientRect(), i = !!t && !n.dataset.side;
+				if (n.toggleAttribute("data-zen-from", i), n.showModal(), i) {
+					let e = t.left + t.width / 2 - n.offsetLeft, r = t.top + t.height / 2 - n.offsetTop;
+					n.style.transformOrigin = `${Math.round(e)}px ${Math.round(r)}px`;
 				}
 				r?.current?.focus();
-			} else !n && t.open && t.close();
+			} else !t && n.open && n.close();
 		}
 	}, [
 		e,
-		n,
+		t,
 		r
-	]), o(e, n);
-}
-var v = .3;
-function y(e, t, n) {
-	let r = t === "bottom" ? "y" : "x", i = t === "left" ? -1 : 1, a = () => r === "y" ? e.current.offsetHeight : e.current.offsetWidth, o = () => {
-		e.current?.style.removeProperty("--zen-swipe"), e.current?.style.removeProperty("--zen-swipe-progress");
-	};
-	u(o, [e, t]), s(e, t ? {
-		axis: r,
-		sign: i
-	} : void 0, {
-		move: (t) => {
-			let n = t > 0 ? t : t / 6;
-			e.current.style.setProperty("--zen-swipe", r === "y" ? `0 ${n}px` : `${n * i}px 0`), e.current.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, t / a()))));
-		},
-		release: (e, t) => {
-			e > a() * v || e > 0 && t > .5 ? n() : o();
-		},
-		cancel: o,
-		threshold: () => a() * v
-	});
+	]), s(e, t);
 }
-function b({ className: t, ...n }) {
+function v({ className: e, ...n }) {
 	return /* @__PURE__ */ p("div", {
-		className: e("flex justify-end gap-2", t),
+		className: t("flex justify-end gap-2", e),
 		...n
 	});
 }
-function x({ onClick: e, ...t }) {
+function y({ onClick: e, ...t }) {
 	let n = l(h);
-	return /* @__PURE__ */ p(i, {
+	return /* @__PURE__ */ p(a, {
 		...t,
 		onClick: (t) => {
 			e?.(t), t.defaultPrevented || n();
@@ -117,4 +97,4 @@ function x({ onClick: e, ...t }) {
 	});
 }
 //#endregion
-export { x as DialogClose, b as DialogFooter, g as default, _ as useModal };
+export { y as DialogClose, v as DialogFooter, g as default, _ as useModal };

package/dist/docs/README.md

@@ -156,7 +156,7 @@ Breaking changes and additions by version are in ../../CHANGELOG.md.
 - [Load More](./load-more.md): The end of a long list that has more: loads the next page when it scrolls into view, or on a press.
 - [Locale Provider](./locale-provider.md): The language for everything inside: how dates, numbers and money read, and every word components show or announce. Without it, "en-US" and English.
 - [Marquee](./marquee.md): One line of text cut off with an ellipsis, that scrolls to show the rest on hover or focus (of itself or of its row), or all the time. Only text that doesn't fit moves.
-- [Menu](./menu.md): A button that opens a menu, or a context menu from a right-click or long press, with your own trigger, a header, icons, groups, destructive items, checkbox and radio items, submenus, and a menubar of menus.
+- [Menu](./menu.md): A button that opens a menu, or a context menu from a right-click or long press, with your own trigger, a header, icons, groups, destructive items, checkbox and radio items, submenus, a bottom sheet on phones, and a menubar of menus.
 - [Meter](./meter.md): A measure against a limit, like spend against a budget: warm near it, red past it.
 - [Money Input](./money-input.md): Amounts in any currency and locale, with shorthand like 1.5L or 10k and sums like 120+45.50, exact to the paisa, and typed in other currencies, converted at your rates. Built on Input Group.
 - [Month Picker](./month-picker.md): A field showing a month that opens a year and a 12-month grid, with optional limits and clearing.
@@ -174,14 +174,14 @@ Breaking changes and additions by version are in ../../CHANGELOG.md.
 - [Range Slider](./range-slider.md): Two thumbs on one track, for a span like an amount from $50 to $500.
 - [Repeat Picker](./repeat-picker.md): How often something recurs, like a bill, said in words, with the next dates it falls on.
 - [Resizable](./resizable.md): Panels with handles between them to drag, or to move with the arrow keys, within limits you set; groups nest, and the layout is reported to keep.
-- [Seek Bar](./seek-bar.md): Where playback is in a track, and the way to move it: played and loaded on one track, between the time played and the length.
+- [Seek Bar](./seek-bar.md): Where playback is in a track, and the way to move it: played and loaded on one track, the time played and the length beside it or under its ends.
 - [Segmented](./segmented.md): A pill row for a few mutually exclusive options.
 - [Select](./select.md): Pick one value from a short list, fully keyboard-driven. For long or searchable lists, use Combobox.
 - [Separator](./separator.md): A hairline between groups of content, across or upright.
 - [Side Nav](./side-nav.md): Vertical navigation in titled groups, for docs and settings sidebars. Works with any router.
 - [Skeleton & Spinner](./skeleton.md): Placeholders for content on its way.
 - [Slider](./slider.md): A native range input with a glowing thumb and any track you like.
-- [Sortable List](./sortable.md): Put a list in order, or a tree of groups (a table’s rows, say), by dragging items by a grip or with the keyboard, each step announced: into other groups, open sub-items, or under another item.
+- [Sortable List](./sortable.md): Put a list in order, or a tree of groups (a table’s rows, say), by dragging items by a grip or with the keyboard, each step announced: into other groups, open sub-items, or under another item. Also a virtualized list of hundreds.
 - [Sparkline](./sparkline.md): A small line of how a number has moved, with no axes, for beside a figure. It draws itself in.
 - [Spinner](./spinner.md): A small loading spinner in the current text colour, announced to screen readers when labelled.
 - [Status Pill](./status-pill.md): A small status that changes in place, such as Saving…, Saved or Not saved with a Retry, and fades back once the news is old.
@@ -200,6 +200,6 @@ Breaking changes and additions by version are in ../../CHANGELOG.md.
 - [Toggle](./toggle.md): An on/off switch.
 - [Toggle Group](./toggle-group.md): Buttons that stay pressed, in a row: any number of them, like filters, or at most one. One stop in the tab order; the arrow keys go through them.
 - [Toolbar](./toolbar.md): A row of controls for one thing, like a table’s: one stop for Tab, and the arrow keys through its buttons, toggles and fields.
-- [Tooltip](./tooltip.md): A short glass hint on hover or keyboard focus, describing its trigger to screen readers.
+- [Tooltip](./tooltip.md): A short glass hint on hover or keyboard focus, describing its trigger to screen readers; below its trigger or beside it.
 - [Tree Table](./tree.md): Rows that open into child rows, animated, built from useTree and the Table parts. With virtual rows and editable cells, enough for a budget planner.
 - [Trend](./trend.md): A change, like +12% with an arrow, coloured by whether it is good news.

package/dist/docs/locale-provider.md

@@ -96,4 +96,4 @@ part of the page.
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `locale` | `string` |  | e.g. "en-IN", "fr-FR". Defaults to the enclosing provider's, or "en-US". |
-| `messages` | `Partial<{ clear: string; cancel: string; close: string; dismiss: string; delete: string; remove: (item: string) => string; noResults: string; search: string; expand: string; collapse: string; minimum: string; ... 109 more ...; timeOf: (time: string, total: string) => string; }>` |  | Any of the words to replace; the others are kept. |
+| `messages` | `Partial<{ clear: string; cancel: string; close: string; back: string; dismiss: string; delete: string; remove: (item: string) => string; noResults: string; search: string; expand: string; collapse: string; minimum: string; ... 109 more ...; timeOf: (time: string, total: string) => string; }>` |  | Any of the words to replace; the others are kept. |

package/dist/docs/menu.md

@@ -1,6 +1,6 @@
 # Menu
 
-A button that opens a menu, or a context menu from a right-click or long press, with your own trigger, a header, icons, groups, destructive items, checkbox and radio items, submenus, and a menubar of menus.
+A button that opens a menu, or a context menu from a right-click or long press, with your own trigger, a header, icons, groups, destructive items, checkbox and radio items, submenus, a bottom sheet on phones, and a menubar of menus.
 
 ```tsx
 import { Menu, MenuTrigger, MenuContextTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuSeparator, MenuHeader, Menubar } from '@rinzai/zen';
@@ -187,6 +187,58 @@ export default function Options() {
 }
 ```
 
+### Sheet
+
+```tsx
+import {
+    buttonVariants,
+    Menu,
+    MenuContent,
+    MenuItem,
+    MenuSeparator,
+    MenuSub,
+    MenuSubContent,
+    MenuSubTrigger,
+    MenuTrigger,
+    useToast,
+} from '@rinzai/zen';
+// Icons from Heroicons (https://heroicons.com): Ellipsis (ellipsis-horizontal), Heart (heart), MusicalNote (musical-note), QueueList (queue-list).
+
+/** A song's menu: on a phone (narrow the window), a bottom sheet, its playlists sliding in over it. */
+export default function Sheet() {
+    const toast = useToast();
+    return (
+        <Menu>
+            <MenuTrigger aria-label="Song actions" className={buttonVariants({ variant: 'ghost', size: 'icon' })}>
+                <Ellipsis />
+            </MenuTrigger>
+            <MenuContent sheet>
+                <MenuItem icon={<QueueList className="size-4" />} onSelect={() => toast('Playing next')}>
+                    Play next
+                </MenuItem>
+                <MenuItem icon={<Heart className="size-4" />} onSelect={() => toast('Liked', { tone: 'positive' })}>
+                    Like
+                </MenuItem>
+                <MenuSub>
+                    <MenuSubTrigger icon={<MusicalNote className="size-4" />}>Add to playlist</MenuSubTrigger>
+                    <MenuSubContent>
+                        {['Late night', 'Focus', 'Running', 'Sunday morning'].map((name) => (
+                            <MenuItem key={name} onSelect={() => toast(`Added to ${name}`, { tone: 'positive' })}>
+                                {name}
+                            </MenuItem>
+                        ))}
+                    </MenuSubContent>
+                </MenuSub>
+                <MenuSeparator />
+                <MenuItem tone="negative" onSelect={() => toast('Removed from queue', { tone: 'negative' })}>
+                    Remove from queue
+                </MenuItem>
+            </MenuContent>
+        </Menu>
+    );
+}
+```
+
 ### Bar
 
 ```tsx
@@ -308,6 +360,7 @@ instead; name it with `aria-label`.
 | --- | --- | --- | --- |
 | `align` | `"center" \| "end" \| "start"` |  | Which edge of the button the menu lines up with (default end; a context menu starts at the pointer), or centred on it. |
 | `offset` | `number` |  | Gap between the button and the menu, in px. |
+| `sheet` | `boolean` |  | On phones (below `md`), a bottom sheet instead, as music apps show a song's menu: across the bottom of the screen over a scrim, swiped down to close; its submenus slide in over it, with a way back at the top. |
 
 ### MenuItem
 

package/dist/docs/seek-bar.md

@@ -1,6 +1,6 @@
 # Seek Bar
 
-Where playback is in a track, and the way to move it: played and loaded on one track, between the time played and the length.
+Where playback is in a track, and the way to move it: played and loaded on one track, the time played and the length beside it or under its ends.
 
 ```tsx
 import { SeekBar, formatDuration } from '@rinzai/zen';
@@ -46,6 +46,34 @@ export default function Default() {
 }
 ```
 
+### Times below
+
+```tsx
+import { SeekBar, useMediaPlayer } from '@rinzai/zen';
+
+import { useDemoTrack } from '../../player-bar/examples/demo-track';
+
+/** The times under the bar's ends, as on a phone's Now Playing screen. */
+export default function TimesBelow() {
+    const src = useDemoTrack();
+    const [audioRef, player] = useMediaPlayer();
+    return (
+        <div className="w-80">
+            <audio ref={audioRef} src={src} preload="metadata" />
+            <SeekBar
+                times="below"
+                currentTime={player.currentTime}
+                playing={player.playing && !player.waiting}
+                playbackRate={player.playbackRate}
+                duration={player.duration}
+                buffered={player.buffered}
+                onSeek={player.seek}
+            />
+        </div>
+    );
+}
+```
+
 ## API reference
 
 ### SeekBar
@@ -65,4 +93,5 @@ the track keeps playing; letting go seeks. The arrow keys seek 5 seconds.
 | `playbackRate` | `number` | `1` | How fast it moves on while playing (default 1). |
 | `playing` | `boolean` | `false` | While the time is running (playing, not waiting for data): the bar glides on between time updates. |
 | `thumbColor` | `string` |  | CSS colour for the thumb (default: the accent). |
+| `times` | `"below" \| "beside"` | `beside` | Where the time played and the length go: either side of the bar (default), or under its ends, as on a phone's Now Playing screen. |
 | `valueText` | `((value: number) => string)` |  | Spoken value, e.g. (v) => `Hue ${v} degrees`. |

package/dist/docs/sortable.md

@@ -1,6 +1,6 @@
 # Sortable List
 
-Put a list in order, or a tree of groups (a table’s rows, say), by dragging items by a grip or with the keyboard, each step announced: into other groups, open sub-items, or under another item.
+Put a list in order, or a tree of groups (a table’s rows, say), by dragging items by a grip or with the keyboard, each step announced: into other groups, open sub-items, or under another item. Also a virtualized list of hundreds.
 
 ```tsx
 import { SortableList, SortableTree, SortableItem, SortableHandle, flattenTree } from '@rinzai/zen';
@@ -116,6 +116,66 @@ export default function Groups() {
 }
 ```
 
+### Virtual
+
+```tsx
+import { SortableHandle, SortableItem, SortableList, useVirtualList } from '@rinzai/zen';
+import { useRef, useState } from 'react';
+
+const ROW = 48;
+const ARTISTS = ['Nils Frahm', 'Ólafur Arnalds', 'Hania Rani', 'Max Richter', 'Bonobo', 'Tycho', 'Jon Hopkins'];
+const SONGS = Object.fromEntries(
+    Array.from({ length: 500 }, (_, i) => [`s${i}`, { title: `Track ${i + 1}`, artist: ARTISTS[(i * 3) % 7] }]),
+);
+
+/**
+ * A queue of 500, rendering only the rows in view: `itemHeight` on the list,
+ * and the dragged row kept rendered (`keep`) as it scrolls the list along.
+ */
+export default function Virtual() {
+    const [order, setOrder] = useState(Object.keys(SONGS));
+    const [lifted, setLifted] = useState<string | null>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const rows = useVirtualList({
+        count: order.length,
+        itemHeight: ROW,
+        scrollRef,
+        keep: lifted ? order.indexOf(lifted) : undefined,
+    });
+    return (
+        <div ref={scrollRef} className="glass h-96 w-full max-w-md overflow-y-auto rounded-xl">
+            <SortableList
+                value={order}
+                onValueChange={setOrder}
+                itemHeight={ROW}
+                onLiftedChange={setLifted}
+                aria-label="Up next"
+                style={{ height: rows.totalSize }}
+            >
+                {rows.items.map(({ index, start }) => {
+                    const id = order[index];
+                    const song = SONGS[id];
+                    return (
+                        <SortableItem
+                            key={id}
+                            id={id}
+                            className="absolute! inset-x-0 flex items-center gap-2 px-1.5"
+                            style={{ top: start, height: ROW }}
+                        >
+                            <SortableHandle id={id} label={song.title} />
+                            <div className="min-w-0">
+                                <div className="truncate text-sm font-medium">{song.title}</div>
+                                <div className="text-muted-foreground truncate text-xs">{song.artist}</div>
+                            </div>
+                        </SortableItem>
+                    );
+                })}
+            </SortableList>
+        </div>
+    );
+}
+```
+
 ## API reference
 
 ### SortableList
@@ -134,6 +194,8 @@ TableBody of TableRows, say, one per group, each sorted on its own.
 | `onValueChange` (required) | `(value: string[]) => void` |  |  |
 | `value` (required) | `readonly string[]` |  | The items' ids, in order. |
 | `asChild` | `boolean` |  | Put the list's props on your own element (the single child, e.g. a TableBody) instead of a ul. |
+| `itemHeight` | `number` |  | For a virtualized list (useVirtualList), its rows' height, gap included: render just the items in view, each placed at its place in `value` times this, and the drag works from `value` instead of the rows on screen. |
+| `onLiftedChange` | `((id: string \| null) => void)` |  | When an item is picked up (by its handle, or from the keyboard), and when it's put down (null). A virtualized list keeps that row rendered meanwhile (useVirtualList's `keep`), so it stays under the pointer as the list scrolls. |
 
 ### SortableTree
 

package/dist/docs/tooltip.md

@@ -1,6 +1,6 @@
 # Tooltip
 
-A short glass hint on hover or keyboard focus, describing its trigger to screen readers.
+A short glass hint on hover or keyboard focus, describing its trigger to screen readers; below its trigger or beside it.
 
 ```tsx
 import { Tooltip, TooltipTrigger, TooltipContent } from '@rinzai/zen';
@@ -31,6 +31,45 @@ export default function Default() {
 }
 ```
 
+### Beside
+
+```tsx
+import { Tooltip, TooltipContent, TooltipTrigger } from '@rinzai/zen';
+// Icons from Heroicons (https://heroicons.com): MusicalNote (musical-note), QueueList (queue-list), Search (magnifying-glass), Squares (squares-2x2).
+
+const ITEMS = [
+    { label: 'Home', icon: Squares },
+    { label: 'Search', icon: Search },
+    { label: 'Library', icon: MusicalNote },
+    { label: 'Up next', icon: QueueList },
+];
+
+/**
+ * An icon rail, each icon's name in a tooltip beside it (`side="beside"`), clear
+ * of the icons below. The name is the button's own label, so it isn't also its description.
+ */
+export default function Beside() {
+    return (
+        <nav aria-label="Main" className="glass flex flex-col gap-1 rounded-xl p-1.5">
+            {ITEMS.map(({ label, icon: Icon }) => (
+                <Tooltip key={label}>
+                    <TooltipTrigger
+                        aria-label={label}
+                        aria-describedby={undefined}
+                        className="text-muted-foreground hover:text-foreground hover:bg-tint/[0.07] focus-ring grid size-10 cursor-pointer place-items-center rounded-lg transition-colors"
+                    >
+                        <Icon className="size-5" />
+                    </TooltipTrigger>
+                    <TooltipContent side="beside" offset={8}>
+                        <p className="px-2.5 py-1.5 text-sm">{label}</p>
+                    </TooltipContent>
+                </Tooltip>
+            ))}
+        </nav>
+    );
+}
+```
+
 ## API reference
 
 ### Tooltip
@@ -52,9 +91,12 @@ What the tooltip describes: a button by default. With `asChild`, your own focusa
 
 ### TooltipContent
 
-The hint: glass, below the trigger (above it if there's no room), centred on it by default.
+The hint: glass, below the trigger (above it if there's no room), centred on
+it by default. `side="beside"` puts it after the trigger instead (before it
+if there's no room), as for the icons of a collapsed sidebar.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `align` | `"center" \| "end" \| "start"` | `center` | Centred on the trigger (default), or lined up with its start or end edge. |
+| `align` | `"center" \| "end" \| "start"` | `center` | Centred on the trigger (default), or lined up with its start or end edge (beside: its top or bottom). |
 | `offset` | `number` | `5` | Gap from the trigger, in px. |
+| `side` | `"below" \| "beside"` | `below` | Below the trigger (default; above if there's no room), or beside it (after it; before if there's no room). |

package/dist/filter-bar/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { reducedMotion as n } from "../utils/motion.js";
 import r from "../icons/micro/x-mark.js";
 import { Children as i, useEffect as a, useLayoutEffect as o, useRef as s } from "react";
@@ -14,7 +14,7 @@ var u = typeof window > "u" ? a : o, d = {
 	easing: "ease-in"
 };
 function p({ onClear: n, clearLabel: r, "aria-label": a, className: o, children: u, ref: d, ...f }) {
-	let p = t(), h = r ?? p.clearAll, g = a ?? p.activeFilters, _ = i.toArray(u).length, v = s(null);
+	let p = e(), h = r ?? p.clearAll, g = a ?? p.activeFilters, _ = i.toArray(u).length, v = s(null);
 	return m(v), _ === 0 ? null : /* @__PURE__ */ l("div", {
 		ref: (e) => {
 			if (v.current = e, typeof d == "function") return d(e);
@@ -22,7 +22,7 @@ function p({ onClear: n, clearLabel: r, "aria-label": a, className: o, children:
 		},
 		role: "group",
 		"aria-label": g,
-		className: e("zen__filter-bar relative flex flex-wrap items-center gap-1.5", o),
+		className: t("zen__filter-bar relative flex flex-wrap items-center gap-1.5", o),
 		...f,
 		children: [u, _ > 1 && n && /* @__PURE__ */ c("button", {
 			type: "button",
@@ -76,9 +76,9 @@ function m(e) {
 	});
 }
 function h({ onRemove: n, removeLabel: i, className: a, children: o }) {
-	let s = t(), u = i ?? s.removeFilter;
+	let s = e(), u = i ?? s.removeFilter;
 	return /* @__PURE__ */ l("span", {
-		className: e("zen__filter-chip bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-full py-1 ps-3 pe-1 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]", a),
+		className: t("zen__filter-chip bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-full py-1 ps-3 pe-1 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]", a),
 		children: [o, /* @__PURE__ */ c("button", {
 			type: "button",
 			"aria-label": u,

package/dist/header/index.js

@@ -1,13 +1,13 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useGraphicsMode as t } from "../utils/graphics.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useGraphicsMode as n } from "../utils/graphics.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region packages/header/index.tsx
 function a({ skipLabel: a, className: o, children: s, ...c }) {
-	let l = n(), u = a === void 0 ? l.skipToContent : a;
-	return t(), /* @__PURE__ */ i("header", {
-		className: e("zen__header glow-edge border-tint/5 bg-background/60 sticky top-0 z-40 border-b pt-[env(safe-area-inset-top)] backdrop-blur-xl", "pointer-coarse:bg-background/95 pointer-coarse:backdrop-blur-none", o),
+	let l = e(), u = a === void 0 ? l.skipToContent : a;
+	return n(), /* @__PURE__ */ i("header", {
+		className: t("zen__header glow-edge border-tint/5 bg-background/60 sticky top-0 z-40 border-b pt-[env(safe-area-inset-top)] backdrop-blur-xl", "pointer-coarse:bg-background/95 pointer-coarse:backdrop-blur-none", o),
 		...c,
 		children: [u !== null && /* @__PURE__ */ r("a", {
 			href: "#main",

package/dist/icon-picker/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useControllable as n } from "../utils/useControllable.js";
 import r, { PopoverContent as i, PopoverTrigger as a } from "../popover/index.js";
 import { useId as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -41,12 +41,12 @@ var l = [
 	}
 ];
 function u({ icons: u, colors: d = l, value: f, defaultValue: p = { icon: "" }, onValueChange: m, label: h, name: g, className: _, ...v }) {
-	let [y, b] = t(f, p, m), x = n(), S = (e) => e.label ?? x.colourNames[e.value] ?? e.value, C = o(), w = g ?? C, T = u.find((e) => e.value === y.icon), E = d.find((e) => e.value === y.color), D = (e) => ({ "--icon-color": e ?? "var(--color-muted-foreground)" });
+	let [y, b] = n(f, p, m), x = e(), S = (e) => e.label ?? x.colourNames[e.value] ?? e.value, C = o(), w = g ?? C, T = u.find((e) => e.value === y.icon), E = d.find((e) => e.value === y.color), D = (e) => ({ "--icon-color": e ?? "var(--color-muted-foreground)" });
 	return /* @__PURE__ */ c(r, { children: [/* @__PURE__ */ s(a, {
 		...v,
 		"aria-label": `${h}: ${[T?.label, E && S(E)].filter(Boolean).join(", ") || x.none}`,
 		style: D(E?.color),
-		className: e("zen__icon-picker grid size-10 shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklch,var(--icon-color)_18%,transparent)] text-lg text-(--icon-color) outline-hidden transition-colors focus-ring", _),
+		className: t("zen__icon-picker grid size-10 shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklch,var(--icon-color)_18%,transparent)] text-lg text-(--icon-color) outline-hidden transition-colors focus-ring", _),
 		children: T?.icon
 	}), /* @__PURE__ */ c(i, {
 		"aria-label": h,

package/dist/keypad/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useControllable as n } from "../utils/useControllable.js";
 import r from "../icons/arrow-left.js";
 import { jsx as i } from "react/jsx-runtime";
 //#region packages/keypad/index.tsx
@@ -20,7 +20,7 @@ var a = [
 	"back"
 ];
 function o({ value: o, defaultValue: s = "", onValueChange: c, decimals: l = 2, maxLength: u = 12, deleteLabel: d, "aria-label": f, className: p, ...m }) {
-	let h = n(), g = d ?? h.delete, _ = f ?? h.keypad, [v, y] = t(o, s, c), b = (e) => {
+	let h = e(), g = d ?? h.delete, _ = f ?? h.keypad, [v, y] = n(o, s, c), b = (e) => {
 		if (e === "back") return y(v.slice(0, -1));
 		let t = v.indexOf(".");
 		if (e === ".") return l === 0 || t !== -1 ? void 0 : y((v || "0") + ".");
@@ -29,7 +29,7 @@ function o({ value: o, defaultValue: s = "", onValueChange: c, decimals: l = 2,
 	return /* @__PURE__ */ i("div", {
 		role: "group",
 		"aria-label": _,
-		className: e("zen__keypad grid grid-cols-3 gap-2", p),
+		className: t("zen__keypad grid grid-cols-3 gap-2", p),
 		...m,
 		children: a.map((e) => /* @__PURE__ */ i("button", {
 			type: "button",