@botiverse/raft-ui 0.51.0 → 0.52.0

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

@@ -0,0 +1,155 @@
+import { cn } from "../../cn.mjs";
+import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
+import { taskBoardColumn } from "./task-board-column.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-board/task-board.tsx
+function TaskBoardRoot({ className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "task-board-root",
+		className: cn("flex min-w-max items-start gap-4 pr-4", className)
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumn({ className, render, ...props }) {
+	const { root } = taskBoardColumn();
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "task-board-column",
+		className: root({ className }),
+		render: render ?? /* @__PURE__ */ jsx("section", {}),
+		...props
+	});
+}
+function TaskBoardColumnTrigger({ className, ...props }) {
+	const { trigger } = taskBoardColumn();
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "task-board-column-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function TaskBoardColumnHeading({ className, render, ...props }) {
+	const { heading } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-heading",
+		className: heading({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnBadge({ status, children, className, render, ...props }) {
+	const { badge } = taskBoardColumn();
+	const resolvedChildren = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children] });
+	const defaultProps = {
+		"data-slot": "task-board-column-badge",
+		className: cn(badge(), className)
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props, { children: resolvedChildren })
+	});
+}
+function TaskBoardColumnCount({ className, render, ...props }) {
+	const { count } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-count",
+		className: count({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnChevron({ className, render, ...props }) {
+	const { chevron } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-chevron",
+		className: chevron({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnPanel({ className, ...props }) {
+	const { panel } = taskBoardColumn();
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "task-board-column-panel",
+		className: panel({ className }),
+		...props
+	});
+}
+function TaskBoardColumnItems({ className, render, ...props }) {
+	const { items } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-items",
+		className: items({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnEmpty({ className, render, ...props }) {
+	const { empty } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-empty",
+		className: empty({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnEmptyIdle({ className, render, ...props }) {
+	const { emptyIdle } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-empty-idle",
+		className: emptyIdle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnEmptyAllowed({ className, render, ...props }) {
+	const { emptyAllowed } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-empty-allowed",
+		className: emptyAllowed({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskBoardColumnEmptyBlocked({ className, render, ...props }) {
+	const { emptyBlocked } = taskBoardColumn();
+	const defaultProps = {
+		"data-slot": "task-board-column-empty-blocked",
+		className: emptyBlocked({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { TaskBoardColumn, TaskBoardColumnBadge, TaskBoardColumnChevron, TaskBoardColumnCount, TaskBoardColumnEmpty, TaskBoardColumnEmptyAllowed, TaskBoardColumnEmptyBlocked, TaskBoardColumnEmptyIdle, TaskBoardColumnHeading, TaskBoardColumnItems, TaskBoardColumnPanel, TaskBoardColumnTrigger, TaskBoardRoot };

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

@@ -0,0 +1,2 @@
+import { TaskCard, TaskCardBody, TaskCardBodyProps, TaskCardChannel, TaskCardChannelProps, TaskCardDescription, TaskCardDescriptionProps, TaskCardLegacy, TaskCardLegacyProps, TaskCardMeta, TaskCardMetaProps, TaskCardNumber, TaskCardNumberProps, TaskCardProps, TaskCardRow, TaskCardRowProps, TaskCardStatus, TaskCardStatusProps, TaskCardTitle, TaskCardTitleProps } from "./task-card.mjs";
+export { TaskCard, TaskCardBody, type TaskCardBodyProps, TaskCardChannel, type TaskCardChannelProps, TaskCardDescription, type TaskCardDescriptionProps, TaskCardLegacy, type TaskCardLegacyProps, TaskCardMeta, type TaskCardMetaProps, TaskCardNumber, type TaskCardNumberProps, type TaskCardProps, TaskCardRow, type TaskCardRowProps, TaskCardStatus, type TaskCardStatusProps, TaskCardTitle, type TaskCardTitleProps };

package/dist/components/task-card/task-card-status.recipe.mjs

@@ -0,0 +1,17 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/task-card/task-card-status.recipe.ts
+const taskCardStatus = tv({ base: [
+	"inline-flex min-w-0 shrink-0 touch-manipulation items-center",
+	"transition-[filter,opacity] duration-100 outline-none",
+	"data-[busy=true]:pointer-events-none data-[busy=true]:cursor-wait data-[busy=true]:opacity-dimmed data-[busy=true]:disabled:opacity-100",
+	"h-[22px] gap-1.5 rounded-chip border-0 px-[7px] py-0",
+	"font-sans text-[12px] leading-4 font-semibold text-foreground",
+	"[&:not(:has([data-slot=task-card-status-label]))]:hidden",
+	"**:data-[slot=task-card-status-label]:inline-flex **:data-[slot=task-card-status-label]:items-center [&_[data-slot=task-card-status-label]]:gap-1.5",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3 [&_svg:not([data-slot=task-status-icon])]:-mx-0.5 [&_svg[data-slot=task-status-icon]]:size-2.5",
+	"[button&]:cursor-pointer [button&]:enabled:hover:overlay-medium [button&]:enabled:active:overlay-medium",
+	"disabled:cursor-default disabled:opacity-100",
+	"focus-visible:shadow-focus"
+] });
+//#endregion
+export { taskCardStatus };

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

@@ -0,0 +1,30 @@
+import { TaskStatusId } from "../tasks/task-status.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/task-card/task-card.d.ts
+export type TaskCardProps = useRender.ComponentProps<"article"> & {
+  busy?: boolean;
+  disabled?: boolean;
+};
+export declare function TaskCard({ busy, disabled, className, render, ...props }: TaskCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardRowProps = useRender.ComponentProps<"div">;
+export declare function TaskCardRow({ className, render, ...props }: TaskCardRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardBodyProps = useRender.ComponentProps<"div">;
+export declare function TaskCardBody({ className, render, ...props }: TaskCardBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardMetaProps = useRender.ComponentProps<"div">;
+export declare function TaskCardMeta({ className, render, ...props }: TaskCardMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardChannelProps = useRender.ComponentProps<"span">;
+export declare function TaskCardChannel({ className, render, ...props }: TaskCardChannelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardNumberProps = useRender.ComponentProps<"span">;
+export declare function TaskCardNumber({ className, render, ...props }: TaskCardNumberProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardLegacyProps = useRender.ComponentProps<"span">;
+export declare function TaskCardLegacy({ className, render, ...props }: TaskCardLegacyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardTitleProps = useRender.ComponentProps<"p">;
+export declare function TaskCardTitle({ className, render, ...props }: TaskCardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardDescriptionProps = useRender.ComponentProps<"p">;
+export declare function TaskCardDescription({ className, render, ...props }: TaskCardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskCardStatusProps = useRender.ComponentProps<"button"> & {
+  busy?: boolean;
+  status: TaskStatusId;
+};
+export declare function TaskCardStatus({ busy, status, className, render, children, ...props }: TaskCardStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

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

@@ -0,0 +1,141 @@
+import { cn } from "../../cn.mjs";
+import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
+import { taskStatusSoft } from "../tasks/task-status.recipe.mjs";
+import { taskCardStatus } from "./task-card-status.recipe.mjs";
+import { taskCard } from "./task-card.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/task-card/task-card.tsx
+function TaskCard({ busy = false, disabled = false, className, render, ...props }) {
+	const { root } = taskCard();
+	const interactive = props.onClick != null;
+	const defaultProps = {
+		"data-slot": "task-card",
+		"aria-busy": busy || void 0,
+		"aria-disabled": disabled || void 0,
+		"data-busy": busy ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-interactive": interactive ? "true" : void 0,
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "article",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardRow({ className, render, ...props }) {
+	const { row } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-row",
+		className: row({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardBody({ className, render, ...props }) {
+	const { body } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-body",
+		className: body({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardMeta({ className, render, ...props }) {
+	const { meta } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardChannel({ className, render, ...props }) {
+	const { channel } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-channel",
+		className: channel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardNumber({ className, render, ...props }) {
+	const { number } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-number",
+		className: number({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardLegacy({ className, render, ...props }) {
+	const { legacy } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-legacy",
+		className: legacy({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardTitle({ className, render, ...props }) {
+	const { title } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardDescription({ className, render, ...props }) {
+	const { description } = taskCard();
+	const defaultProps = {
+		"data-slot": "task-card-description",
+		className: description({ className })
+	};
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskCardStatus({ busy = false, status, className, render, children, ...props }) {
+	const styles = taskCardStatus();
+	const resolvedChildren = children ?? /* @__PURE__ */ jsx(TaskStatusIcon, { status });
+	const defaultProps = {
+		type: "button",
+		"data-slot": "task-card-status",
+		"data-busy": busy ? "true" : void 0,
+		"aria-busy": busy || void 0,
+		className: cn(styles, taskStatusSoft({ status }), className)
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props, { children: resolvedChildren })
+	});
+}
+//#endregion
+export { TaskCard, TaskCardBody, TaskCardChannel, TaskCardDescription, TaskCardLegacy, TaskCardMeta, TaskCardNumber, TaskCardRow, TaskCardStatus, TaskCardTitle };

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

@@ -0,0 +1,39 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/task-card/task-card.recipe.ts
+const taskCard = tv({ slots: {
+	root: [
+		"relative w-full text-left",
+		"transition-all duration-100",
+		"data-[interactive=true]:cursor-pointer",
+		"data-[disabled=true]:pointer-events-none data-[disabled=true]:transform-none",
+		"group-data-[dragging=true]/task-draggable:transform-none",
+		"motion-reduce:transform-none motion-reduce:transition-none",
+		"rounded-container border border-line-hairline bg-layer-card p-3 text-foreground shadow-none",
+		"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium",
+		"data-[disabled=true]:bg-fill-muted data-[disabled=true]:opacity-100",
+		"group-data-[dragging=true]/task-draggable:not-in-data-drag-origin:shadow-float"
+	],
+	row: ["flex min-w-0 items-start gap-2"],
+	body: ["min-w-0 flex-1"],
+	meta: ["flex min-w-0 flex-nowrap items-center gap-2", "mb-2"],
+	channel: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
+	number: ["shrink-0", "font-mono text-mono-meta font-normal text-foreground-hint"],
+	legacy: [
+		"shrink-0",
+		"inline-flex h-[22px] items-center rounded-chip px-1.5 py-0",
+		"inset-ring inset-ring-line-hairline",
+		"font-mono text-mono-meta font-normal text-foreground-muted"
+	],
+	title: [
+		"line-clamp-3 wrap-break-word",
+		"text-body font-semibold text-foreground",
+		"in-data-[disabled=true]:text-foreground-disabled"
+	],
+	description: [
+		"line-clamp-2 wrap-break-word",
+		"mt-1 text-callout text-foreground-muted",
+		"in-data-[disabled=true]:text-foreground-disabled"
+	]
+} });
+//#endregion
+export { taskCard };

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

@@ -0,0 +1,2 @@
+import { TaskDndAccessibility, TaskDndProvider, TaskDndProviderProps, TaskDragOverlay, TaskDragOverlayProps, TaskDraggable, TaskDraggableProps, TaskDropData, TaskDropPlaceholder, TaskDropPlaceholderProps, TaskDropPlacement, TaskDropState, TaskDropZone, TaskDropZoneProps, TaskDropZoneState, TaskMoveDetails } from "./task-dnd.mjs";
+export { type TaskDndAccessibility, TaskDndProvider, type TaskDndProviderProps, TaskDragOverlay, type TaskDragOverlayProps, TaskDraggable, type TaskDraggableProps, type TaskDropData, TaskDropPlaceholder, type TaskDropPlaceholderProps, type TaskDropPlacement, type TaskDropState, TaskDropZone, type TaskDropZoneProps, type TaskDropZoneState, type TaskMoveDetails };

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

@@ -0,0 +1,75 @@
+import { DragAnnouncementSource, DragMessages } from "../drag/drag-announcements.mjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { DndContextProps, DragCancelEvent, DragEndEvent, DragMoveEvent, DragOverEvent, DragStartEvent, UniqueIdentifier } from "@dnd-kit/core";
+//#region src/components/task-dnd/task-dnd.d.ts
+export type TaskDropState = "idle" | "allowed" | "blocked";
+export type TaskDropPlacement = "before" | "after";
+export type TaskDropData = Record<string, unknown>;
+export type TaskMoveDetails = {
+  activeId: UniqueIdentifier;
+  overId: UniqueIdentifier;
+  overData: TaskDropData | undefined;
+  placement: TaskDropPlacement | null;
+};
+export type TaskDndAccessibility = NonNullable<DndContextProps["accessibility"]>;
+export type TaskDndProviderProps = {
+  children: ReactNode;
+  /**
+   * The card and the places it can go, in words, for the screen-reader
+   * announcements: `name` (the card's title, never its id), `place` (the
+   * status or column and the position) and `refusal`. Without it nothing is
+   * announced, so no id is ever read out.
+   */
+  describe?: DragAnnouncementSource;
+  /** Your translations of the announcements and instructions. */
+  messages?: Partial<DragMessages>;
+  /** Passed to dnd-kit's `DndContext` as is, over the announcements built from `describe`. */
+  accessibility?: TaskDndAccessibility;
+  disabled?: boolean;
+  isDropAllowed?: (activeId: UniqueIdentifier, overId: UniqueIdentifier, overData: TaskDropData | undefined) => boolean;
+  onMove?: (details: TaskMoveDetails) => void | Promise<void>;
+  onMoveError?: (error: unknown, details: TaskMoveDetails) => void;
+  onDragStart?: (event: DragStartEvent) => void;
+  onDragMove?: (event: DragMoveEvent) => void;
+  onDragOver?: (event: DragOverEvent) => void;
+  onDragCancel?: (event: DragCancelEvent) => void;
+  onDragEnd?: (event: DragEndEvent) => void;
+};
+export declare function TaskDndProvider({ children, describe, messages, accessibility, disabled, isDropAllowed, onMove, onMoveError, onDragStart, onDragMove, onDragOver, onDragCancel, onDragEnd }: TaskDndProviderProps): import("react").JSX.Element;
+export type TaskDraggableProps = ComponentPropsWithRef<"div"> & {
+  id: UniqueIdentifier;
+  disabled?: boolean;
+  dropId?: UniqueIdentifier;
+  dropData?: TaskDropData;
+  dropDisabled?: boolean;
+};
+export declare function TaskDraggable({ id, disabled, dropId, dropData, dropDisabled, className, ref: consumerRef, style, ...props }: TaskDraggableProps): import("react").JSX.Element;
+export type TaskDropZoneState = {
+  dropState: TaskDropState;
+};
+export type TaskDropZoneProps = useRender.ComponentProps<"div", TaskDropZoneState> & {
+  id: UniqueIdentifier;
+  disabled?: boolean;
+  data?: TaskDropData;
+};
+export declare function TaskDropZone({ id, data, disabled, render, ...props }: TaskDropZoneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskDropPlaceholderProps = useRender.ComponentProps<"div", TaskDropZoneState> & {
+  id: UniqueIdentifier;
+  placement?: TaskDropPlacement;
+};
+export declare function TaskDropPlaceholder({ id, placement, className, render, style, ...props }: TaskDropPlaceholderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TaskDragOverlayProps = {
+  children?: ReactNode;
+  className?: string;
+  /** Render the copy in another element, such as `document.body` when an ancestor has a transform. */
+  container?: Element | DocumentFragment | null;
+};
+/**
+ * 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.
+ */
+export declare function TaskDragOverlay({ children, className, container }: TaskDragOverlayProps): import("react").JSX.Element;
+//#endregion