@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/task-dnd/task-dnd.mjs

@@ -0,0 +1,341 @@
+"use client";
+import { SILENT_DRAG_ANNOUNCEMENTS, createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
+import { drag } from "../drag/drag.recipe.mjs";
+import { DragLift } from "../drag/drag-lift.mjs";
+import { useDragSensors } from "../drag/drag-sensors.mjs";
+import { taskDnd } from "./task-dnd.recipe.mjs";
+import { createContext, use, useCallback, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { DndContext, KeyboardCode, closestCorners, getFirstCollision, useDraggable, useDroppable } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/components/task-dnd/task-dnd.tsx
+const TaskDndContext = createContext(null);
+const EMPTY_OVER_SNAPSHOT = {
+	overId: null,
+	overPlacement: null,
+	overData: void 0
+};
+const EMPTY_OVER_STORE = createTaskDndOverStore();
+const TaskDndOverContext = createContext(null);
+const allowTaskDrop = () => true;
+const NO_SENSORS = [];
+function TaskDndProvider({ children, describe, messages, accessibility, disabled = false, isDropAllowed = allowTaskDrop, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }) {
+	const id = useId();
+	const [activeId, setActiveId] = useState(null);
+	const [activeDropId, setActiveDropId] = useState(null);
+	const [activeHeight, setActiveHeight] = useState(null);
+	const [overlay, setOverlay] = useState(false);
+	const [overStore] = useState(createTaskDndOverStore);
+	const sensors = useDragSensors({ coordinateGetter: taskKeyboardCoordinates });
+	const resolvedAccessibility = useMemo(() => ({
+		screenReaderInstructions: dragInstructions(messages),
+		announcements: describe ? createDragAnnouncements(describe, messages) : SILENT_DRAG_ANNOUNCEMENTS,
+		...accessibility
+	}), [
+		accessibility,
+		describe,
+		messages
+	]);
+	const context = useMemo(() => ({
+		activeId,
+		activeDropId,
+		activeHeight,
+		isDropAllowed,
+		overlay,
+		setOverlay
+	}), [
+		activeDropId,
+		activeHeight,
+		activeId,
+		isDropAllowed,
+		overlay
+	]);
+	const reset = useCallback(() => {
+		setActiveId(null);
+		setActiveDropId(null);
+		setActiveHeight(null);
+		overStore.update(EMPTY_OVER_SNAPSHOT);
+	}, [overStore]);
+	const handleDragStart = useCallback((event) => {
+		overStore.update(EMPTY_OVER_SNAPSHOT);
+		setActiveId(event.active.id);
+		setActiveDropId(getOwnDropId(event.active.data.current));
+		setActiveHeight(event.active.rect.current.initial?.height ?? null);
+		onDragStart?.(event);
+	}, [overStore, onDragStart]);
+	const handleDragMove = useCallback((event) => {
+		const current = overStore.getSnapshot();
+		overStore.update({
+			...current,
+			overPlacement: getDropPlacement(event)
+		});
+		onDragMove?.(event);
+	}, [overStore, onDragMove]);
+	const handleDragOver = useCallback((event) => {
+		overStore.update({
+			overId: event.over?.id ?? null,
+			overPlacement: getDropPlacement(event),
+			overData: event.over?.data.current
+		});
+		onDragOver?.(event);
+	}, [overStore, onDragOver]);
+	const handleDragCancel = useCallback((event) => {
+		reset();
+		onDragCancel?.(event);
+	}, [reset, onDragCancel]);
+	const handleDragEnd = useCallback((event) => {
+		const nextActiveId = event.active.id;
+		const nextOverId = event.over?.id;
+		const nextOverData = event.over?.data.current;
+		const ownDropId = getOwnDropId(event.active.data.current);
+		if (nextOverId != null && nextOverId !== ownDropId && isDropAllowed(nextActiveId, nextOverId, nextOverData)) {
+			const details = {
+				activeId: nextActiveId,
+				overId: nextOverId,
+				overData: nextOverData,
+				placement: getDropPlacement(event)
+			};
+			Promise.resolve(onMove?.(details)).catch((error) => {
+				onMoveError?.(error, details);
+			});
+		}
+		reset();
+		onDragEnd?.(event);
+	}, [
+		isDropAllowed,
+		onMove,
+		onMoveError,
+		reset,
+		onDragEnd
+	]);
+	return /* @__PURE__ */ jsx(DndContext, {
+		id,
+		accessibility: resolvedAccessibility,
+		autoScroll: !overlay,
+		sensors: disabled ? NO_SENSORS : sensors,
+		onDragStart: handleDragStart,
+		onDragMove: handleDragMove,
+		onDragOver: handleDragOver,
+		onDragCancel: handleDragCancel,
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ jsx(TaskDndContext, {
+			value: context,
+			children: /* @__PURE__ */ jsx(TaskDndOverContext, {
+				value: overStore,
+				children
+			})
+		})
+	});
+}
+function TaskDraggable({ id, disabled = false, dropId, dropData, dropDisabled = false, className, ref: consumerRef, style, ...props }) {
+	const { draggable } = taskDnd();
+	const context = use(TaskDndContext);
+	const ownDrop = useMemo(() => dropId == null ? void 0 : { [OWN_DROP_ID]: dropId }, [dropId]);
+	const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+		id,
+		disabled,
+		data: ownDrop
+	});
+	const lifted = isDragging && context?.overlay === true;
+	const { setNodeRef: setDropNodeRef, isOver: isDropOver } = useDroppable({
+		id: dropId ?? id,
+		data: dropData,
+		disabled: dropId == null || dropDisabled
+	});
+	const dragStyle = {
+		transform: lifted ? void 0 : CSS.Translate.toString(transform),
+		...style
+	};
+	const mergedRef = useCallback((node) => {
+		setNodeRef(node);
+		setDropNodeRef(node);
+		assignRef(consumerRef, node);
+	}, [
+		consumerRef,
+		setDropNodeRef,
+		setNodeRef
+	]);
+	const mergedProps = mergeProps(attributes, listeners, props);
+	return /* @__PURE__ */ jsx("div", {
+		...mergedProps,
+		ref: mergedRef,
+		"data-slot": "task-draggable",
+		"data-dragging": isDragging ? "true" : void 0,
+		"data-drag-origin": lifted ? "" : void 0,
+		"data-drop-over": isDropOver ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		className: draggable({ className }),
+		style: dragStyle
+	});
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function TaskDropZone({ id, data, disabled = false, render, ...props }) {
+	const context = use(TaskDndContext);
+	const { setNodeRef, isOver } = useDroppable({
+		id,
+		data,
+		disabled
+	});
+	const dropState = getDropState(context, id, isOver, data);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: setNodeRef,
+		state: { dropState },
+		props: {
+			"data-slot": "task-drop-zone",
+			"data-drop-state": dropState,
+			...props
+		}
+	});
+}
+function TaskDropPlaceholder({ id, placement, className, render, style, ...props }) {
+	const context = use(TaskDndContext);
+	const overStore = use(TaskDndOverContext) ?? EMPTY_OVER_STORE;
+	const { placeholder } = taskDnd();
+	const { placeholder: dropPlaceholder } = drag();
+	const dropState = useSyncExternalStore(overStore.subscribe, () => getPlaceholderDropState(context, overStore.getSnapshot(), id, placement), () => "idle");
+	const placeholderStyle = {
+		...style,
+		...context?.activeHeight == null ? {} : { "--task-dnd-placeholder-height": `${context.activeHeight}px` }
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		state: { dropState },
+		props: {
+			"aria-hidden": true,
+			"data-slot": "task-drop-placeholder",
+			"data-drop-state": dropState,
+			className: dropPlaceholder({ className: placeholder({ className }) }),
+			style: placeholderStyle,
+			...props
+		}
+	});
+}
+/**
+* The copy of the dragged card that follows the hand: a `DragLift` with the
+* card's radius. On a drop it glides into the card's new place, and on a
+* cancel back home. While it is rendered, the dragged card stays in its place
+* at 40% instead of moving.
+*/
+function TaskDragOverlay({ children, className, container }) {
+	const { overlay } = taskDnd();
+	const setOverlay = use(TaskDndContext)?.setOverlay;
+	useEffect(() => {
+		if (!setOverlay) return;
+		setOverlay(true);
+		return () => setOverlay(false);
+	}, [setOverlay]);
+	return /* @__PURE__ */ jsx(DragLift, {
+		className: "rounded-container",
+		container,
+		children: children == null ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "task-drag-overlay",
+			"data-dragging": "true",
+			className: overlay({ className }),
+			children
+		})
+	});
+}
+const OWN_DROP_ID = "taskDndDropId";
+function getOwnDropId(data) {
+	const value = data?.[OWN_DROP_ID];
+	return typeof value === "string" || typeof value === "number" ? value : null;
+}
+/**
+* dnd-kit's `sortableKeyboardCoordinates` only moves when the dragged item is
+* itself a registered droppable under its own id (as with `useSortable`). Task
+* cards drop under `dropId` and may leave their column while dragged, so it
+* never found a target. This getter steps between the enabled drop targets
+* instead: ArrowDown/ArrowUp go through the slots of the column (before/after
+* each target), ArrowLeft/ArrowRight jump to the nearest target in that
+* direction.
+*/
+const taskKeyboardCoordinates = (event, { context }) => {
+	const direction = event.code;
+	if (direction !== KeyboardCode.Down && direction !== KeyboardCode.Up && direction !== KeyboardCode.Left && direction !== KeyboardCode.Right) return;
+	event.preventDefault();
+	const { active, activeNode, collisionRect, droppableContainers, droppableRects, over } = context;
+	if (active == null || collisionRect == null) return void 0;
+	const isVertical = direction === KeyboardCode.Down || direction === KeyboardCode.Up;
+	const center = getRectCenter(collisionRect);
+	const overRect = over == null ? void 0 : droppableRects.get(over.id);
+	if (overRect != null && isVertical) {
+		const placement = center.y < getRectCenter(overRect).y ? "before" : "after";
+		if (direction === KeyboardCode.Down && placement === "before") return getKeyboardLanding(collisionRect, overRect, "after");
+		if (direction === KeyboardCode.Up && placement === "after") return getKeyboardLanding(collisionRect, overRect, "before");
+	}
+	const candidates = [];
+	for (const entry of droppableContainers.getEnabled()) {
+		if (entry.disabled || entry.id === over?.id) continue;
+		if (activeNode != null && entry.node.current === activeNode) continue;
+		const rect = droppableRects.get(entry.id);
+		if (rect == null) continue;
+		const target = getRectCenter(rect);
+		if (direction === KeyboardCode.Down ? target.y > center.y && rect.left <= center.x && center.x <= rect.right : direction === KeyboardCode.Up ? target.y < center.y && rect.left <= center.x && center.x <= rect.right : direction === KeyboardCode.Right ? target.x > center.x + 1 : target.x < center.x - 1) candidates.push(entry);
+	}
+	const targetId = getFirstCollision(closestCorners({
+		active,
+		collisionRect,
+		droppableRects,
+		droppableContainers: candidates,
+		pointerCoordinates: null
+	}), "id");
+	const targetRect = targetId == null ? void 0 : droppableRects.get(targetId);
+	if (targetRect == null) return void 0;
+	return getKeyboardLanding(collisionRect, targetRect, direction === KeyboardCode.Down ? "after" : "before");
+};
+function getRectCenter(rect) {
+	return {
+		x: rect.left + rect.width / 2,
+		y: rect.top + rect.height / 2
+	};
+}
+/** Top-left for the dragged card so `getDropPlacement` reads `placement` over `target`. */
+function getKeyboardLanding(card, target, placement) {
+	const alignTop = target.top;
+	const alignBottom = target.bottom - card.height;
+	return {
+		x: target.left,
+		y: placement === "before" ? Math.min(alignTop, alignBottom) - 1 : Math.max(alignTop, alignBottom) + 1
+	};
+}
+function getDropPlacement(event) {
+	const activeRect = event.active.rect.current.translated ?? event.active.rect.current.initial;
+	const overRect = event.over?.rect;
+	if (activeRect == null || overRect == null) return null;
+	return activeRect.top + activeRect.height / 2 < overRect.top + overRect.height / 2 ? "before" : "after";
+}
+function getDropState(context, id, isOver, overData) {
+	const activeId = context?.activeId ?? null;
+	if (!isOver || activeId == null) return "idle";
+	return context?.isDropAllowed(activeId, id, overData) ? "allowed" : "blocked";
+}
+function getPlaceholderDropState(context, over, id, placement) {
+	if (context?.activeDropId != null && context.activeDropId === id) return "idle";
+	return getDropState(context, id, over.overId === id && (placement == null || over.overPlacement === placement), over.overData);
+}
+function createTaskDndOverStore() {
+	let snapshot = EMPTY_OVER_SNAPSHOT;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getSnapshot: () => snapshot,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		update: (nextSnapshot) => {
+			if (snapshot.overId === nextSnapshot.overId && snapshot.overPlacement === nextSnapshot.overPlacement && snapshot.overData === nextSnapshot.overData) return;
+			snapshot = nextSnapshot;
+			listeners.forEach((listener) => listener());
+		}
+	};
+}
+//#endregion
+export { TaskDndProvider, TaskDragOverlay, TaskDraggable, TaskDropPlaceholder, TaskDropZone };

package/dist/components/task-dnd/task-dnd.recipe.mjs

@@ -0,0 +1,20 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/task-dnd/task-dnd.recipe.ts
+const taskDnd = tv({ slots: {
+	draggable: [
+		"group/task-draggable relative cursor-grab touch-manipulation select-none [-webkit-touch-callout:none] active:cursor-grabbing",
+		"outline-none",
+		"data-[dragging=true]:z-20 data-[dragging=true]:will-change-transform",
+		"data-[disabled=true]:cursor-default data-[disabled=true]:touch-auto",
+		"rounded-container",
+		"focus-visible:shadow-focus"
+	],
+	overlay: ["group/task-drag-overlay pointer-events-none", "size-full rounded-[inherit]"],
+	placeholder: [
+		"hidden w-full shrink-0",
+		"h-(--task-dnd-placeholder-height,72px) rounded-container",
+		"data-[drop-state=allowed]:block"
+	]
+} });
+//#endregion
+export { taskDnd };

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

@@ -0,0 +1,2 @@
+import { TaskListRoot, TaskListRootProps, TaskSection, TaskSectionBadge, TaskSectionBadgeProps, TaskSectionChevron, TaskSectionChevronProps, TaskSectionCount, TaskSectionCountProps, TaskSectionEmpty, TaskSectionEmptyProps, TaskSectionHeading, TaskSectionHeadingProps, TaskSectionItems, TaskSectionItemsProps, TaskSectionPanel, TaskSectionPanelProps, TaskSectionProps, TaskSectionTrigger, TaskSectionTriggerProps } from "./task-list.mjs";
+export { TaskListRoot, type TaskListRootProps, TaskSection, TaskSectionBadge, type TaskSectionBadgeProps, TaskSectionChevron, type TaskSectionChevronProps, TaskSectionCount, type TaskSectionCountProps, TaskSectionEmpty, type TaskSectionEmptyProps, TaskSectionHeading, type TaskSectionHeadingProps, TaskSectionItems, type TaskSectionItemsProps, TaskSectionPanel, type TaskSectionPanelProps, type TaskSectionProps, TaskSectionTrigger, type TaskSectionTriggerProps };

package/dist/components/task-list/task-list-section.recipe.mjs

@@ -0,0 +1,37 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/task-list/task-list-section.recipe.ts
+const taskListSection = tv({ slots: {
+	root: ["stack-y-2"],
+	trigger: [
+		"group flex w-full touch-manipulation items-center text-left outline-none",
+		"disabled:cursor-default",
+		"min-h-8 justify-start gap-2 rounded-control",
+		"font-sans text-footnote font-bold text-foreground-hint",
+		"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-hint",
+		"[&>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",
+		"-order-1 text-foreground-hint",
+		"group-hover:text-foreground"
+	],
+	panel: ["data-ending-style:hidden"],
+	items: ["stack-y-2"],
+	empty: [
+		"px-3",
+		"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"
+	]
+} });
+//#endregion
+export { taskListSection };

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

@@ -0,0 +1,34 @@
+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-list/task-list.d.ts
+export type TaskListRootProps = useRender.ComponentProps<"div">;
+export declare function TaskListRoot({ className, render, ...props }: TaskListRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionProps = Omit<ComponentProps<typeof Collapsible.Root>, "className"> & {
+  className?: string;
+};
+export declare function TaskSection({ className, render, ...props }: TaskSectionProps): import("react").JSX.Element;
+export type TaskSectionTriggerProps = Omit<ComponentProps<typeof Collapsible.Trigger>, "className"> & {
+  className?: string;
+};
+export declare function TaskSectionTrigger({ className, ...props }: TaskSectionTriggerProps): import("react").JSX.Element;
+export type TaskSectionHeadingProps = useRender.ComponentProps<"span">;
+export declare function TaskSectionHeading({ className, render, ...props }: TaskSectionHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionBadgeProps = useRender.ComponentProps<"span"> & {
+  status: TaskStatusId;
+};
+export declare function TaskSectionBadge({ status, children, className, render, ...props }: TaskSectionBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionCountProps = useRender.ComponentProps<"span">;
+export declare function TaskSectionCount({ className, render, ...props }: TaskSectionCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionChevronProps = useRender.ComponentProps<"span">;
+export declare function TaskSectionChevron({ className, render, ...props }: TaskSectionChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionPanelProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
+  className?: string;
+};
+export declare function TaskSectionPanel({ className, ...props }: TaskSectionPanelProps): import("react").JSX.Element;
+export type TaskSectionItemsProps = useRender.ComponentProps<"div">;
+export declare function TaskSectionItems({ className, render, ...props }: TaskSectionItemsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskSectionEmptyProps = useRender.ComponentProps<"div">;
+export declare function TaskSectionEmpty({ className, render, ...props }: TaskSectionEmptyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

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

@@ -0,0 +1,119 @@
+import { cn } from "../../cn.mjs";
+import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
+import { taskListSection } from "./task-list-section.recipe.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/task-list/task-list.tsx
+function TaskListRoot({ className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "task-list-root",
+		className: cn("stack-y-6", className)
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskSection({ className, render, ...props }) {
+	const { root } = taskListSection();
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "task-section",
+		className: root({ className }),
+		render: render ?? /* @__PURE__ */ jsx("section", {}),
+		...props
+	});
+}
+function TaskSectionTrigger({ className, ...props }) {
+	const { trigger } = taskListSection();
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "task-section-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function TaskSectionHeading({ className, render, ...props }) {
+	const { heading } = taskListSection();
+	const defaultProps = {
+		"data-slot": "task-section-heading",
+		className: heading({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskSectionBadge({ status, children, className, render, ...props }) {
+	const { badge } = taskListSection();
+	const resolvedChildren = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children] });
+	const defaultProps = {
+		"data-slot": "task-section-badge",
+		className: cn(badge(), className)
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props, { children: resolvedChildren })
+	});
+}
+function TaskSectionCount({ className, render, ...props }) {
+	const { count } = taskListSection();
+	const defaultProps = {
+		"data-slot": "task-section-count",
+		className: count({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskSectionChevron({ className, render, ...props }) {
+	const { chevron } = taskListSection();
+	const defaultProps = {
+		"data-slot": "task-section-chevron",
+		className: chevron({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskSectionPanel({ className, ...props }) {
+	const { panel } = taskListSection();
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "task-section-panel",
+		className: panel({ className }),
+		...props
+	});
+}
+function TaskSectionItems({ className, render, ...props }) {
+	const { items } = taskListSection();
+	const defaultProps = {
+		"data-slot": "task-section-items",
+		className: items({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskSectionEmpty({ className, render, ...props }) {
+	const { empty } = taskListSection();
+	const defaultProps = {
+		"data-slot": "task-section-empty",
+		className: empty({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { TaskListRoot, TaskSection, TaskSectionBadge, TaskSectionChevron, TaskSectionCount, TaskSectionEmpty, TaskSectionHeading, TaskSectionItems, TaskSectionPanel, TaskSectionTrigger };

package/dist/components/tasks/index.d.mts

@@ -0,0 +1,7 @@
+import { TASK_STATUS_IDS, TaskStatusId, taskStatusSoft, taskStatusStrong } from "./task-status.recipe.mjs";
+import { TasksPanelEmpty, TasksPanelEmptyProps, TasksPanelRoot, TasksPanelRootProps, TasksPanelToolbar, TasksPanelToolbarFilters, TasksPanelToolbarFiltersProps, TasksPanelToolbarGroup, TasksPanelToolbarGroupProps, TasksPanelToolbarLabel, TasksPanelToolbarLabelProps, TasksPanelToolbarNewTask, TasksPanelToolbarNewTaskProps, TasksPanelToolbarProps, TasksPanelToolbarView, TasksPanelToolbarViewProps, TasksPanelViewport, TasksPanelViewportProps } from "./tasks-panel.mjs";
+import { TaskLoadingList, TaskLoadingListProps, TaskLoadingRow, TaskLoadingRowProps } from "./task-loading.mjs";
+import { TaskChip, TaskChipProps, TaskChipSize, TaskChipVariant } from "./task-chip.mjs";
+import { TaskClosedIcon, TaskDoneIcon, TaskInProgressIcon, TaskInReviewIcon, TaskStatusIcon, TaskTodoIcon } from "./task-status-icon.mjs";
+import { TaskStatusBadge, TaskStatusBadgeProps } from "./task-status-badge.mjs";
+export { TASK_STATUS_IDS, TaskChip, type TaskChipProps, type TaskChipSize, type TaskChipVariant, TaskClosedIcon, TaskDoneIcon, TaskInProgressIcon, TaskInReviewIcon, TaskLoadingList, type TaskLoadingListProps, TaskLoadingRow, type TaskLoadingRowProps, TaskStatusBadge, type TaskStatusBadgeProps, TaskStatusIcon, type TaskStatusId, TaskTodoIcon, TasksPanelEmpty, type TasksPanelEmptyProps, TasksPanelRoot, type TasksPanelRootProps, TasksPanelToolbar, TasksPanelToolbarFilters, type TasksPanelToolbarFiltersProps, TasksPanelToolbarGroup, type TasksPanelToolbarGroupProps, TasksPanelToolbarLabel, type TasksPanelToolbarLabelProps, TasksPanelToolbarNewTask, type TasksPanelToolbarNewTaskProps, type TasksPanelToolbarProps, TasksPanelToolbarView, type TasksPanelToolbarViewProps, TasksPanelViewport, type TasksPanelViewportProps, taskStatusSoft, taskStatusStrong };

package/dist/components/tasks/task-chip.d.mts

@@ -0,0 +1,14 @@
+import { TaskStatusId } from "./task-status.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/task-chip.d.ts
+export type TaskChipVariant = "default" | "inline";
+export type TaskChipSize = "default" | "sm";
+export type TaskChipProps = useRender.ComponentProps<"span"> & {
+  status: TaskStatusId;
+  loading?: boolean;
+  variant?: TaskChipVariant;
+  /** `sm` lines the chip up with an `sm` Badge in the same row. */
+  size?: TaskChipSize;
+};
+export declare function TaskChip({ status, loading, variant, size, className, render, children, ...props }: TaskChipProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/tasks/task-chip.mjs

@@ -0,0 +1,81 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { inlineChip } from "../../lib/inline-chip.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/task-chip.tsx
+const taskChip = tv({
+	slots: { root: [
+		"inline-flex max-w-full items-center gap-1.5 align-baseline overflow-hidden px-2 py-0 [font-size:inherit] leading-[1.4] tracking-normal whitespace-nowrap",
+		"[&>svg]:shrink-0 [&>svg]:size-3",
+		"no-underline select-text",
+		"transition-[filter,opacity] duration-100",
+		"focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-offset-2 focus-visible:keyboard:outline-line-strong",
+		"border-0",
+		"font-sans font-semibold text-foreground",
+		"[&>svg:not([data-slot=task-status-icon])]:-mx-0.5 [&>svg[data-slot=task-status-icon]]:size-2.5",
+		"[a,button]:cursor-pointer [a,button]:hover:overlay-medium [a,button]:active:overlay-medium",
+		"focus-visible:outline-none focus-visible:shadow-focus"
+	] },
+	variants: {
+		status: {
+			todo: { root: ["bg-task-status-todo-soft"] },
+			"in-progress": { root: ["bg-task-status-in-progress-soft"] },
+			"in-review": { root: ["bg-task-status-in-review-soft"] },
+			done: { root: ["bg-task-status-done-soft"] },
+			closed: { root: ["bg-task-status-closed-soft"] }
+		},
+		variant: {
+			default: { root: ["h-[22px] items-baseline gap-1.5 rounded-chip px-[7px] py-[3px] [&>svg]:self-center", "text-[12px] leading-4"] },
+			inline: {}
+		},
+		size: {
+			default: {},
+			sm: {}
+		}
+	},
+	compoundVariants: [{
+		variant: "inline",
+		status: [
+			"todo",
+			"in-progress",
+			"in-review",
+			"done",
+			"closed"
+		],
+		class: { root: [...inlineChip, "[&>svg]:size-3.5 [&>svg]:self-center [&>svg:not([data-slot=task-status-icon])]:mx-0"] }
+	}, {
+		variant: "default",
+		size: "sm",
+		class: { root: ["h-5 gap-1 px-[5px] py-0.5"] }
+	}],
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function TaskChip({ status, loading = false, variant = "default", size = "default", className, render, children, ...props }) {
+	const { root } = taskChip({
+		status,
+		variant,
+		size
+	});
+	const defaultProps = {
+		"data-slot": "task-chip",
+		"data-inline-reference": "",
+		"data-loading": loading ? "true" : void 0,
+		className: cn(root({ className }), loading && "pointer-events-none opacity-dimmed"),
+		children
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "task-chip",
+			status
+		}
+	});
+}
+//#endregion
+export { TaskChip };

package/dist/components/tasks/task-loading.d.mts

@@ -0,0 +1,7 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/task-loading.d.ts
+export type TaskLoadingListProps = useRender.ComponentProps<"div">;
+export declare function TaskLoadingList({ className, render, ...props }: TaskLoadingListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskLoadingRowProps = useRender.ComponentProps<"div">;
+export declare function TaskLoadingRow({ className, render, ...props }: TaskLoadingRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion