@botiverse/raft-ui 0.81.0 → 0.83.0

package/dist/components/fit-toolbar/fit-toolbar.d.mts

@@ -0,0 +1,110 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { ReactNode, Ref } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.d.ts
+/**
+ * The ways an item gives way, each one step:
+ * - `label`: its label hides and its icon stays (the label stays its accessible name);
+ * - `more`: it moves into More;
+ * - `collapse`: a group shows its one button instead of its items (a Filter button for its filters);
+ * - `wrap`: a group moves to a line of its own, only in a toolbar that allows it.
+ */
+export type FitStep = "label" | "more" | "collapse" | "wrap";
+/** When each of an item's steps comes: lower gives way first; at the same number, the last item first. */
+export type FitSteps = Partial<Record<FitStep, number>>;
+export type FitToolbarProps = StyledProps<Toolbar.Root.Props> & {
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Groups may move to a line of their own (the `wrap` step) when the row
+   * runs out of room. Off for a toolbar that floats over content: a second
+   * line would cover it, so its last step is into More.
+   */
+  wrap?: boolean;
+};
+/**
+ * A toolbar whose items give way, in named steps and an order the items
+ * declare, as the region it sits in narrows: it measures its content in its
+ * own width, never the window's. The steps are written on each item as
+ * `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
+ * arrow keys inside.
+ */
+export declare function FitToolbar({ className, wrap, ref, ...props }: FitToolbarProps): import("react").JSX.Element;
+/**
+ * Inside a FitToolbar: a control that would measure its own fit (a
+ * SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+ */
+export declare function useInFitToolbar(): boolean;
+export type FitItemOptions = FitSteps & {
+  /** What the item is in More's menu while it is there (`FitToolbarMoreItems`). */
+  moreItem?: ReactNode;
+};
+/**
+ * Makes an element an item of the nearest FitToolbar: spread `props` on it.
+ * Says which steps it has taken, for what it renders (a tooltip once its
+ * label is gone, say).
+ */
+export declare function useFitItem({ moreItem, ...steps }?: FitItemOptions): {
+  id: string;
+  props: Record<string, string | undefined>;
+  /** Steps it has taken. */
+  taken: (step: FitStep) => boolean;
+};
+/**
+ * Makes an element the toolbar's More: spread `props` on it. It shows only
+ * while an item is in More (`data-fit-shown`); hide it otherwise.
+ */
+export declare function useFitMore(): {
+  shown: boolean;
+  props: Record<string, string | undefined>;
+};
+/** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
+export declare function FitToolbarMoreItems(): import("react").JSX.Element[] | null;
+export type FitToolbarGroupProps = StyledProps<Toolbar.Group.Props> & {
+  /** When it moves to a line of its own (the `wrap` step), in a toolbar that allows it. */
+  wrapOrder?: number;
+  /** Stays on the first line: it never wraps. The page decides which groups do. */
+  firstLine?: boolean;
+  /**
+   * Groups with the same `wrapLine` wrap onto the same line, in their order, a
+   * fixed gap apart; a group without one takes a line of its own.
+   */
+  wrapLine?: string;
+  /** When it shows `collapsed` instead of its items (the `collapse` step). */
+  collapseOrder?: number;
+  /** The group as one button (a Filter button for its filters), shown once it collapses. */
+  collapsed?: ReactNode;
+  /**
+   * `scroll`: the group takes the rest of its line and scrolls sideways
+   * instead of giving way, its items whole, the side that hides more fading.
+   * Mark an applied or chosen item `data-active`: it is kept in view.
+   */
+  overflow?: "scroll";
+};
+/**
+ * A group of items in one row, a fixed gap apart. A toolbar wraps only
+ * between groups, the last first; groups with the same `wrapLine` share a
+ * line, any other takes one of its own.
+ */
+export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }: FitToolbarGroupProps & {
+  ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
+  /** Its icon, which stays when its label gives way. */
+  icon: ReactNode;
+  /** Its label: its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /** When its label gives way (the `label` step). */
+  labelOrder?: number;
+  /** When it moves into More (the `more` step). */
+  moreOrder?: number;
+  /** What it is in More's menu. */
+  moreItem?: ReactNode;
+};
+/**
+ * A toolbar button that can give way: an `md` Button (ghost unless you say)
+ * with an icon and a label, an icon square with its label as a tooltip from
+ * `labelOrder` on, and hidden from `moreOrder` on.
+ */
+export declare function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/fit-toolbar/fit-toolbar.mjs

@@ -0,0 +1,469 @@
+import { Button } from "../button/button.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { fitToolbar } from "./fit-toolbar.recipe.mjs";
+import { Fragment, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.tsx
+const NONE = {
+	items: /* @__PURE__ */ new Map(),
+	more: [],
+	wrapping: false
+};
+const STEPS = [
+	"label",
+	"more",
+	"collapse",
+	"wrap"
+];
+const ID = "data-fit-id";
+const DECLARED = "data-fit-steps";
+const MORE_TRIGGER = "data-fit-more-trigger";
+const SHOWN = "data-fit-shown";
+const WRAPPING = "data-fit-wrapping";
+const ROW = "data-fit-row";
+const NO_WRAP = "data-fit-first-line";
+const WRAP_LINE = "data-fit-wrap-line";
+const BREAK = "data-fit-break";
+const stepAttribute = (step) => `data-fit-${step}`;
+function declare(steps) {
+	return STEPS.filter((step) => steps[step] !== void 0).map((step) => `${step}:${steps[step]}`).join(" ");
+}
+/** What a row holds, looking through `display: contents` wrappers. */
+function boxes(element) {
+	return Array.from(element.children).flatMap((child) => getComputedStyle(child).display === "contents" ? boxes(child) : [child]);
+}
+/**
+* Nothing pokes out of the toolbar or out of any of its rows, and no line has
+* broken by itself: while groups wrap, each line (one `order`) stays one line.
+*/
+function fits(root) {
+	if (![root, ...root.querySelectorAll(`[${ROW}]`)].every((row) => {
+		if (row.getClientRects().length === 0) return true;
+		const style = getComputedStyle(row);
+		const end = row.getBoundingClientRect().right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+		return boxes(row).every((box) => box.getClientRects().length === 0 || box.getBoundingClientRect().right <= end + .5);
+	})) return false;
+	for (const scroller of root.querySelectorAll("[data-fit-scroll]")) {
+		if (scroller.getClientRects().length === 0) continue;
+		const first = boxes(scroller.querySelector("[data-slot=scroll-area-content]") ?? scroller).find((box) => box.getClientRects().length > 0);
+		if (first && scroller.clientWidth + .5 < first.getBoundingClientRect().width) return false;
+	}
+	if (!root.hasAttribute(WRAPPING)) return true;
+	const tops = /* @__PURE__ */ new Map();
+	for (const child of Array.from(root.children)) {
+		if (child.hasAttribute(BREAK) || child.getClientRects().length === 0) continue;
+		const line = getComputedStyle(child).order;
+		const top = child.getBoundingClientRect().top;
+		const first = tops.get(line);
+		if (first === void 0) tops.set(line, top);
+		else if (Math.abs(first - top) > .5) return false;
+	}
+	return true;
+}
+/**
+* Takes the steps one at a time, in their order, until the toolbar fits its
+* region; writes each on the DOM as it goes (React renders the same after)
+* and returns them. It starts from nothing taken every time, so the outcome
+* depends on the width alone.
+*/
+function measure(root, allowWrap) {
+	const elements = Array.from(root.querySelectorAll(`[${ID}]`));
+	const triggers = Array.from(root.querySelectorAll(`[${MORE_TRIGGER}]`));
+	for (const element of elements) {
+		for (const step of STEPS) element.removeAttribute(stepAttribute(step));
+		element.style.removeProperty("order");
+	}
+	for (const trigger of triggers) trigger.removeAttribute(SHOWN);
+	root.removeAttribute(WRAPPING);
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	root.style.setProperty("--fit-gap", getComputedStyle(root).columnGap);
+	const queue = elements.flatMap((element, index) => (element.getAttribute(DECLARED) ?? "").split(" ").filter(Boolean).map((entry) => {
+		const [step, order] = entry.split(":");
+		return {
+			element,
+			step,
+			order: Number(order),
+			index
+		};
+	}).filter(({ step, element: item }) => {
+		if (step === "more") return triggers.length > 0;
+		if (step === "wrap") return allowWrap && !item.hasAttribute(NO_WRAP);
+		return true;
+	}));
+	queue.sort((a, b) => a.order - b.order || b.index - a.index);
+	const taken = /* @__PURE__ */ new Map();
+	const history = [];
+	const showMore = () => {
+		const shown = Array.from(taken.values()).some((steps) => steps.has("more"));
+		for (const trigger of triggers) trigger.toggleAttribute(SHOWN, shown);
+	};
+	const take = (element, step) => {
+		const steps = taken.get(element) ?? /* @__PURE__ */ new Set();
+		steps.add(step);
+		taken.set(element, steps);
+		element.setAttribute(stepAttribute(step), "");
+		if (step === "more") showMore();
+		if (step === "wrap") layOutLines(root, elements);
+	};
+	const undo = (element, step) => {
+		taken.get(element)?.delete(step);
+		element.removeAttribute(stepAttribute(step));
+		if (step === "more") showMore();
+	};
+	for (const { element, step } of queue) {
+		if (fits(root)) break;
+		if (taken.get(element)?.has("more")) continue;
+		take(element, step);
+		history.push({
+			element,
+			step
+		});
+	}
+	for (let index = history.length - 1; index >= 0; index -= 1) {
+		const { element, step } = history[index];
+		if (step === "wrap") continue;
+		const group = element.closest(`[${stepAttribute("wrap")}]`);
+		if (!group || !root.contains(group)) continue;
+		if (history.findIndex((entry) => entry.element === group && entry.step === "wrap") < index) continue;
+		undo(element, step);
+		if (!fits(root)) take(element, step);
+	}
+	const items = /* @__PURE__ */ new Map();
+	const more = [];
+	let wrapping = false;
+	for (const element of elements) {
+		const steps = taken.get(element);
+		if (!steps || steps.size === 0) continue;
+		const id = element.getAttribute(ID);
+		items.set(id, steps);
+		if (steps.has("more")) more.push(id);
+		if (steps.has("wrap")) wrapping = true;
+	}
+	return {
+		items,
+		more,
+		wrapping
+	};
+}
+/**
+* Puts the wrapped groups on the lines after the first: groups with the same
+* `wrapLine` share a line, in their order; any other takes one of its own.
+* A zero-height break before each line ends the one before it.
+*/
+function layOutLines(root, elements) {
+	root.setAttribute(WRAPPING, "");
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	const lines = [];
+	for (const group of elements) {
+		if (!group.hasAttribute(stepAttribute("wrap"))) continue;
+		const line = group.getAttribute(WRAP_LINE) ?? `#${group.getAttribute(ID)}`;
+		let number = lines.indexOf(line);
+		if (number < 0) {
+			number = lines.push(line) - 1;
+			const lineBreak = document.createElement("span");
+			lineBreak.setAttribute(BREAK, "");
+			lineBreak.setAttribute("aria-hidden", "true");
+			lineBreak.style.cssText = `flex-basis: 100%; height: 0; order: ${2 * number + 1}`;
+			root.append(lineBreak);
+		}
+		group.style.order = String(2 * number + 2);
+	}
+}
+const keyOf = (applied) => `${applied.wrapping}|${Array.from(applied.items, ([id, steps]) => `${id}:${[...steps].join(",")}`).join(";")}`;
+/**
+* What each item shows in More while it is there, outside React state: the
+* items write it on every render, and only `FitToolbarMoreItems` (in an open
+* menu) reads it.
+*/
+function createMoreItemStore() {
+	const items = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	let version = 0;
+	const notify = () => {
+		version += 1;
+		for (const listener of listeners) listener();
+	};
+	return {
+		set(id, item) {
+			items.set(id, item);
+			notify();
+		},
+		delete(id) {
+			if (items.delete(id)) notify();
+		},
+		get: (id) => items.get(id),
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		version: () => version
+	};
+}
+const FitToolbarContext = createContext(null);
+/**
+* A toolbar whose items give way, in named steps and an order the items
+* declare, as the region it sits in narrows: it measures its content in its
+* own width, never the window's. The steps are written on each item as
+* `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
+* arrow keys inside.
+*/
+function FitToolbar({ className, wrap = false, ref, ...props }) {
+	const { root } = fitToolbar();
+	const rootRef = useRef(null);
+	const [element, setElement] = useState(null);
+	const [setRef] = useMergedRef(rootRef, setElement, ref);
+	const [applied, setApplied] = useState(NONE);
+	const [store] = useState(createMoreItemStore);
+	const update = useCallback(() => {
+		const current = rootRef.current;
+		if (!current) return;
+		const next = measure(current, wrap);
+		setApplied((previous) => keyOf(previous) === keyOf(next) ? previous : next);
+	}, [wrap]);
+	useLayoutEffect(update);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const region = element.parentElement;
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		if (region) resize?.observe(region);
+		const content = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+			const own = (node) => node instanceof Element && node.hasAttribute(BREAK);
+			if (records.some((record) => record.type === "characterData" || ![...record.addedNodes, ...record.removedNodes].every(own))) update();
+		});
+		content?.observe(element, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener?.("loadingdone", update);
+		return () => {
+			resize?.disconnect();
+			content?.disconnect();
+			fonts?.removeEventListener?.("loadingdone", update);
+		};
+	}, [element, update]);
+	const context = useMemo(() => ({
+		applied,
+		store
+	}), [applied, store]);
+	return /* @__PURE__ */ jsx(FitToolbarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref: setRef,
+			"data-slot": "fit-toolbar",
+			"data-fit-wrapping": applied.wrapping ? "" : void 0,
+			className: root({ className }),
+			...props
+		})
+	});
+}
+/**
+* Inside a FitToolbar: a control that would measure its own fit (a
+* SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+*/
+function useInFitToolbar() {
+	return useContext(FitToolbarContext) !== null;
+}
+/**
+* Makes an element an item of the nearest FitToolbar: spread `props` on it.
+* Says which steps it has taken, for what it renders (a tooltip once its
+* label is gone, say).
+*/
+function useFitItem({ moreItem, ...steps } = {}) {
+	const id = useId();
+	const context = useContext(FitToolbarContext);
+	const taken = context?.applied.items.get(id);
+	const store = context?.store;
+	const declared = declare(steps);
+	useLayoutEffect(() => {
+		if (moreItem !== void 0) store?.set(id, moreItem);
+	});
+	useLayoutEffect(() => () => store?.delete(id), [store, id]);
+	const props = {
+		[ID]: id,
+		[DECLARED]: declared || void 0
+	};
+	for (const step of STEPS) props[stepAttribute(step)] = taken?.has(step) ? "" : void 0;
+	return {
+		id,
+		props,
+		/** Steps it has taken. */
+		taken: (step) => taken?.has(step) ?? false
+	};
+}
+/**
+* Makes an element the toolbar's More: spread `props` on it. It shows only
+* while an item is in More (`data-fit-shown`); hide it otherwise.
+*/
+function useFitMore() {
+	const shown = (useContext(FitToolbarContext)?.applied.more.length ?? 0) > 0;
+	return {
+		shown,
+		props: {
+			[MORE_TRIGGER]: "",
+			[SHOWN]: shown ? "" : void 0
+		}
+	};
+}
+/** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
+function FitToolbarMoreItems() {
+	const context = useContext(FitToolbarContext);
+	const store = context?.store;
+	useSyncExternalStore(store?.subscribe ?? noSubscription, store?.version ?? noVersion, store?.version ?? noVersion);
+	if (!context) return null;
+	return context.applied.more.map((id) => /* @__PURE__ */ jsx(Fragment, { children: context.store.get(id) }, id));
+}
+const noSubscription = () => () => {};
+const noVersion = () => 0;
+/**
+* A scrolling group: which side hides more (`data-overflow`, for
+* `mask-fade-x`), a vertical wheel scrolling it, and its `data-active` items
+* and the focused one kept in view, clear of the fade, with no animation.
+* The same as slock web's FilterStrip, so the two behave alike.
+*/
+function useScrollGroup(group) {
+	useLayoutEffect(() => {
+		if (!group) return;
+		const edges = () => {
+			const max = group.scrollWidth - group.clientWidth;
+			const start = group.scrollLeft > 1;
+			const end = max > 1 && group.scrollLeft < max - 1;
+			const next = start && end ? "both" : start ? "start" : end ? "end" : null;
+			if (next) group.setAttribute("data-overflow", next);
+			else group.removeAttribute("data-overflow");
+		};
+		const reveal = (item) => {
+			if (!(item instanceof HTMLElement) || !group.contains(item)) return;
+			const fade = parseFloat(getComputedStyle(group).getPropertyValue("--fade-edge")) || 24;
+			const start = item.getBoundingClientRect().left - group.getBoundingClientRect().left + group.scrollLeft;
+			const end = start + item.offsetWidth;
+			if (start - fade < group.scrollLeft) group.scrollLeft = Math.max(0, start - fade);
+			else if (end + fade > group.scrollLeft + group.clientWidth) group.scrollLeft = end + fade - group.clientWidth;
+			edges();
+		};
+		const revealActive = () => {
+			const active = group.querySelectorAll("[data-active]");
+			for (const item of Array.from(active).reverse()) reveal(item);
+		};
+		const onWheel = (event) => {
+			if (group.scrollWidth <= group.clientWidth) return;
+			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+			const before = group.scrollLeft;
+			group.scrollLeft += event.deltaY;
+			if (group.scrollLeft !== before) event.preventDefault();
+		};
+		const onFocus = (event) => reveal(event.target);
+		revealActive();
+		edges();
+		group.addEventListener("scroll", edges, { passive: true });
+		group.addEventListener("wheel", onWheel, { passive: false });
+		group.addEventListener("focusin", onFocus);
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+			revealActive();
+			edges();
+		});
+		resize?.observe(group);
+		const changes = new MutationObserver((records) => {
+			if (records.some((record) => record.type !== "attributes" || record.attributeName === "data-active")) revealActive();
+			edges();
+		});
+		changes.observe(group, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["data-active"]
+		});
+		return () => {
+			group.removeEventListener("scroll", edges);
+			group.removeEventListener("wheel", onWheel);
+			group.removeEventListener("focusin", onFocus);
+			resize?.disconnect();
+			changes.disconnect();
+		};
+	}, [group]);
+}
+/**
+* A group of items in one row, a fixed gap apart. A toolbar wraps only
+* between groups, the last first; groups with the same `wrapLine` share a
+* line, any other takes one of its own.
+*/
+function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }) {
+	const { group, full, short, scroller, scrollContent } = fitToolbar({ scroll: overflow === "scroll" });
+	const [scrollerElement, setScroller] = useState(null);
+	useScrollGroup(overflow === "scroll" ? scrollerElement : null);
+	const item = useFitItem({
+		wrap: wrapOrder,
+		collapse: collapsed === void 0 ? void 0 : collapseOrder ?? 0
+	});
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		ref,
+		"data-slot": "fit-toolbar-group",
+		"data-fit-row": overflow === "scroll" ? void 0 : "",
+		"data-fit-scroll": overflow === "scroll" ? "" : void 0,
+		"data-fit-first-line": firstLine ? "" : void 0,
+		"data-fit-wrap-line": wrapLine,
+		className: group({ className }),
+		...item.props,
+		...props,
+		children: overflow === "scroll" ? /* @__PURE__ */ jsx(ScrollArea, {
+			ref: setScroller,
+			orientation: "horizontal",
+			overscroll: "contain",
+			size: "small",
+			trigger: "scroll",
+			tabIndex: -1,
+			"data-fit-scroller": "",
+			className: scroller(),
+			contentClassName: scrollContent(),
+			children
+		}) : collapsed === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-items",
+			className: full(),
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-collapsed",
+			className: short(),
+			children: collapsed
+		})] })
+	});
+}
+/**
+* A toolbar button that can give way: an `md` Button (ghost unless you say)
+* with an icon and a label, an icon square with its label as a tooltip from
+* `labelOrder` on, and hidden from `moreOrder` on.
+*/
+function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant = "ghost", className, ...props }) {
+	const { button, label } = fitToolbar();
+	const item = useFitItem({
+		label: labelOrder,
+		more: moreOrder,
+		moreItem
+	});
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				variant,
+				size: "md",
+				className: button({ className }),
+				...item.props,
+				...props
+			}) }),
+			children: [icon, /* @__PURE__ */ jsx("span", {
+				"data-slot": "fit-toolbar-button-label",
+				className: label(),
+				children
+			})]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+//#endregion
+export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore, useInFitToolbar };

package/dist/components/fit-toolbar/fit-toolbar.recipe.mjs

@@ -0,0 +1,21 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/fit-toolbar/fit-toolbar.recipe.ts
+const fitToolbar = tv({
+	slots: {
+		root: ["flex min-w-0 max-w-full flex-nowrap items-center", "data-fit-wrapping:flex-wrap data-fit-wrapping:gap-y-0"],
+		group: ["group/fit-group flex shrink-0 flex-nowrap items-center", "data-fit-wrap:mt-(--fit-gap)"],
+		full: ["contents group-data-fit-collapse/fit-group:hidden"],
+		short: ["hidden group-data-fit-collapse/fit-group:contents"],
+		button: ["data-fit-label:w-8 data-fit-label:px-0 md:pointer-fine:data-fit-label:w-(--control-height)", "data-fit-more:hidden"],
+		label: ["in-data-fit-label:sr-only"],
+		scroller: [],
+		scrollContent: []
+	},
+	variants: { scroll: { true: {
+		group: ["block min-w-0 flex-1 shrink basis-0"],
+		scroller: ["-my-1.5 w-full gap-[inherit] scroll-px-6 mask-fade-x"],
+		scrollContent: ["flex w-max items-center gap-[inherit] py-1.5"]
+	} } }
+});
+//#endregion
+export { fitToolbar };

package/dist/components/fit-toolbar/index.d.mts

@@ -0,0 +1,2 @@
+import { FitItemOptions, FitStep, FitSteps, FitToolbar, FitToolbarButton, FitToolbarButtonProps, FitToolbarGroup, FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps, useFitItem, useFitMore, useInFitToolbar } from "./fit-toolbar.mjs";
+export { type FitItemOptions, type FitStep, type FitSteps, FitToolbar, FitToolbarButton, type FitToolbarButtonProps, FitToolbarGroup, type FitToolbarGroupProps, FitToolbarMoreItems, type FitToolbarProps, useFitItem, useFitMore, useInFitToolbar };

package/dist/components/list-row/index.d.mts

@@ -1,2 +1,2 @@
-import { ListRow, ListRowBody, ListRowBodyProps, ListRowBottom, ListRowBottomProps, ListRowChevron, ListRowChevronProps, ListRowDescription, ListRowDescriptionProps, ListRowGroup, ListRowGroupProps, ListRowIcon, ListRowIconProps, ListRowMeta, ListRowMetaProps, ListRowProps, ListRowTitle, ListRowTitleProps, ListRowTop, ListRowTopProps, ListRowValue, ListRowValueProps } from "./list-row.mjs";
-export { ListRow, ListRowBody, type ListRowBodyProps, ListRowBottom, type ListRowBottomProps, ListRowChevron, type ListRowChevronProps, ListRowDescription, type ListRowDescriptionProps, ListRowGroup, type ListRowGroupProps, ListRowIcon, type ListRowIconProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowTitle, type ListRowTitleProps, ListRowTop, type ListRowTopProps, ListRowValue, type ListRowValueProps };
+import { ListRow, ListRowBody, ListRowBodyProps, ListRowBottom, ListRowBottomProps, ListRowChevron, ListRowChevronProps, ListRowDescription, ListRowDescriptionProps, ListRowGroup, ListRowGroupProps, ListRowIcon, ListRowIconProps, ListRowMeta, ListRowMetaProps, ListRowProps, ListRowSubtitle, ListRowSubtitleProps, ListRowTitle, ListRowTitleProps, ListRowTop, ListRowTopProps, ListRowValue, ListRowValueProps } from "./list-row.mjs";
+export { ListRow, ListRowBody, type ListRowBodyProps, ListRowBottom, type ListRowBottomProps, ListRowChevron, type ListRowChevronProps, ListRowDescription, type ListRowDescriptionProps, ListRowGroup, type ListRowGroupProps, ListRowIcon, type ListRowIconProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowSubtitle, type ListRowSubtitleProps, ListRowTitle, type ListRowTitleProps, ListRowTop, type ListRowTopProps, ListRowValue, type ListRowValueProps };

package/dist/components/list-row/list-row.d.mts

@@ -47,6 +47,15 @@ export declare function ListRowBottom({ className, render, ...props }: ListRowBo
 export type ListRowTitleProps = useRender.ComponentProps<"span">;
 /** 16/24 600 on one line; the row's tone sets its weight and ink. */
 export declare function ListRowTitle({ className, render, ...props }: ListRowTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ListRowSubtitleProps = useRender.ComponentProps<"span">;
+/**
+ * Data about the row's subject on the line under the title: an agent's or a
+ * channel's description, a channel's topic, a person's role, an app's byline.
+ * 400 in the row's ink, a size under the title, cut to one line. A setting's
+ * consequence goes in `ListRowDescription`; a time, a date or a gray count in
+ * `ListRowMeta`.
+ */
+export declare function ListRowSubtitle({ className, render, ...props }: ListRowSubtitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type ListRowDescriptionProps = useRender.ComponentProps<"span"> & {
   /** Let the text run onto more lines instead of truncating: a setting's
    *  consequence. */

package/dist/components/list-row/list-row.mjs

@@ -109,6 +109,25 @@ function ListRowTitle({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+/**
+* Data about the row's subject on the line under the title: an agent's or a
+* channel's description, a channel's topic, a person's role, an app's byline.
+* 400 in the row's ink, a size under the title, cut to one line. A setting's
+* consequence goes in `ListRowDescription`; a time, a date or a gray count in
+* `ListRowMeta`.
+*/
+function ListRowSubtitle({ className, render, ...props }) {
+	const { subtitle } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-subtitle",
+		className: subtitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
 /** The preview (who spoke first: "Wug: …") or a setting's consequence, 14/20 ink-2. */
 function ListRowDescription({ className, render, wrap = false, ...props }) {
 	const { description } = listRow({ wrap });
@@ -164,4 +183,4 @@ function ListRowChevron({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { ListRow, ListRowBody, ListRowBottom, ListRowChevron, ListRowDescription, ListRowGroup, ListRowIcon, ListRowMeta, ListRowTitle, ListRowTop, ListRowValue };
+export { ListRow, ListRowBody, ListRowBottom, ListRowChevron, ListRowDescription, ListRowGroup, ListRowIcon, ListRowMeta, ListRowSubtitle, ListRowTitle, ListRowTop, ListRowValue };