@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,494 @@
+'use client';
+import { SortableHandle, SortableItemContext } from "../Sortable/Sortable.js";
+import { containerName, dragLabelOf, useDragAccessibility } from "../_internal/dragAnnouncements.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { containerAwareClosestCorners, isPointerOutsideContainers } from "../Sortable/containerAwareCollision.js";
+import Kanban_module_default from "./Kanban.module.js";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, getScrollableAncestors, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+// src/components/Kanban/Kanban.tsx
+var KanbanColumnItemsContext = createContext(null);
+/**
+* Recursively walk the children subtree looking for a `Kanban.Handle`
+* (`SortableHandle`). Mirrors Sortable's `containsHandle` function.
+*
+* Limitation: only walks `React.Children` and `props.children` — a Handle
+* wrapped inside a custom component is invisible to this walk.
+*/
+function containsHandle(children) {
+	let found = false;
+	function walk(node) {
+		if (found) return;
+		if (!isValidElement(node)) return;
+		if (node.type === SortableHandle) {
+			found = true;
+			return;
+		}
+		const { children: nested } = node.props;
+		if (nested != null) Children.forEach(nested, walk);
+	}
+	Children.forEach(children, walk);
+	return found;
+}
+/**
+* Measure `node` against its nearest scrollable ancestor.
+*
+* The card's own transform (and transition) are stripped for the duration of
+* the measurement — both readings would otherwise be poisoned by the transform:
+* `getBoundingClientRect()` returns the TRANSFORMED box, and a card already
+* hanging past the content edge inflates the very `scrollWidth` we are about to
+* use as the bound. Stripping makes the measurement a fixed point, so repeated
+* measurements during one drag cannot ratchet the bound outwards. The
+* transition goes too: a keyboard drag leaves a real `transition` on the drag
+* source (a pointer drag does not), and strip-then-restore would otherwise read
+* as a computed-value change and animate the card back from identity. Both are
+* restored before the browser paints (this runs in a layout effect), so nothing
+* is visible.
+*
+* Which container: only the NEAREST scrollable ancestor matters — it clips
+* everything below it, so no ancestor further up ever sees the overhang. Inside
+* a `<Kanban>` that is always the board. It is whatever else the consumer made
+* scrollable, though: a `<Kanban.Column>` given `overflow-y: auto` becomes the
+* nearest scroller for its own cards.
+*
+* Returns null when nothing is measurable — no node, or a zero-sized scroll
+* area, which is every element under jsdom (it lays nothing out). A null bound
+* means "don't clamp", i.e. the pre-#373 behaviour. Note there is no
+* "unscrollable" case to bail out of in a real browser:
+* `getScrollableAncestors` falls back to `document.scrollingElement`, so a card
+* with no scrollable ancestor is bounded by the page instead.
+*
+* @internal exported for unit tests; not part of the public API.
+*/
+function measureKanbanDragBounds(node) {
+	if (!node) return null;
+	const [scroller] = getScrollableAncestors(node, 1);
+	if (!scroller) return null;
+	const previousTransform = node.style.transform;
+	const previousTransition = node.style.transition;
+	node.style.transform = "none";
+	node.style.transition = "none";
+	const rect = node.getBoundingClientRect();
+	const box = scroller.getBoundingClientRect();
+	const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientLeft, clientTop } = scroller;
+	node.style.transform = previousTransform;
+	node.style.transition = previousTransition;
+	if (scrollWidth === 0 || scrollHeight === 0) return null;
+	const isRootScroller = scroller === scroller.ownerDocument.scrollingElement;
+	const originX = box.left + clientLeft - (isRootScroller ? 0 : scrollLeft);
+	const originY = box.top + clientTop - (isRootScroller ? 0 : scrollTop);
+	return {
+		centerX: rect.left + rect.width / 2 - originX,
+		centerY: rect.top + rect.height / 2 - originY,
+		width: rect.width,
+		height: rect.height,
+		contentWidth: scrollWidth,
+		contentHeight: scrollHeight
+	};
+}
+/**
+* Bound `transform` so the transformed card stays inside the scroll
+* container's content box. Pass-through when either argument is null.
+*
+* This is what stops horizontal auto-scroll from running away (#373). The card
+* is rendered IN FLOW (there is no `DragOverlay`), so a transform that carries
+* it past the content edge extends the container's `scrollWidth`; dnd-kit's
+* auto-scroll then chases the edge it just created, which moves the card
+* further out, which extends the edge again — measured at 8910px of `scrollLeft`
+* against a real maximum of 597. Clamping the APPLIED transform breaks the loop
+* at its source: `scrollWidth` never changes, so `scrollLeft` plateaus at the
+* real maximum and the last column becomes reachable.
+*
+* It has to happen here, where the transform is written to the DOM — a
+* `DndContext` modifier is not enough, because dnd-kit computes
+* `scrollAdjustedTranslate = modifiedTranslate + scrollAdjustment` and adds the
+* scroll adjustment AFTER modifiers run (same reason `DataTable` clamps
+* `event.delta` rather than only its modifier — see `useColumnDragShift`).
+*
+* `scaleX` / `scaleY` are honoured because dnd-kit scales the drag source to
+* the `over` rect; the scaled half-extent, not the layout half-extent, is what
+* reaches the edge.
+*
+* @internal exported for unit tests; not part of the public API.
+*/
+function clampKanbanTransform(transform, bounds) {
+	if (!transform || !bounds) return transform;
+	const halfWidth = bounds.width * transform.scaleX / 2;
+	const halfHeight = bounds.height * transform.scaleY / 2;
+	return {
+		...transform,
+		x: clamp(transform.x, halfWidth - bounds.centerX, bounds.contentWidth - halfWidth - bounds.centerX),
+		y: clamp(transform.y, halfHeight - bounds.centerY, bounds.contentHeight - halfHeight - bounds.centerY)
+	};
+}
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+* One draggable card inside a `<Kanban.Column>`; needs a stable `id`.
+* @see docs/components/Kanban.md
+*/
+var KanbanCard = forwardRef(function KanbanCard({ id, className, children, ...rest }, ref) {
+	const cardRef = useRef(null);
+	const dragLabel = rest["aria-label"];
+	const dragData = useMemo(() => ({
+		dragLabel,
+		dragNode: cardRef
+	}), [dragLabel]);
+	const { setNodeRef, setActivatorNodeRef, listeners, attributes, transform, transition, isDragging, index, items } = useSortable({
+		id,
+		data: dragData
+	});
+	const hasHandle = useMemo(() => containsHandle(children), [children]);
+	const ctxValue = useMemo(() => ({
+		listeners,
+		attributes,
+		setActivatorNodeRef
+	}), [
+		listeners,
+		attributes,
+		setActivatorNodeRef
+	]);
+	const boundsRef = useRef(null);
+	useLayoutEffect(() => {
+		const node = cardRef.current;
+		if (!isDragging || !node) {
+			boundsRef.current = null;
+			return;
+		}
+		boundsRef.current = measureKanbanDragBounds(node);
+		const bounded = CSS.Transform.toString(clampKanbanTransform(transform, boundsRef.current));
+		if (bounded) node.style.transform = bounded;
+	}, [
+		isDragging,
+		index,
+		items
+	]);
+	const setRef = (node) => {
+		cardRef.current = node;
+		setNodeRef(node);
+		if (!hasHandle) setActivatorNodeRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setRef,
+			style: {
+				transform: CSS.Transform.toString(clampKanbanTransform(transform, boundsRef.current)),
+				transition
+			},
+			"data-dragging": isDragging ? "true" : void 0,
+			className: clsx(Kanban_module_default.card, className),
+			...hasHandle ? {} : listeners,
+			...hasHandle ? {} : attributes,
+			...rest,
+			...hasHandle ? { role: "article" } : {},
+			children
+		})
+	});
+});
+KanbanCard.displayName = "KanbanCard";
+/**
+* One swimlane in a `<Kanban>`; needs a stable `id`.
+* @see docs/components/Kanban.md
+*/
+var KanbanColumn = forwardRef(function KanbanColumn({ id, className, children, ...rest }, ref) {
+	const { setNodeRef } = useDroppable({ id });
+	const ctxCardIds = useContext(KanbanColumnItemsContext);
+	const fallbackCardIds = useMemo(() => {
+		if (ctxCardIds !== null) return null;
+		const ids = [];
+		Children.forEach(children, (card) => {
+			if (!isValidElement(card) || card.type !== KanbanCard) return;
+			ids.push(card.props.id);
+		});
+		return ids;
+	}, [children, ctxCardIds]);
+	const cardIds = ctxCardIds ?? fallbackCardIds ?? [];
+	const setRef = (node) => {
+		setNodeRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRef,
+		className: clsx(Kanban_module_default.column, className),
+		...rest,
+		...(rest["aria-label"] || rest["aria-labelledby"]) && rest.role == null ? { role: "group" } : {},
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: cardIds,
+			strategy: verticalListSortingStrategy,
+			children
+		})
+	});
+});
+KanbanColumn.displayName = "KanbanColumn";
+/**
+* Multi-column drag-and-drop board with live cross-column reflow (`Kanban`, `Kanban.Column`, `Kanban.Card`, `Kanban.Handle`).
+* @see docs/components/Kanban.md
+*/
+var KanbanRoot = forwardRef(function KanbanRoot({ onMove, className, children, ...rest }, ref) {
+	const t = useTranslation();
+	const { columnOrder, columnElements, initialItems, cardElements, columnChildrenSlices } = useMemo(() => {
+		const colOrder = [];
+		const colElems = /* @__PURE__ */ new Map();
+		const initItems = /* @__PURE__ */ new Map();
+		const cardElems = /* @__PURE__ */ new Map();
+		const colSlices = /* @__PURE__ */ new Map();
+		Children.forEach(children, (child) => {
+			if (!isValidElement(child) || child.type !== KanbanColumn) return;
+			const columnElement = child;
+			const colProps = columnElement.props;
+			const colId = colProps.id;
+			colOrder.push(colId);
+			colElems.set(colId, columnElement);
+			const colCardIds = [];
+			let firstCardIdx = -1;
+			let lastCardIdx = -1;
+			const colChildren = Children.toArray(colProps.children);
+			colChildren.forEach((grandchild, idx) => {
+				if (!isValidElement(grandchild) || grandchild.type !== KanbanCard) return;
+				const cardProps = grandchild.props;
+				colCardIds.push(cardProps.id);
+				cardElems.set(cardProps.id, grandchild);
+				if (firstCardIdx < 0) firstCardIdx = idx;
+				lastCardIdx = idx;
+			});
+			const before = firstCardIdx >= 0 ? colChildren.slice(0, firstCardIdx) : colChildren;
+			const after = lastCardIdx >= 0 ? colChildren.slice(lastCardIdx + 1) : [];
+			initItems.set(colId, colCardIds);
+			colSlices.set(colId, {
+				before,
+				after
+			});
+		});
+		return {
+			columnOrder: colOrder,
+			columnElements: colElems,
+			initialItems: initItems,
+			cardElements: cardElems,
+			columnChildrenSlices: colSlices
+		};
+	}, [children]);
+	const initialItemsKey = useMemo(() => JSON.stringify(Array.from(initialItems.entries())), [initialItems]);
+	const [liveItems, setLiveItems] = useState(null);
+	useEffect(() => {
+		setLiveItems(null);
+	}, [initialItemsKey]);
+	const effectiveItems = liveItems ?? initialItems;
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const findContainer = useCallback((id, items) => {
+		if (items.has(id)) return id;
+		for (const [colId, cards] of items) if (cards.includes(id)) return colId;
+		return null;
+	}, []);
+	const originRef = useRef(null);
+	const outsideBoardRef = useRef(false);
+	const collisionDetection = useCallback((args) => {
+		const isOutsideBoard = isPointerOutsideContainers(args);
+		outsideBoardRef.current = isOutsideBoard;
+		if (isOutsideBoard) return [];
+		return containerAwareClosestCorners(args);
+	}, []);
+	const handleDragStart = useCallback((event) => {
+		outsideBoardRef.current = false;
+		originRef.current = findContainer(event.active.id, initialItems);
+		const snapshot = /* @__PURE__ */ new Map();
+		for (const [colId, cards] of initialItems) snapshot.set(colId, [...cards]);
+		setLiveItems(snapshot);
+	}, [initialItems, findContainer]);
+	const handleDragOver = useCallback((event) => {
+		const { active, over } = event;
+		if (!over) return;
+		const activeId = active.id;
+		const overId = over.id;
+		if (activeId === overId) return;
+		setLiveItems((prev) => {
+			if (!prev) return prev;
+			const activeContainer = findContainer(activeId, prev);
+			const overContainer = findContainer(overId, prev);
+			if (activeContainer == null || overContainer == null) return prev;
+			const isTransit = activeContainer !== overContainer;
+			const isForeignAppend = !isTransit && overId === overContainer && overContainer !== originRef.current;
+			if (!isTransit && !isForeignAppend) return prev;
+			const activeCards = prev.get(activeContainer) ?? [];
+			if (!activeCards.includes(activeId)) return prev;
+			if (isForeignAppend && activeCards[activeCards.length - 1] === activeId) return prev;
+			const overCards = (prev.get(overContainer) ?? []).filter((id) => id !== activeId);
+			let insertAt;
+			if (overCards.includes(overId)) {
+				const overIdx = overCards.indexOf(overId);
+				const activeRect = active.rect.current.translated;
+				const overRect = over.rect;
+				insertAt = overIdx + (activeRect != null && activeRect.top + activeRect.height / 2 > overRect.top + overRect.height / 2 ? 1 : 0);
+			} else if (overId === overContainer) insertAt = overCards.length;
+			else return prev;
+			const next = new Map(prev);
+			if (isTransit) next.set(activeContainer, activeCards.filter((id) => id !== activeId));
+			const newOver = [...overCards];
+			newOver.splice(insertAt, 0, activeId);
+			next.set(overContainer, newOver);
+			return next;
+		});
+	}, [findContainer]);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		const activeId = active.id;
+		if (!over || outsideBoardRef.current) {
+			setLiveItems(null);
+			return;
+		}
+		const overId = over.id;
+		const finalItems = liveItems ?? initialItems;
+		let fromColumn = null;
+		let fromIndex = -1;
+		for (const [colId, cards] of initialItems) {
+			const idx = cards.indexOf(activeId);
+			if (idx >= 0) {
+				fromColumn = colId;
+				fromIndex = idx;
+				break;
+			}
+		}
+		if (fromColumn == null) {
+			setLiveItems(null);
+			return;
+		}
+		let liveColumn = null;
+		let liveIdx = -1;
+		for (const [colId, cards] of finalItems) {
+			const idx = cards.indexOf(activeId);
+			if (idx >= 0) {
+				liveColumn = colId;
+				liveIdx = idx;
+				break;
+			}
+		}
+		let toColumn;
+		let toIndex;
+		if (liveColumn != null && liveColumn !== fromColumn) {
+			toColumn = liveColumn;
+			const destCards = finalItems.get(liveColumn) ?? [];
+			const overIdx = overId === activeId ? -1 : destCards.indexOf(overId);
+			toIndex = overIdx >= 0 ? overIdx : liveIdx;
+		} else if (initialItems.has(overId)) {
+			toColumn = fromColumn;
+			toIndex = (initialItems.get(fromColumn) ?? []).length - 1;
+		} else if (overId === activeId) {
+			toColumn = fromColumn;
+			toIndex = liveIdx;
+		} else {
+			let overCol = null;
+			for (const [colId, cards] of finalItems) if (cards.includes(overId)) {
+				overCol = colId;
+				break;
+			}
+			if (overCol == null) {
+				setLiveItems(null);
+				return;
+			}
+			toColumn = overCol;
+			toIndex = (finalItems.get(toColumn) ?? []).indexOf(overId);
+		}
+		setLiveItems(null);
+		if (toIndex < 0) return;
+		if (fromColumn === toColumn && fromIndex === toIndex) return;
+		onMove?.({
+			from: {
+				columnId: fromColumn,
+				index: fromIndex
+			},
+			to: {
+				columnId: toColumn,
+				index: toIndex
+			},
+			cardId: activeId
+		});
+	}, [
+		liveItems,
+		initialItems,
+		onMove
+	]);
+	const handleDragCancel = useCallback(() => {
+		setLiveItems(null);
+	}, []);
+	const columnLabel = (colId) => containerName(columnElements.get(colId)?.props ?? {}) || t("kanban.unnamedColumn", {
+		index: columnOrder.indexOf(colId) + 1,
+		total: columnOrder.length
+	});
+	const describeDrag = (entry, activeId) => {
+		if (!entry) return null;
+		const id = entry.id;
+		const isColumn = effectiveItems.has(id);
+		const colId = isColumn ? id : findContainer(id, effectiveItems);
+		if (colId == null) return null;
+		const cards = effectiveItems.get(colId) ?? [];
+		const label = dragLabelOf(entry.data.current);
+		const container = columnLabel(colId);
+		if (!isColumn) return {
+			label,
+			index: cards.indexOf(id) + 1,
+			total: cards.length,
+			container
+		};
+		const seated = cards.indexOf(activeId);
+		return seated >= 0 ? {
+			label,
+			index: seated + 1,
+			total: cards.length,
+			container
+		} : {
+			label,
+			index: cards.length + 1,
+			total: cards.length + 1,
+			container
+		};
+	};
+	const accessibility = useDragAccessibility(describeDrag, () => outsideBoardRef.current);
+	return /* @__PURE__ */ jsx(DndContext, {
+		accessibility,
+		sensors,
+		collisionDetection,
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			"aria-label": t("kanban.board"),
+			className: clsx(Kanban_module_default.board, className),
+			...rest,
+			role: "region",
+			children: columnOrder.map((colId) => {
+				const columnElement = columnElements.get(colId);
+				if (!columnElement) return null;
+				const cardIds = effectiveItems.get(colId) ?? [];
+				const cards = cardIds.map((id) => cardElements.get(id)).filter((c) => c != null);
+				const slice = columnChildrenSlices.get(colId) ?? {
+					before: [],
+					after: []
+				};
+				return /* @__PURE__ */ jsx(KanbanColumnItemsContext.Provider, {
+					value: cardIds,
+					children: cloneElement(columnElement, {}, ...slice.before, ...cards, ...slice.after)
+				}, colId);
+			})
+		})
+	});
+});
+KanbanRoot.displayName = "Kanban";
+var Kanban = Object.assign(KanbanRoot, {
+	Column: KanbanColumn,
+	Card: KanbanCard,
+	/**
+	* Re-exported from `<Sortable.Handle>`. Attaches drag listeners when placed
+	* inside a `<Kanban.Card>`. When present, only the Handle initiates drag
+	* (the Card div gets `role="article"`).
+	*/
+	Handle: SortableHandle
+});
+export { Kanban, KanbanCard, KanbanColumn, clampKanbanTransform, measureKanbanDragBounds };

package/dist/components/Kanban/Kanban.module.js

@@ -0,0 +1,11 @@
+import "./Kanban.css";
+// src/components/Kanban/Kanban.module.scss
+var board = "Kanban__board__zaU2B";
+var column = "Kanban__column__rmTB4";
+var card = "Kanban__card__OCYQi";
+var Kanban_module_default = {
+	board,
+	column,
+	card
+};
+export { board, card, column, Kanban_module_default as default };

package/dist/components/Kanban/index.d.ts

@@ -0,0 +1 @@
+export { Kanban, type KanbanProps, type KanbanColumnProps, type KanbanCardProps, type KanbanMoveEvent, } from './Kanban.js';

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1,63 @@
+:root {
+  --kbd-bg: var(--color-bg-muted);
+  --kbd-fg: var(--color-fg-muted);
+  --kbd-border-color: var(--color-border);
+  --kbd-border-width: var(--border-width);
+  --kbd-radius: var(--radius-sm);
+  --kbd-font-family: var(--font-family-sans);
+  --kbd-font-weight: var(--font-weight-medium);
+  --kbd-separator-fg: var(--color-fg-muted);
+  --kbd-separator-gap: var(--space-1);
+  --kbd-height-sm: 18px;
+  --kbd-padding-x-sm: var(--space-1);
+  --kbd-font-size-sm: var(--font-size-xs);
+  --kbd-min-width-sm: 18px;
+  --kbd-height-md: 24px;
+  --kbd-padding-x-md: var(--space-2);
+  --kbd-font-size-md: var(--font-size-sm);
+  --kbd-min-width-md: 24px;
+}
+
+.Kbd__kbd__kyoLP {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kbd-separator-gap);
+  vertical-align: baseline;
+}
+
+.Kbd__key__uvNcn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--kbd-padding-x-current);
+  height: var(--kbd-height-current);
+  min-width: var(--kbd-min-width-current);
+  font-family: var(--kbd-font-family);
+  font-size: var(--kbd-font-size-current);
+  font-weight: var(--kbd-font-weight);
+  color: var(--kbd-fg);
+  background: var(--kbd-bg);
+  border: var(--kbd-border-width) solid var(--kbd-border-color);
+  border-radius: var(--kbd-radius);
+  line-height: var(--line-height-none);
+}
+
+.Kbd__separator__xEkYl {
+  color: var(--kbd-separator-fg);
+  font-size: var(--kbd-font-size-current);
+  user-select: none;
+}
+
+.Kbd__kbdSizeSm__xZkXQ {
+  --kbd-height-current: var(--kbd-height-sm);
+  --kbd-padding-x-current: var(--kbd-padding-x-sm);
+  --kbd-font-size-current: var(--kbd-font-size-sm);
+  --kbd-min-width-current: var(--kbd-min-width-sm);
+}
+
+.Kbd__kbdSizeMd__LzAe0 {
+  --kbd-height-current: var(--kbd-height-md);
+  --kbd-padding-x-current: var(--kbd-padding-x-md);
+  --kbd-font-size-current: var(--kbd-font-size-md);
+  --kbd-min-width-current: var(--kbd-min-width-md);
+}

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes } from 'react';
+/**
+ * Chip height. See KbdProps#size for when to use each. Intentionally only
+ * two sizes — `'sm'` for inline-chrome (matches TopBar.Search's hotkey hint)
+ * and `'md'` for standalone shortcut UI (command-palette, shortcut sheets).
+ */
+export type KbdSize = 'sm' | 'md';
+export interface KbdProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'> {
+    /**
+     * Keys to display. Each entry renders one `<kbd>` chip. Multiple entries
+     * are joined with an inline `+` separator; a single-entry array renders
+     * no separator. Pass the literal label you want shown (`'⌘'`, `'Ctrl'`,
+     * `'Shift'`, `'K'`) — the component does NOT platform-translate.
+     */
+    keys: string[];
+    /**
+     * Visual size. `'sm'` is the inline-chrome size (18px tall — matches
+     * `TopBar.Search`'s hotkey hint). `'md'` is the standalone shortcut size
+     * (24px tall — for command-palette / shortcut-sheet UI).
+     * @default 'sm'
+     */
+    size?: KbdSize;
+    /**
+     * Accessible label for the whole shortcut, read as a single phrase by
+     * screen readers. Defaults to `keys.join(' + ')` (e.g. `'⌘ + K'`) when
+     * omitted OR empty — an empty string is not an explicit name, so it takes
+     * the default too. Override when the raw keys are unintuitive — e.g. `keys={['⌘', 'K']}`
+     * with `aria-label="Open command palette"`.
+     */
+    'aria-label'?: string;
+}
+/**
+ * Renders a keyboard shortcut as one or more `<kbd>` chips joined with an inline `+` separator.
+ * @see docs/components/Kbd.md
+ */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,35 @@
+'use client';
+import Kbd_module_default from "./Kbd.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Kbd/Kbd.tsx
+var sizeClass = {
+	sm: Kbd_module_default.kbdSizeSm,
+	md: Kbd_module_default.kbdSizeMd
+};
+/**
+* Renders a keyboard shortcut as one or more `<kbd>` chips joined with an inline `+` separator.
+* @see docs/components/Kbd.md
+*/
+var Kbd = forwardRef(function Kbd({ keys, size = "sm", "aria-label": ariaLabel, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		"aria-label": ariaLabel || keys.join(" + "),
+		className: clsx(Kbd_module_default.kbd, sizeClass[size], className),
+		children: keys.map((key, i) => /* @__PURE__ */ jsxs("span", {
+			style: { display: "contents" },
+			children: [i > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: Kbd_module_default.separator,
+				children: "+"
+			}), /* @__PURE__ */ jsx("kbd", {
+				"aria-hidden": "true",
+				className: Kbd_module_default.key,
+				children: key
+			})]
+		}, i))
+	});
+});
+export { Kbd };

package/dist/components/Kbd/Kbd.module.js

@@ -0,0 +1,15 @@
+import "./Kbd.css";
+// src/components/Kbd/Kbd.module.scss
+var kbd = "Kbd__kbd__kyoLP";
+var key = "Kbd__key__uvNcn";
+var separator = "Kbd__separator__xEkYl";
+var kbdSizeSm = "Kbd__kbdSizeSm__xZkXQ";
+var kbdSizeMd = "Kbd__kbdSizeMd__LzAe0";
+var Kbd_module_default = {
+	kbd,
+	key,
+	separator,
+	kbdSizeSm,
+	kbdSizeMd
+};
+export { Kbd_module_default as default, kbd, kbdSizeMd, kbdSizeSm, key, separator };

package/dist/components/Kbd/index.d.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd.js';
+export type { KbdProps, KbdSize } from './Kbd.js';