@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/tabs/tabs.mjs

@@ -0,0 +1,528 @@
+import { tv } from "../../lib/tv.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
+import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
+import { useDragSensors } from "../drag/drag-sensors.mjs";
+import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
+import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+const tabs = tv({
+	slots: {
+		root: ["w-full"],
+		list: [
+			"relative isolate flex w-max max-w-full",
+			"overscroll-contain whitespace-nowrap",
+			"scrollbar-none [&::-webkit-scrollbar]:hidden",
+			"mask-fade-x"
+		],
+		background: ["", "hidden"],
+		tab: [
+			"relative z-10 flex shrink-0 cursor-pointer touch-manipulation select-none [-webkit-touch-callout:none] items-center gap-1.5 whitespace-nowrap outline-none",
+			"data-[reorderable=true]:cursor-pointer data-[dragging-source=true]:cursor-grabbing",
+			"font-sans text-callout font-semibold text-foreground-muted",
+			"transition-[background-color,box-shadow,color] duration-100 ease-out",
+			"after:absolute after:content-['']",
+			"focus-visible:shadow-focus",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg:not([class*='size-'])]:size-4",
+			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled"
+		],
+		content: ["relative z-10 inline-flex items-center gap-[inherit]"],
+		label: [""],
+		panel: ["outline-none"],
+		indicator: ["", "hidden"]
+	},
+	variants: {
+		variant: {
+			default: {
+				list: ["gap-0.5"],
+				tab: [
+					"h-8 justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
+					"after:inset-x-0 after:-inset-y-1.5",
+					"hover:bg-fill-medium active:bg-fill-medium",
+					"data-active:border-sticker-ink data-active:bg-selected data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
+					"data-active:active:overlay-sticker-medium",
+					"data-disabled:bg-transparent"
+				]
+			},
+			underline: {
+				list: ["gap-5"],
+				tab: [
+					"h-11 justify-center rounded-none border-0 bg-transparent px-0",
+					"after:inset-y-0 after:-inset-x-2.5",
+					"hover:text-foreground active:text-foreground",
+					"data-active:text-foreground"
+				]
+			}
+		},
+		placement: {
+			top: { list: ["items-center overflow-x-auto overflow-y-hidden", "data-[sorting=true]:overflow-x-hidden"] },
+			bottom: {
+				root: "flex flex-col",
+				list: [
+					"order-last",
+					"items-center overflow-x-auto overflow-y-hidden",
+					"data-[sorting=true]:overflow-x-hidden"
+				]
+			},
+			left: {
+				root: "flex items-start",
+				panel: "min-w-0 flex-1",
+				list: ["flex-col items-stretch overflow-x-hidden overflow-y-auto", "data-[sorting=true]:overflow-y-hidden"],
+				tab: ["justify-start"]
+			},
+			right: {
+				root: "flex items-start",
+				list: [
+					"order-last",
+					"flex-col items-stretch overflow-x-hidden overflow-y-auto",
+					"data-[sorting=true]:overflow-y-hidden"
+				],
+				panel: "min-w-0 flex-1",
+				tab: ["justify-start"]
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		placement: "top"
+	},
+	compoundVariants: [
+		{
+			variant: "underline",
+			placement: "top",
+			class: { tab: "data-active:shadow-[inset_0_-2px_0_var(--foreground)]" }
+		},
+		{
+			variant: "underline",
+			placement: "bottom",
+			class: { tab: "data-active:shadow-[inset_0_2px_0_var(--foreground)]" }
+		},
+		{
+			variant: "underline",
+			placement: "left",
+			class: {
+				list: "gap-0 border-r border-line-seam",
+				tab: "h-9 px-4 data-active:shadow-[inset_-2px_0_0_var(--foreground)]"
+			}
+		},
+		{
+			variant: "underline",
+			placement: "right",
+			class: {
+				list: "gap-0 border-l border-line-seam",
+				tab: "h-9 px-4 data-active:shadow-[inset_2px_0_0_var(--foreground)]"
+			}
+		}
+	]
+});
+const TabsPlacementContext = createContext("top");
+const TabsReorderContext = createContext({ enabled: false });
+const TabsValueContext = createContext(void 0);
+const TabsListVariantContext = createContext("default");
+function Tabs$1({ value, defaultValue, onValueChange, placement = "top", orientation, className, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const resolvedValue = value ?? uncontrolledValue;
+	const { root } = tabs({ placement });
+	const handleValueChange = useCallback((nextValue, eventDetails) => {
+		if (nextValue == null) return;
+		const typedValue = String(nextValue);
+		if (value === void 0) setUncontrolledValue(typedValue);
+		onValueChange?.(typedValue, eventDetails);
+	}, [value, onValueChange]);
+	return /* @__PURE__ */ jsx(TabsPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ jsx(TabsValueContext.Provider, {
+			value: resolvedValue == null ? void 0 : String(resolvedValue),
+			children: /* @__PURE__ */ jsx(Tabs.Root, {
+				orientation: orientation ?? (placement === "left" || placement === "right" ? "vertical" : "horizontal"),
+				value,
+				defaultValue,
+				onValueChange: handleValueChange,
+				"data-slot": "tabs",
+				"data-placement": placement,
+				className: root({ className }),
+				...props
+			})
+		})
+	});
+}
+/**
+* A horizontal tab row that has more tabs than room: it scrolls by itself
+* (its scrollbar hidden), a vertical mouse wheel scrolls it sideways, it marks
+* which side holds hidden tabs (`data-overflow="start" | "end" | "both"`, for
+* the edge fade), and it keeps the selected tab in view.
+*/
+function useTabsRowOverflow(enabled) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const row = ref.current;
+		if (!enabled || !row) return;
+		const update = () => {
+			const max = row.scrollWidth - row.clientWidth;
+			const start = row.scrollLeft > 1;
+			const end = max > 1 && row.scrollLeft < max - 1;
+			const next = start && end ? "both" : start ? "start" : end ? "end" : null;
+			if (next) row.setAttribute("data-overflow", next);
+			else row.removeAttribute("data-overflow");
+		};
+		const revealActive = () => {
+			const active = row.querySelector("[data-slot=tabs-tab][data-active]");
+			if (!active || row.scrollWidth <= row.clientWidth) return;
+			const inset = parseFloat(getComputedStyle(row).paddingLeft) || 0;
+			const left = active.offsetLeft - inset;
+			const right = active.offsetLeft + active.offsetWidth + inset - row.clientWidth;
+			if (left < row.scrollLeft) row.scrollLeft = left;
+			else if (right > row.scrollLeft) row.scrollLeft = right;
+		};
+		const onWheel = (event) => {
+			if (row.scrollWidth <= row.clientWidth) return;
+			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+			const before = row.scrollLeft;
+			row.scrollLeft += event.deltaY;
+			if (row.scrollLeft !== before) event.preventDefault();
+		};
+		revealActive();
+		update();
+		row.addEventListener("scroll", update, { passive: true });
+		row.addEventListener("wheel", onWheel, { passive: false });
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		resize?.observe(row);
+		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+			revealActive();
+			update();
+		});
+		mutations?.observe(row, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["data-active"]
+		});
+		return () => {
+			row.removeEventListener("scroll", update);
+			row.removeEventListener("wheel", onWheel);
+			resize?.disconnect();
+			mutations?.disconnect();
+		};
+	}, [enabled]);
+	return ref;
+}
+function TabsList({ className, children, variant = "default", ref, ...props }) {
+	const placement = use(TabsPlacementContext);
+	const { list } = tabs({
+		variant,
+		placement
+	});
+	const overflowRef = useTabsRowOverflow(placement === "top" || placement === "bottom");
+	const listRef = useCallback((node) => {
+		overflowRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [overflowRef, ref]);
+	return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsx(Tabs.List, {
+			ref: listRef,
+			"data-slot": "tabs-list",
+			"data-variant": variant,
+			"data-placement": placement,
+			className: list({ className }),
+			...props,
+			children
+		})
+	});
+}
+/** What people call a tab: its `aria-label`, or its text. */
+function tabName(node) {
+	if (!node) return "";
+	return (node.getAttribute("aria-label") ?? node.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+/** What people call the row a tab is in: the tab list's accessible name, or nothing. */
+function tabListName(node) {
+	const list = node?.closest("[role=tablist]");
+	if (!list) return "";
+	const label = list.getAttribute("aria-label");
+	if (label) return label.trim();
+	return (list.getAttribute("aria-labelledby")?.split(/\s+/).filter(Boolean) ?? []).map((id) => list.ownerDocument.getElementById(id)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+}
+/**
+* A tab is said by its name, at its position in the row: a drop on a tab
+* takes its place, and with nothing under the hand the tab is home. Read
+* when dnd-kit announces, never while rendering.
+*/
+function tabAnnouncementSource(positions, nodes) {
+	return {
+		name: (id) => tabName(nodes.get(String(id))),
+		place: (id, overId) => {
+			const index = positions.get(String(overId ?? id));
+			if (index == null) return null;
+			return {
+				place: tabListName(nodes.get(String(id))),
+				position: index + 1,
+				count: positions.size
+			};
+		}
+	};
+}
+function SortableTabsList({ value, onReorder, onDragStart, messages, container, children, variant = "default", ...props }) {
+	const [activeId, setActiveId] = useState(void 0);
+	const placement = use(TabsPlacementContext);
+	const dndContextId = useId();
+	const sensors = useDragSensors();
+	const [copies] = useState(() => /* @__PURE__ */ new Map());
+	const [nodes] = useState(() => /* @__PURE__ */ new Map());
+	const liftContainer = useLiftContainer(container);
+	const selectedValue = use(TabsValueContext);
+	const { tab: tabClassName, content: contentClassName } = tabs({
+		variant,
+		placement
+	});
+	const tabIds = useMemo(() => value.map(String), [value]);
+	const [positions] = useState(() => /* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		positions.clear();
+		tabIds.forEach((id, index) => positions.set(id, index));
+	}, [positions, tabIds]);
+	const accessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: createDragAnnouncements(tabAnnouncementSource(positions, nodes), messages)
+	}), [
+		messages,
+		nodes,
+		positions
+	]);
+	const reorderContext = useMemo(() => ({
+		enabled: true,
+		activeId,
+		copies,
+		nodes
+	}), [
+		activeId,
+		copies,
+		nodes
+	]);
+	const { onKeyDown: onListKeyDown, ...listProps } = props;
+	const handleListKeyDown = useCallback((event) => {
+		onListKeyDown?.(event);
+		if (activeId !== void 0) event.preventBaseUIHandler?.();
+	}, [activeId, onListKeyDown]);
+	const handleDragStart = useCallback(({ active }) => {
+		setActiveId(String(active.id));
+		onDragStart?.(String(active.id));
+	}, [onDragStart]);
+	const handleDragCancel = useCallback(() => {
+		setActiveId(void 0);
+	}, []);
+	const handleDragEnd = useCallback(({ active, over }) => {
+		setActiveId(void 0);
+		if (!over || active.id === over.id) return;
+		const oldIndex = tabIds.indexOf(String(active.id));
+		const newIndex = tabIds.indexOf(String(over.id));
+		if (oldIndex === -1 || newIndex === -1) return;
+		onReorder(arrayMove([...value], oldIndex, newIndex));
+	}, [
+		onReorder,
+		tabIds,
+		value
+	]);
+	return /* @__PURE__ */ jsxs(DndContext, {
+		id: dndContextId,
+		accessibility,
+		autoScroll: false,
+		sensors,
+		collisionDetection: closestCenter,
+		onDragStart: handleDragStart,
+		onDragCancel: handleDragCancel,
+		onDragEnd: handleDragEnd,
+		children: [/* @__PURE__ */ jsx(SortableContext, {
+			items: tabIds,
+			strategy: placement === "left" || placement === "right" ? verticalListSortingStrategy : horizontalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
+				value: reorderContext,
+				children: /* @__PURE__ */ jsx(TabsList, {
+					variant,
+					...listProps,
+					onKeyDown: handleListKeyDown,
+					"data-sorting": activeId ? "true" : void 0,
+					children
+				})
+			})
+		}), /* @__PURE__ */ jsx(DragLift, {
+			className: "rounded-control",
+			container: liftContainer,
+			children: activeId === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "tabs-tab",
+				"data-active": selectedValue === activeId ? "" : void 0,
+				className: tabClassName({ className: "pointer-events-none size-full" }),
+				children: /* @__PURE__ */ jsx("span", {
+					"data-slot": "tabs-tab-content",
+					className: contentClassName(),
+					children: copies.get(activeId)
+				})
+			})
+		})]
+	});
+}
+function TabsTab({ value, ...props }) {
+	return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		...props
+	});
+}
+function SortableTabsTab({ value, ...props }) {
+	const reorder = use(TabsReorderContext);
+	const activeValue = use(TabsValueContext);
+	const placement = use(TabsPlacementContext);
+	const siblingTransition = useDragSiblingTransition();
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging, index, overIndex } = useSortable({
+		id: value,
+		disabled: !reorder.enabled,
+		transition: siblingTransition
+	});
+	const isDraggingActive = isDragging && activeValue === String(value);
+	const home = overIndex < 0 || overIndex === index;
+	const copies = reorder.copies;
+	const key = String(value);
+	const { children } = props;
+	useLayoutEffect(() => {
+		if (!copies) return;
+		copies.set(key, children);
+		return () => {
+			copies.delete(key);
+		};
+	}, [
+		copies,
+		key,
+		children
+	]);
+	const nodes = reorder.nodes;
+	const sortableRef = useCallback((node) => {
+		setNodeRef(node);
+		if (!nodes) return;
+		if (node) nodes.set(key, node);
+		else nodes.delete(key);
+	}, [
+		setNodeRef,
+		nodes,
+		key
+	]);
+	const baseStyle = typeof props.style === "function" ? void 0 : props.style;
+	const vertical = placement === "left" || placement === "right";
+	const translate = vertical ? transform?.y : transform?.x;
+	const style = useMemo(() => ({
+		...baseStyle,
+		transform: translate === void 0 ? void 0 : vertical ? `translate3d(0, ${translate}px, 0)` : `translate3d(${translate}px, 0, 0)`,
+		transition,
+		zIndex: isDragging ? 20 : baseStyle?.zIndex,
+		cursor: isDragging ? "grabbing" : "pointer",
+		...isDragging && !home ? PLACE_STYLE : null
+	}), [
+		baseStyle,
+		vertical,
+		translate,
+		transition,
+		isDragging,
+		home
+	]);
+	const { onKeyDown: onTabKeyDown } = props;
+	const { onKeyDown: onSortableKeyDown, ...sortableListeners } = listeners ?? {};
+	const handleKeyDown = useCallback((event) => {
+		onTabKeyDown?.(event);
+		if (reorder.activeId !== void 0) event.preventBaseUIHandler?.();
+		onSortableKeyDown?.(event);
+	}, [
+		onTabKeyDown,
+		onSortableKeyDown,
+		reorder.activeId
+	]);
+	if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		...props
+	});
+	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
+	return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		sortableRef,
+		...props,
+		"data-dragging-active": isDraggingActive ? "true" : void 0,
+		"data-dragging-source": isDragging ? "true" : void 0,
+		"data-drag-origin": isDragging && home ? "" : void 0,
+		"data-reorderable": "true",
+		style,
+		...sortableAttributes,
+		...sortableListeners,
+		onKeyDown: handleKeyDown,
+		dropPlace: isDragging && !home
+	});
+}
+/** The lifted tab's slot away from home: none of the tab's own look, under the dashed place. */
+const PLACE_STYLE = {
+	backgroundColor: "transparent",
+	borderColor: "transparent",
+	boxShadow: "none"
+};
+function TabsTabButton({ value, sortableRef, dropPlace = false, className, children, ref, ...props }) {
+	const variant = use(TabsListVariantContext);
+	const placement = use(TabsPlacementContext);
+	const { content, tab } = tabs({
+		variant,
+		placement
+	});
+	const tapRef = useTapActivation();
+	const [setRef] = useMergedRef(sortableRef, tapRef, ref);
+	return /* @__PURE__ */ jsxs(Tabs.Tab, {
+		ref: setRef,
+		value,
+		"data-slot": "tabs-tab",
+		className: tab({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "tabs-tab-content",
+			className: content({ className: dropPlace ? "invisible" : void 0 }),
+			children
+		}), dropPlace ? /* @__PURE__ */ jsx(DropPlaceholder, { className: "absolute inset-0 z-10 rounded-control" }) : null]
+	});
+}
+function TabsLabel({ className, ...props }) {
+	const { label } = tabs();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tabs-label",
+		className: label({ className }),
+		...props
+	});
+}
+function TabsPanel({ className, ...props }) {
+	const placement = use(TabsPlacementContext);
+	const { panel } = tabs({ placement });
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-panel",
+		className: panel({ className }),
+		...props
+	});
+}
+function useOrderedTabs(items, storedOrder) {
+	return useMemo(() => reconcileTabOrder(items, storedOrder), [items, storedOrder]);
+}
+function reconcileTabOrder(items, order) {
+	const byId = new Map(items.map((item) => [item.id, item]));
+	const next = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const id of order) {
+		const item = byId.get(id);
+		if (!item || seen.has(item.id)) continue;
+		next.push(item);
+		seen.add(item.id);
+	}
+	for (const item of items) {
+		if (seen.has(item.id)) continue;
+		next.push(item);
+		seen.add(item.id);
+	}
+	return next;
+}
+//#endregion
+export { SortableTabsList, SortableTabsTab, Tabs$1 as Tabs, TabsLabel, TabsList, TabsPanel, TabsTab, useOrderedTabs };

package/dist/components/task-board/index.d.mts

@@ -0,0 +1,2 @@
+import { TaskBoardColumn, TaskBoardColumnBadge, TaskBoardColumnBadgeProps, TaskBoardColumnChevron, TaskBoardColumnChevronProps, TaskBoardColumnCount, TaskBoardColumnCountProps, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, TaskBoardColumnEmptyAllowedProps, TaskBoardColumnEmptyBlocked, TaskBoardColumnEmptyBlockedProps, TaskBoardColumnEmptyIdle, TaskBoardColumnEmptyIdleProps, TaskBoardColumnEmptyProps, TaskBoardColumnHeading, TaskBoardColumnHeadingProps, TaskBoardColumnItems, TaskBoardColumnItemsProps, TaskBoardColumnPanel, TaskBoardColumnPanelProps, TaskBoardColumnProps, TaskBoardColumnTrigger, TaskBoardColumnTriggerProps, TaskBoardRoot, TaskBoardRootProps } from "./task-board.mjs";
+export { TaskBoardColumn, TaskBoardColumnBadge, type TaskBoardColumnBadgeProps, TaskBoardColumnChevron, type TaskBoardColumnChevronProps, TaskBoardColumnCount, type TaskBoardColumnCountProps, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, type TaskBoardColumnEmptyAllowedProps, TaskBoardColumnEmptyBlocked, type TaskBoardColumnEmptyBlockedProps, TaskBoardColumnEmptyIdle, type TaskBoardColumnEmptyIdleProps, type TaskBoardColumnEmptyProps, TaskBoardColumnHeading, type TaskBoardColumnHeadingProps, TaskBoardColumnItems, type TaskBoardColumnItemsProps, TaskBoardColumnPanel, type TaskBoardColumnPanelProps, type TaskBoardColumnProps, TaskBoardColumnTrigger, type TaskBoardColumnTriggerProps, TaskBoardRoot, type TaskBoardRootProps };

package/dist/components/task-board/task-board-column.recipe.mjs

@@ -0,0 +1,46 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/task-board/task-board-column.recipe.ts
+const taskBoardColumn = tv({ slots: {
+	root: [
+		"group flex shrink-0 self-start flex-col",
+		"w-[232px] grow rounded-container p-0",
+		"data-[drop-collapsed=true]:data-[drop-state=allowed]:[outline:1.5px_dashed_var(--line-strong)] data-[drop-collapsed=true]:data-[drop-state=allowed]:outline-offset-4"
+	],
+	trigger: [
+		"group flex w-full touch-manipulation items-center justify-between text-left outline-none",
+		"min-h-8 gap-2 rounded-control",
+		"font-sans text-footnote font-bold text-foreground-muted",
+		"data-[panel-open]:mb-2",
+		"focus-visible:shadow-focus"
+	],
+	heading: ["flex min-w-0 items-center", "gap-2"],
+	badge: [
+		"inline-flex items-center gap-2 p-0",
+		"font-sans text-footnote font-bold text-foreground-muted",
+		"[&>svg]:shrink-0"
+	],
+	count: ["font-mono text-mono-meta font-normal text-foreground-hint"],
+	chevron: [
+		"inline-flex shrink-0 -rotate-90 items-center transition-transform",
+		"[&_svg]:size-3.5",
+		"group-data-panel-open:rotate-0",
+		"motion-reduce:transition-none",
+		"text-foreground-hint",
+		"group-hover:text-foreground"
+	],
+	panel: ["data-ending-style:hidden"],
+	items: ["flex flex-col", "gap-2"],
+	empty: [
+		"px-3",
+		"group-data-[drop-state=allowed]:hidden",
+		"flex min-h-16 items-center justify-center py-3",
+		"rounded-container border border-dashed border-line-seam",
+		"text-center text-footnote text-foreground-hint",
+		"group-data-[drop-state=blocked]:text-foreground-muted"
+	],
+	emptyIdle: ["group-data-[drop-state=allowed]:hidden group-data-[drop-state=blocked]:hidden"],
+	emptyAllowed: ["hidden group-data-[drop-state=allowed]:block"],
+	emptyBlocked: ["hidden group-data-[drop-state=blocked]:block"]
+} });
+//#endregion
+export { taskBoardColumn };

package/dist/components/task-board/task-board.d.mts

@@ -0,0 +1,40 @@
+import { TaskStatusId } from "../tasks/task-status.recipe.mjs";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/task-board/task-board.d.ts
+export type TaskBoardRootProps = useRender.ComponentProps<"div">;
+export declare function TaskBoardRoot({ className, render, ...props }: TaskBoardRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnProps = Omit<ComponentProps<typeof Collapsible.Root>, "className"> & {
+  className?: string;
+};
+export declare function TaskBoardColumn({ className, render, ...props }: TaskBoardColumnProps): import("react").JSX.Element;
+export type TaskBoardColumnTriggerProps = Omit<ComponentProps<typeof Collapsible.Trigger>, "className"> & {
+  className?: string;
+};
+export declare function TaskBoardColumnTrigger({ className, ...props }: TaskBoardColumnTriggerProps): import("react").JSX.Element;
+export type TaskBoardColumnHeadingProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnHeading({ className, render, ...props }: TaskBoardColumnHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnBadgeProps = useRender.ComponentProps<"span"> & {
+  status: TaskStatusId;
+};
+export declare function TaskBoardColumnBadge({ status, children, className, render, ...props }: TaskBoardColumnBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnCountProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnCount({ className, render, ...props }: TaskBoardColumnCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnChevronProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnChevron({ className, render, ...props }: TaskBoardColumnChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnPanelProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
+  className?: string;
+};
+export declare function TaskBoardColumnPanel({ className, ...props }: TaskBoardColumnPanelProps): import("react").JSX.Element;
+export type TaskBoardColumnItemsProps = useRender.ComponentProps<"div">;
+export declare function TaskBoardColumnItems({ className, render, ...props }: TaskBoardColumnItemsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnEmptyProps = useRender.ComponentProps<"div">;
+export declare function TaskBoardColumnEmpty({ className, render, ...props }: TaskBoardColumnEmptyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnEmptyIdleProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnEmptyIdle({ className, render, ...props }: TaskBoardColumnEmptyIdleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnEmptyAllowedProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnEmptyAllowed({ className, render, ...props }: TaskBoardColumnEmptyAllowedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskBoardColumnEmptyBlockedProps = useRender.ComponentProps<"span">;
+export declare function TaskBoardColumnEmptyBlocked({ className, render, ...props }: TaskBoardColumnEmptyBlockedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion