@burtson-labs/ui 0.8.1 → 0.9.1

package/dist/components/editor-tabs.js

@@ -0,0 +1,221 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import X from "@burtson-labs/icons/react/x";
+//#region src/components/editor-tabs.tsx
+/**
+* The strip of open files above an editor. One tab stop; Left/Right/Home/End
+* move focus, Enter or Space opens, Delete asks to close, Ctrl+Shift+PageUp
+* and PageDown move the tab. Middle-click closes. The strip scrolls when the
+* tabs overflow and keeps the active tab in view.
+*/
+function EditorTabs({ tabs, activeId, onActiveChange, onClose, onMove, actions, onTabContextMenu, className, "aria-label": ariaLabel, ...props }) {
+	const baseId = React.useId();
+	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+	const listRef = React.useRef(null);
+	const [focusedId, setFocusedId] = React.useState(null);
+	const [dragId, setDragId] = React.useState(null);
+	const [dropGap, setDropGap] = React.useState(null);
+	const dragged = React.useRef(false);
+	const dragCleanup = React.useRef(null);
+	React.useEffect(() => () => dragCleanup.current?.(), []);
+	const lastIds = React.useRef([]);
+	const hadFocus = React.useRef(false);
+	const ids = tabs.map((t) => t.id);
+	const idsKey = ids.join("\0");
+	const tabStop = (focusedId && ids.includes(focusedId) ? focusedId : null) ?? (activeId && ids.includes(activeId) ? activeId : null) ?? ids[0] ?? null;
+	React.useEffect(() => {
+		if (activeId) tabRefs.current.get(activeId)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [activeId]);
+	React.useLayoutEffect(() => {
+		if (focusedId && !ids.includes(focusedId)) {
+			const next = (activeId && ids.includes(activeId) ? activeId : null) ?? ids[Math.min(Math.max(0, lastIds.current.indexOf(focusedId)), ids.length - 1)] ?? null;
+			setFocusedId(next);
+			const active = document.activeElement;
+			if (next && hadFocus.current && (!active || active === document.body)) tabRefs.current.get(next)?.focus();
+		}
+		lastIds.current = ids;
+	}, [
+		focusedId,
+		idsKey,
+		activeId
+	]);
+	/** Which gap the pointer is over, measured from the rendered tabs. */
+	const gapAt = (clientX) => {
+		const els = Array.from(listRef.current?.querySelectorAll("[data-slot=\"editor-tab\"]") ?? []);
+		const rtl = listRef.current ? getComputedStyle(listRef.current).direction === "rtl" : false;
+		for (let i = 0; i < els.length; i++) {
+			const rect = els[i].getBoundingClientRect();
+			const mid = rect.left + rect.width / 2;
+			if (rtl ? clientX > mid : clientX < mid) return i;
+		}
+		return els.length;
+	};
+	const startDrag = (event, id) => {
+		if (!onMove || event.button !== 0) return;
+		dragCleanup.current?.();
+		dragged.current = false;
+		const downX = event.clientX;
+		const move = (e) => {
+			if (!dragged.current && Math.abs(e.clientX - downX) < 4) return;
+			if (!dragged.current) {
+				dragged.current = true;
+				setDragId(id);
+			}
+			setDropGap(gapAt(e.clientX));
+		};
+		const stop = (e) => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			window.removeEventListener("pointercancel", cancel);
+			dragCleanup.current = null;
+			if (e && dragged.current) {
+				const from = lastIds.current.indexOf(id);
+				const gap = gapAt(e.clientX);
+				const to = gap > from ? gap - 1 : gap;
+				if (from !== -1 && to !== from) onMove(id, to);
+			}
+			setDragId(null);
+			setDropGap(null);
+		};
+		const up = (e) => stop(e);
+		const cancel = () => stop(null);
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+		window.addEventListener("pointercancel", cancel);
+		dragCleanup.current = () => stop(null);
+	};
+	const focusTab = (id) => {
+		if (!id) return;
+		setFocusedId(id);
+		tabRefs.current.get(id)?.focus();
+	};
+	const onKeyDown = (event, tab) => {
+		const i = ids.indexOf(tab.id);
+		const [prev, next] = (listRef.current ? getComputedStyle(listRef.current).direction === "rtl" : false) ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+		let handled = true;
+		if (event.ctrlKey && event.shiftKey && (event.key === "PageUp" || event.key === "PageDown")) {
+			const to = event.key === "PageUp" ? i - 1 : i + 1;
+			if (onMove && to >= 0 && to < ids.length) onMove(tab.id, to);
+		} else if (event.key === prev) focusTab(ids[(i - 1 + ids.length) % ids.length]);
+		else if (event.key === next) focusTab(ids[(i + 1) % ids.length]);
+		else if (event.key === "Home") focusTab(ids[0]);
+		else if (event.key === "End") focusTab(ids[ids.length - 1]);
+		else if (event.key === "Delete" && tab.closeable !== false && onClose) onClose(tab.id);
+		else handled = false;
+		if (handled) event.preventDefault();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "editor-tabs",
+		className: cn("flex h-9 min-w-0 items-stretch border-b bg-surface-muted", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: listRef,
+			role: "tablist",
+			"aria-label": ariaLabel,
+			"aria-orientation": "horizontal",
+			className: "flex min-w-0 flex-1 items-stretch overflow-x-auto [scrollbar-width:thin]",
+			onFocus: () => hadFocus.current = true,
+			onBlur: (event) => {
+				if (!listRef.current?.contains(event.relatedTarget)) hadFocus.current = false;
+			},
+			children: tabs.map((tab, i) => {
+				const active = tab.id === activeId;
+				const closeable = tab.closeable !== false && Boolean(onClose);
+				const tabId = `${baseId}-tab-${i}`;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-slot": "editor-tab",
+					"data-state": active ? "active" : "inactive",
+					"data-dirty": tab.dirty || void 0,
+					"data-dragging": dragId === tab.id || void 0,
+					"data-drop": dragId === null ? void 0 : dropGap === i ? "before" : dropGap === tabs.length && i === tabs.length - 1 ? "after" : void 0,
+					onPointerDown: (event) => startDrag(event, tab.id),
+					onClickCapture: (event) => {
+						if (dragged.current) {
+							dragged.current = false;
+							event.stopPropagation();
+							event.preventDefault();
+						}
+					},
+					onAuxClick: (event) => {
+						if (event.button === 1 && closeable) {
+							event.preventDefault();
+							onClose?.(tab.id);
+						}
+					},
+					onContextMenu: onTabContextMenu ? (event) => onTabContextMenu(tab.id, event) : void 0,
+					className: cn("group/tab relative flex max-w-60 shrink-0 items-center border-e text-[13px] text-muted-foreground", "hover:bg-muted/60 data-[state=active]:bg-background data-[state=active]:text-foreground", "data-[state=active]:before:absolute data-[state=active]:before:inset-x-0 data-[state=active]:before:top-0 data-[state=active]:before:h-0.5 data-[state=active]:before:bg-brand data-[state=active]:before:content-[\"\"]", "data-[dragging]:opacity-50 data-[dragging]:select-none", "data-[drop=before]:shadow-[inset_2px_0_0_var(--brand)] data-[drop=after]:shadow-[inset_-2px_0_0_var(--brand)]"),
+					children: [
+						/* @__PURE__ */ jsxs("button", {
+							ref: (el) => {
+								if (el) tabRefs.current.set(tab.id, el);
+								else tabRefs.current.delete(tab.id);
+							},
+							type: "button",
+							role: "tab",
+							id: tabId,
+							"aria-selected": active,
+							"aria-controls": tab.controls,
+							"aria-describedby": tab.description ? `${tabId}-desc` : void 0,
+							title: tab.description,
+							tabIndex: tab.id === tabStop ? 0 : -1,
+							onFocus: () => setFocusedId(tab.id),
+							onClick: () => onActiveChange(tab.id),
+							onKeyDown: (event) => onKeyDown(event, tab),
+							className: cn("flex h-full min-w-0 items-center gap-1.5 ps-3 outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]", closeable ? "pe-1" : "pe-3"),
+							children: [
+								tab.icon && /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "flex shrink-0 [&_svg]:size-4",
+									children: tab.icon
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: cn("truncate", tab.preview && "italic"),
+									children: tab.label
+								}),
+								tab.dirty && /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: ", unsaved changes"
+								})
+							]
+						}),
+						tab.description && /* @__PURE__ */ jsx("span", {
+							id: `${tabId}-desc`,
+							hidden: true,
+							children: tab.description
+						}),
+						closeable ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							tabIndex: -1,
+							"aria-label": `Close ${tab.label}`,
+							title: "Close (Delete)",
+							onClick: () => onClose?.(tab.id),
+							className: "me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground outline-none hover:bg-muted hover:text-foreground",
+							children: [tab.dirty && /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2 rounded-full bg-foreground/70 group-hover/tab:hidden"
+							}), /* @__PURE__ */ jsx(X, {
+								"aria-hidden": true,
+								className: cn("size-3.5", tab.dirty ? "hidden group-hover/tab:block" : "opacity-0 group-hover/tab:opacity-100 group-data-[state=active]/tab:opacity-100 group-focus-within/tab:opacity-100")
+							})]
+						}) : tab.dirty ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "me-3 size-2 shrink-0 rounded-full bg-foreground/70"
+						}) : null
+					]
+				}, tab.id);
+			})
+		}), actions && /* @__PURE__ */ jsx("div", {
+			"data-slot": "editor-tabs-actions",
+			className: "flex shrink-0 items-center gap-0.5 px-1",
+			children: actions
+		})]
+	});
+}
+//#endregion
+export { EditorTabs };
+
+//# sourceMappingURL=editor-tabs.js.map

package/dist/components/editor-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-tabs.js","names":[],"sources":["../../src/components/editor-tabs.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface EditorTab {\n  /** Stable identity, usually the file path. */\n  id: string;\n  label: string;\n  /** Full path or context; the tooltip and the accessible description. */\n  description?: string;\n  icon?: React.ReactNode;\n  /** Unsaved changes: a dot replaces the close button until hover. */\n  dirty?: boolean;\n  /** Default true. */\n  closeable?: boolean;\n  /** A preview tab that the next opened file replaces; shown in italics. */\n  preview?: boolean;\n  /** The id of the panel this tab shows, for aria-controls. */\n  controls?: string;\n}\n\nexport interface EditorTabsProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children' | 'aria-label'\n> {\n  tabs: EditorTab[];\n  activeId: string | null;\n  onActiveChange: (id: string) => void;\n  /**\n   * A request to close. The component never removes a tab itself: for a dirty\n   * tab, ask the person (save, discard, cancel) and then update `tabs`.\n   */\n  onClose?: (id: string) => void;\n  /**\n   * Reorder by drag or Ctrl+Shift+PageUp/PageDown. `toIndex` is the new position.\n   * Dragging uses pointer events, not HTML5 drag and drop, so it also works in\n   * desktop webviews (Tauri, Electron) that intercept native drags.\n   */\n  onMove?: (id: string, toIndex: number) => void;\n  /** Required: e.g. \"Open editors\". */\n  'aria-label': string;\n  /** Right-hand slot for split, more and similar buttons. */\n  actions?: React.ReactNode;\n  /** Right-click on a tab. */\n  onTabContextMenu?: (id: string, event: React.MouseEvent) => void;\n}\n\n/**\n * The strip of open files above an editor. One tab stop; Left/Right/Home/End\n * move focus, Enter or Space opens, Delete asks to close, Ctrl+Shift+PageUp\n * and PageDown move the tab. Middle-click closes. The strip scrolls when the\n * tabs overflow and keeps the active tab in view.\n */\nfunction EditorTabs({\n  tabs,\n  activeId,\n  onActiveChange,\n  onClose,\n  onMove,\n  actions,\n  onTabContextMenu,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: EditorTabsProps) {\n  const baseId = React.useId();\n  const tabRefs = React.useRef(new Map<string, HTMLButtonElement>());\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [focusedId, setFocusedId] = React.useState<string | null>(null);\n  const [dragId, setDragId] = React.useState<string | null>(null);\n  // The gap a dragged tab would land in: 0 is before the first tab,\n  // tabs.length after the last.\n  const [dropGap, setDropGap] = React.useState<number | null>(null);\n  // Set once a press becomes a drag, so the click that ends it does nothing.\n  const dragged = React.useRef(false);\n  const dragCleanup = React.useRef<(() => void) | null>(null);\n  React.useEffect(() => () => dragCleanup.current?.(), []);\n  const lastIds = React.useRef<string[]>([]);\n  const hadFocus = React.useRef(false);\n\n  const ids = tabs.map((t) => t.id);\n  const idsKey = ids.join('\\u0000');\n  const tabStop =\n    (focusedId && ids.includes(focusedId) ? focusedId : null) ??\n    (activeId && ids.includes(activeId) ? activeId : null) ??\n    ids[0] ??\n    null;\n\n  React.useEffect(() => {\n    if (activeId)\n      tabRefs.current.get(activeId)?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n  }, [activeId]);\n\n  // After a close, keep keyboard focus in the strip: the active tab if the\n  // app picked one, else the neighbour at the closed tab's position.\n  React.useLayoutEffect(() => {\n    if (focusedId && !ids.includes(focusedId)) {\n      const next =\n        (activeId && ids.includes(activeId) ? activeId : null) ??\n        ids[Math.min(Math.max(0, lastIds.current.indexOf(focusedId)), ids.length - 1)] ??\n        null;\n      setFocusedId(next);\n      const active = document.activeElement;\n      if (next && hadFocus.current && (!active || active === document.body))\n        tabRefs.current.get(next)?.focus();\n    }\n    lastIds.current = ids;\n    // ids is derived from tabs each render; idsKey is its stable form.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedId, idsKey, activeId]);\n\n  /** Which gap the pointer is over, measured from the rendered tabs. */\n  const gapAt = (clientX: number) => {\n    const els = Array.from(\n      listRef.current?.querySelectorAll<HTMLElement>('[data-slot=\"editor-tab\"]') ?? [],\n    );\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    for (let i = 0; i < els.length; i++) {\n      const rect = els[i]!.getBoundingClientRect();\n      const mid = rect.left + rect.width / 2;\n      if (rtl ? clientX > mid : clientX < mid) return i;\n    }\n    return els.length;\n  };\n\n  const startDrag = (event: React.PointerEvent, id: string) => {\n    if (!onMove || event.button !== 0) return;\n    dragCleanup.current?.();\n    dragged.current = false;\n    const downX = event.clientX;\n    const move = (e: PointerEvent) => {\n      // A few pixels of slop so an ordinary click is not read as a drag.\n      if (!dragged.current && Math.abs(e.clientX - downX) < 4) return;\n      if (!dragged.current) {\n        dragged.current = true;\n        setDragId(id);\n      }\n      setDropGap(gapAt(e.clientX));\n    };\n    const stop = (e: PointerEvent | null) => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', cancel);\n      dragCleanup.current = null;\n      if (e && dragged.current) {\n        const from = lastIds.current.indexOf(id);\n        const gap = gapAt(e.clientX);\n        const to = gap > from ? gap - 1 : gap;\n        if (from !== -1 && to !== from) onMove(id, to);\n      }\n      setDragId(null);\n      setDropGap(null);\n    };\n    const up = (e: PointerEvent) => stop(e);\n    const cancel = () => stop(null);\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', cancel);\n    dragCleanup.current = () => stop(null);\n  };\n\n  const focusTab = (id: string | undefined) => {\n    if (!id) return;\n    setFocusedId(id);\n    tabRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, tab: EditorTab) => {\n    const i = ids.indexOf(tab.id);\n    const rtl = listRef.current ? getComputedStyle(listRef.current).direction === 'rtl' : false;\n    const [prev, next] = rtl ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];\n    let handled = true;\n    if (event.ctrlKey && event.shiftKey && (event.key === 'PageUp' || event.key === 'PageDown')) {\n      const to = event.key === 'PageUp' ? i - 1 : i + 1;\n      if (onMove && to >= 0 && to < ids.length) onMove(tab.id, to);\n    } else if (event.key === prev) focusTab(ids[(i - 1 + ids.length) % ids.length]);\n    else if (event.key === next) focusTab(ids[(i + 1) % ids.length]);\n    else if (event.key === 'Home') focusTab(ids[0]);\n    else if (event.key === 'End') focusTab(ids[ids.length - 1]);\n    else if (event.key === 'Delete' && tab.closeable !== false && onClose) onClose(tab.id);\n    else handled = false;\n    if (handled) event.preventDefault();\n  };\n\n  return (\n    <div\n      data-slot=\"editor-tabs\"\n      className={cn('flex h-9 min-w-0 items-stretch border-b bg-surface-muted', className)}\n      {...props}\n    >\n      <div\n        ref={listRef}\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className=\"flex min-w-0 flex-1 items-stretch overflow-x-auto [scrollbar-width:thin]\"\n        onFocus={() => (hadFocus.current = true)}\n        onBlur={(event) => {\n          if (!listRef.current?.contains(event.relatedTarget)) hadFocus.current = false;\n        }}\n      >\n        {tabs.map((tab, i) => {\n          const active = tab.id === activeId;\n          const closeable = tab.closeable !== false && Boolean(onClose);\n          const tabId = `${baseId}-tab-${i}`;\n          return (\n            <div\n              key={tab.id}\n              data-slot=\"editor-tab\"\n              data-state={active ? 'active' : 'inactive'}\n              data-dirty={tab.dirty || undefined}\n              data-dragging={dragId === tab.id || undefined}\n              data-drop={\n                dragId === null\n                  ? undefined\n                  : dropGap === i\n                    ? 'before'\n                    : dropGap === tabs.length && i === tabs.length - 1\n                      ? 'after'\n                      : undefined\n              }\n              onPointerDown={(event) => startDrag(event, tab.id)}\n              onClickCapture={(event) => {\n                // Swallow the click that ends a drag.\n                if (dragged.current) {\n                  dragged.current = false;\n                  event.stopPropagation();\n                  event.preventDefault();\n                }\n              }}\n              onAuxClick={(event) => {\n                if (event.button === 1 && closeable) {\n                  event.preventDefault();\n                  onClose?.(tab.id);\n                }\n              }}\n              onContextMenu={\n                onTabContextMenu ? (event) => onTabContextMenu(tab.id, event) : undefined\n              }\n              className={cn(\n                'group/tab relative flex max-w-60 shrink-0 items-center border-e text-[13px] text-muted-foreground',\n                'hover:bg-muted/60 data-[state=active]:bg-background data-[state=active]:text-foreground',\n                // The active tab's top edge carries the brand colour.\n                'data-[state=active]:before:absolute data-[state=active]:before:inset-x-0 data-[state=active]:before:top-0 data-[state=active]:before:h-0.5 data-[state=active]:before:bg-brand data-[state=active]:before:content-[\"\"]',\n                'data-[dragging]:opacity-50 data-[dragging]:select-none',\n                // Where a dragged tab will land.\n                'data-[drop=before]:shadow-[inset_2px_0_0_var(--brand)] data-[drop=after]:shadow-[inset_-2px_0_0_var(--brand)]',\n              )}\n            >\n              <button\n                ref={(el) => {\n                  if (el) tabRefs.current.set(tab.id, el);\n                  else tabRefs.current.delete(tab.id);\n                }}\n                type=\"button\"\n                role=\"tab\"\n                id={tabId}\n                aria-selected={active}\n                aria-controls={tab.controls}\n                aria-describedby={tab.description ? `${tabId}-desc` : undefined}\n                title={tab.description}\n                tabIndex={tab.id === tabStop ? 0 : -1}\n                onFocus={() => setFocusedId(tab.id)}\n                onClick={() => onActiveChange(tab.id)}\n                onKeyDown={(event) => onKeyDown(event, tab)}\n                className={cn(\n                  'flex h-full min-w-0 items-center gap-1.5 ps-3 outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]',\n                  closeable ? 'pe-1' : 'pe-3',\n                )}\n              >\n                {tab.icon && (\n                  <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n                    {tab.icon}\n                  </span>\n                )}\n                <span className={cn('truncate', tab.preview && 'italic')}>{tab.label}</span>\n                {tab.dirty && <span className=\"sr-only\">, unsaved changes</span>}\n              </button>\n              {tab.description && (\n                <span id={`${tabId}-desc`} hidden>\n                  {tab.description}\n                </span>\n              )}\n              {closeable ? (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={`Close ${tab.label}`}\n                  title=\"Close (Delete)\"\n                  onClick={() => onClose?.(tab.id)}\n                  className=\"me-1 flex size-5 shrink-0 items-center justify-center rounded-xs text-muted-foreground outline-none hover:bg-muted hover:text-foreground\"\n                >\n                  {tab.dirty && (\n                    <span\n                      aria-hidden\n                      className=\"size-2 rounded-full bg-foreground/70 group-hover/tab:hidden\"\n                    />\n                  )}\n                  <X\n                    aria-hidden\n                    className={cn(\n                      'size-3.5',\n                      tab.dirty\n                        ? 'hidden group-hover/tab:block'\n                        : 'opacity-0 group-hover/tab:opacity-100 group-data-[state=active]/tab:opacity-100 group-focus-within/tab:opacity-100',\n                    )}\n                  />\n                </button>\n              ) : tab.dirty ? (\n                <span aria-hidden className=\"me-3 size-2 shrink-0 rounded-full bg-foreground/70\" />\n              ) : null}\n            </div>\n          );\n        })}\n      </div>\n      {actions && (\n        <div data-slot=\"editor-tabs-actions\" className=\"flex shrink-0 items-center gap-0.5 px-1\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { EditorTabs };\n"],"mappings":"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"}

package/dist/components/menubar.d.ts

@@ -0,0 +1,30 @@
+import { Menubar as MenubarPrimitive } from 'radix-ui';
+import * as React from 'react';
+/**
+ * An application menu bar (File, Edit, View). Left/Right move between menus,
+ * Down opens one, and an open menu follows the pointer across triggers. Rows
+ * match DropdownMenu and ContextMenu.
+ */
+declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
+declare function MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
+declare function MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>): React.JSX.Element;
+declare function MenubarContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): React.JSX.Element;
+declare function MenubarItem({ className, inset, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): React.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): React.JSX.Element;
+declare function MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): React.JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>): React.JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): React.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>): React.JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>): React.JSX.Element;
+export { Menubar, MenubarMenu, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, };

package/dist/components/menubar.js

@@ -0,0 +1,140 @@
+import { cn } from "../lib/utils.js";
+import { menuItemClasses, surfaceClasses } from "./popover.js";
+import { Menubar } from "radix-ui";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRight from "@burtson-labs/icons/react/chevron-right";
+import Check from "@burtson-labs/icons/react/check";
+//#region src/components/menubar.tsx
+/**
+* An application menu bar (File, Edit, View). Left/Right move between menus,
+* Down opens one, and an open menu follows the pointer across triggers. Rows
+* match DropdownMenu and ContextMenu.
+*/
+function Menubar$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Root, {
+		"data-slot": "menubar",
+		className: cn("flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5", className),
+		...props
+	});
+}
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(Menubar.Menu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Trigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted", className),
+		...props
+	});
+}
+function MenubarGroup(props) {
+	return /* @__PURE__ */ jsx(Menubar.Group, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(Menubar.Content, {
+		"data-slot": "menubar-content",
+		align,
+		sideOffset,
+		className: cn(surfaceClasses, "max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
+		...props
+	}) });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Item, {
+		"data-slot": "menubar-item",
+		"data-inset": inset || void 0,
+		"data-variant": variant,
+		className: cn(menuItemClasses, "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive", className),
+		...props
+	});
+}
+function MenubarCheckboxItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		className: cn(menuItemClasses, "pl-8", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
+				className: "size-4 text-foreground",
+				"aria-hidden": true
+			}) })
+		}), children]
+	});
+}
+function MenubarRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menubar.RadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		className: cn(menuItemClasses, "pl-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Label, {
+		"data-slot": "menubar-label",
+		"data-inset": inset || void 0,
+		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Separator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+function MenubarSub(props) {
+	return /* @__PURE__ */ jsx(Menubar.Sub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.SubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset || void 0,
+		className: cn(menuItemClasses, "data-[state=open]:bg-muted", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, {
+			className: "ml-auto size-4",
+			"aria-hidden": true
+		})]
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(Menubar.SubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1", className),
+		...props
+	}) });
+}
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

package/dist/components/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Menubar","MenubarPrimitive","itemClasses"],"sources":["../../src/components/menubar.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { Menubar as MenubarPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * An application menu bar (File, Edit, View). Left/Right move between menus,\n * Down opens one, and an open menu follows the pointer across triggers. Rows\n * match DropdownMenu and ContextMenu.\n */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn('flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        'flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarContent({\n  className,\n  align = 'start',\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-muted', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.SubContent\n        data-slot=\"menubar-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"],"mappings":"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"}

package/dist/components/onboarding-checklist.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface ChecklistItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Set from real app events (a repo opened, a provider tested), never from a click on the list. */
+    done: boolean;
+    /** A button or link that starts the task. Hidden once done. */
+    action?: React.ReactNode;
+}
+export interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    items: ChecklistItem[];
+    /** Shows a close button. Persist the dismissal yourself. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /** Replaces the list once every item is done. */
+    complete?: React.ReactNode;
+}
+/**
+ * A short list of first tasks with progress. The app decides when each task
+ * is done and whether the list shows at all; this renders it.
+ */
+declare function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel, complete, className, ...props }: OnboardingChecklistProps): React.JSX.Element;
+export { OnboardingChecklist };

package/dist/components/onboarding-checklist.js

@@ -0,0 +1,106 @@
+import { cn } from "../lib/utils.js";
+import { Progress } from "./progress.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import X from "@burtson-labs/icons/react/x";
+import CheckCircle from "@burtson-labs/icons/react/check-circle";
+import CircleDashed from "@burtson-labs/icons/react/circle-dashed";
+//#region src/components/onboarding-checklist.tsx
+/**
+* A short list of first tasks with progress. The app decides when each task
+* is done and whether the list shows at all; this renders it.
+*/
+function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel = "Dismiss checklist", complete, className, ...props }) {
+	const titleId = React.useId();
+	const done = items.filter((i) => i.done).length;
+	const allDone = items.length > 0 && done === items.length;
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "onboarding-checklist",
+		"aria-labelledby": titleId,
+		className: cn("rounded-lg border bg-card p-4 text-[13px] text-card-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "text-sm font-semibold",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-muted-foreground",
+						children: description
+					})]
+				}), onDismiss && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": dismissLabel,
+					onClick: onDismiss,
+					className: "-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]",
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						className: "size-4"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx(Progress, {
+					value: done,
+					max: Math.max(items.length, 1),
+					"aria-label": `${done} of ${items.length} done`,
+					className: "flex-1"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+					"aria-hidden": true,
+					children: [
+						done,
+						"/",
+						items.length
+					]
+				})]
+			}),
+			allDone && complete ? /* @__PURE__ */ jsx("div", {
+				className: "mt-3",
+				children: complete
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "mt-3 flex flex-col gap-1",
+				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+					"data-slot": "onboarding-checklist-item",
+					"data-state": item.done ? "done" : "todo",
+					className: "flex items-start gap-2.5 rounded-md px-1 py-1.5",
+					children: [
+						item.done ? /* @__PURE__ */ jsx(CheckCircle, {
+							"aria-hidden": true,
+							className: "mt-px size-4 shrink-0 text-success"
+						}) : /* @__PURE__ */ jsx(CircleDashed, {
+							"aria-hidden": true,
+							className: "mt-px size-4 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: cn("font-medium", item.done && "text-muted-foreground line-through"),
+								children: [item.title, /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: item.done ? ", done" : ", not done"
+								})]
+							}), item.description && !item.done && /* @__PURE__ */ jsx("p", {
+								className: "mt-0.5 text-muted-foreground",
+								children: item.description
+							})]
+						}),
+						item.action && !item.done && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0",
+							children: item.action
+						})
+					]
+				}, item.id))
+			})
+		]
+	});
+}
+//#endregion
+export { OnboardingChecklist };
+
+//# sourceMappingURL=onboarding-checklist.js.map

package/dist/components/onboarding-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/components/onboarding-checklist.tsx"],"sourcesContent":["import CheckCircle from '@burtson-labs/icons/react/check-circle';\nimport CircleDashed from '@burtson-labs/icons/react/circle-dashed';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Progress } from './progress';\n\nexport interface ChecklistItem {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Set from real app events (a repo opened, a provider tested), never from a click on the list. */\n  done: boolean;\n  /** A button or link that starts the task. Hidden once done. */\n  action?: React.ReactNode;\n}\n\nexport interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: ChecklistItem[];\n  /** Shows a close button. Persist the dismissal yourself. */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  /** Replaces the list once every item is done. */\n  complete?: React.ReactNode;\n}\n\n/**\n * A short list of first tasks with progress. The app decides when each task\n * is done and whether the list shows at all; this renders it.\n */\nfunction OnboardingChecklist({\n  title,\n  description,\n  items,\n  onDismiss,\n  dismissLabel = 'Dismiss checklist',\n  complete,\n  className,\n  ...props\n}: OnboardingChecklistProps) {\n  const titleId = React.useId();\n  const done = items.filter((i) => i.done).length;\n  const allDone = items.length > 0 && done === items.length;\n  return (\n    <section\n      data-slot=\"onboarding-checklist\"\n      aria-labelledby={titleId}\n      className={cn('rounded-lg border bg-card p-4 text-[13px] text-card-foreground', className)}\n      {...props}\n    >\n      <div className=\"flex items-start gap-3\">\n        <div className=\"min-w-0 flex-1\">\n          <h2 id={titleId} className=\"text-sm font-semibold\">\n            {title}\n          </h2>\n          {description && <p className=\"mt-0.5 text-muted-foreground\">{description}</p>}\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            aria-label={dismissLabel}\n            onClick={onDismiss}\n            className=\"-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]\"\n          >\n            <X aria-hidden className=\"size-4\" />\n          </button>\n        )}\n      </div>\n      <div className=\"mt-3 flex items-center gap-3\">\n        <Progress\n          value={done}\n          max={Math.max(items.length, 1)}\n          aria-label={`${done} of ${items.length} done`}\n          className=\"flex-1\"\n        />\n        <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\" aria-hidden>\n          {done}/{items.length}\n        </span>\n      </div>\n      {allDone && complete ? (\n        <div className=\"mt-3\">{complete}</div>\n      ) : (\n        <ul className=\"mt-3 flex flex-col gap-1\">\n          {items.map((item) => (\n            <li\n              key={item.id}\n              data-slot=\"onboarding-checklist-item\"\n              data-state={item.done ? 'done' : 'todo'}\n              className=\"flex items-start gap-2.5 rounded-md px-1 py-1.5\"\n            >\n              {item.done ? (\n                <CheckCircle aria-hidden className=\"mt-px size-4 shrink-0 text-success\" />\n              ) : (\n                <CircleDashed aria-hidden className=\"mt-px size-4 shrink-0 text-muted-foreground\" />\n              )}\n              <div className=\"min-w-0 flex-1\">\n                <p className={cn('font-medium', item.done && 'text-muted-foreground line-through')}>\n                  {item.title}\n                  <span className=\"sr-only\">{item.done ? ', done' : ', not done'}</span>\n                </p>\n                {item.description && !item.done && (\n                  <p className=\"mt-0.5 text-muted-foreground\">{item.description}</p>\n                )}\n              </div>\n              {item.action && !item.done && <div className=\"shrink-0\">{item.action}</div>}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n\nexport { OnboardingChecklist };\n"],"mappings":";;;;;;;;;;;;AAkCA,SAAS,oBAAoB,EAC3B,OACA,aACA,OACA,WACA,eAAe,qBACf,UACA,WACA,GAAG,SACwB;CAC3B,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,OAAO,MAAM,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC;CACzC,MAAM,UAAU,MAAM,SAAS,KAAK,SAAS,MAAM;CACnD,OACE,qBAAC,WAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACxB,UAAA;KACC,CAAA,GACH,eAAe,oBAAC,KAAD;MAAG,WAAU;MAAgC,UAAA;KAAe,CAAA,CACzE;IACJ,CAAA,GAAA,aACC,oBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,SAAS;KACT,WAAU;KAEV,UAAA,oBAAC,GAAD;MAAG,eAAA;MAAY,WAAU;KAAU,CAAA;IAC7B,CAAA,CAEP;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,OAAO;KACP,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;KAC7B,cAAY,GAAG,KAAK,MAAM,MAAM,OAAO;KACvC,WAAU;IACX,CAAA,GACD,qBAAC,QAAD;KAAM,WAAU;KAAsD,eAAA;KAAtE,UAAA;MACG;MAAK;MAAE,MAAM;KACV;IACH,CAAA,CAAA;;GACJ,WAAW,WACV,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAc,CAAA,IAErC,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;KAEE,aAAU;KACV,cAAY,KAAK,OAAO,SAAS;KACjC,WAAU;KAJZ,UAAA;MAMG,KAAK,OACJ,oBAAC,aAAD;OAAa,eAAA;OAAY,WAAU;MAAsC,CAAA,IAEzE,oBAAC,cAAD;OAAc,eAAA;OAAY,WAAU;MAA+C,CAAA;MAErF,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,KAAD;QAAG,WAAW,GAAG,eAAe,KAAK,QAAQ,oCAAoC;QAAjF,UAAA,CACG,KAAK,OACN,oBAAC,QAAD;SAAM,WAAU;SAAW,UAAA,KAAK,OAAO,WAAW;QAAmB,CAAA,CACpE;OACF,CAAA,GAAA,KAAK,eAAe,CAAC,KAAK,QACzB,oBAAC,KAAD;QAAG,WAAU;QAAgC,UAAA,KAAK;OAAe,CAAA,CAEhE;;MACJ,KAAK,UAAU,CAAC,KAAK,QAAQ,oBAAC,OAAD;OAAK,WAAU;OAAY,UAAA,KAAK;MAAY,CAAA;KACxE;IApBG,GAAA,KAAK,EAoBR,CACL;GACC,CAAA;EAEC;;AAEb"}

package/dist/components/popover.d.ts

@@ -5,6 +5,8 @@ import * as React from 'react';
  * with a strong border, and the one place a heavy shadow is allowed.
  */
 export declare const surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
+/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
+export declare const menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;

package/dist/components/popover.js

@@ -8,6 +8,8 @@ import { jsx } from "react/jsx-runtime";
 * with a strong border, and the one place a heavy shadow is allowed.
 */
 var surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
+/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
+var menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 function Popover$1(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
@@ -36,6 +38,6 @@ function PopoverContent({ className, align = "center", sideOffset = 6, ...props
 	}) });
 }
 //#endregion
-export { Popover$1 as Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses };
+export { Popover$1 as Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses };
 
 //# sourceMappingURL=popover.js.map