@ciridae/ui 0.3.3 → 0.3.6

package/dist/components/blocks/feedback-user-detail.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, MessageSquareTextIcon, PaperclipIcon } from "lucide-react";
+import { formatFeedbackTimestampFull, getFeedbackTimestampDateTime } from "./feedback-date-format";
+import { FeedbackStatusBadge } from "./feedback-status-badge";
+import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { Button } from "../ui/button";
+import { Card } from "../ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
+import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "../ui/item";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
+function FeedbackUserDetail({ activityLabel = "Activity", activitySlot, feedback, onBack, }) {
+    if (!feedback)
+        return _jsx(FeedbackUserDetailEmpty, {});
+    return (_jsxs("div", { className: "grid content-start gap-(--panel-gap)", children: [_jsx(FeedbackUserDetailHeader, { feedback: feedback, onBack: onBack }), _jsx(FeedbackUserDetailMeta, { feedback: feedback }), _jsx(FeedbackUserDetailBody, { feedback: feedback }), _jsx(FeedbackUserAttachments, { feedback: feedback }), activitySlot ? (_jsx(FeedbackUserActivity, { activityLabel: activityLabel, activitySlot: activitySlot })) : null] }));
+}
+function FeedbackUserDetailHeader({ feedback, onBack, }) {
+    return (_jsx("header", { className: "grid gap-3", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [onBack ? _jsx(FeedbackUserDetailBackButton, { onBack: onBack }) : null, _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: feedback.subject }), _jsx(FeedbackUserDetailBadges, { feedback: feedback })] }) })] }) }));
+}
+function FeedbackUserDetailBadges({ feedback }) {
+    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [_jsx(FeedbackTypeBadge, { type: feedback.type }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
+}
+function FeedbackUserDetailBackButton({ onBack }) {
+    return (_jsx(Button, { "aria-label": "Back to my feedback", className: "-ml-2 shrink-0", onClick: onBack, size: "icon", type: "button", variant: "ghost", children: _jsx(ArrowLeftIcon, {}) }));
+}
+function FeedbackUserDetailMeta({ feedback }) {
+    return (_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackUserDateValue, { value: feedback.submittedAt }) }), _jsx(FeedbackProperty, { label: "Updated", children: _jsx(FeedbackUserDateValue, { value: feedback.updatedAt }) }), _jsx(FeedbackProperty, { label: "Reference", children: _jsx("span", { className: "font-mono text-xs tabular-nums", children: feedback.referenceId ?? feedback.id }) })] }));
+}
+function FeedbackUserDetailBody({ feedback }) {
+    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Feedback" }), _jsx("p", { className: "text-sm whitespace-pre-wrap text-foreground", children: feedback.description })] }));
+}
+function FeedbackProperty({ children, label }) {
+    return (_jsxs(PropertyListItem, { children: [_jsx(PropertyListLabel, { children: label }), _jsx(PropertyListValue, { children: children })] }));
+}
+function FeedbackUserDateValue({ value }) {
+    return (_jsx("time", { className: "font-mono text-xs tabular-nums", dateTime: getFeedbackTimestampDateTime(value), children: formatFeedbackTimestampFull(value) }));
+}
+function FeedbackUserAttachments({ feedback }) {
+    const attachments = feedback.attachments ?? [];
+    if (attachments.length === 0)
+        return null;
+    return (_jsxs("section", { className: "grid gap-2", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Attachments" }), _jsx(ItemGroup, { children: attachments.map((attachment, index) => (_jsxs(Item, { size: "sm", variant: "outline", children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PaperclipIcon, {}) }), _jsx(ItemContent, { children: _jsx(ItemTitle, { children: getAttachmentTitle(attachment) }) })] }, getAttachmentKey(attachment, index)))) })] }));
+}
+function getAttachmentKey(attachment, index) {
+    return `${attachment.url ?? attachment.name}-${index}`;
+}
+function getAttachmentTitle(attachment) {
+    if (!attachment.url)
+        return attachment.name;
+    return (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name }));
+}
+function FeedbackUserActivity({ activityLabel, activitySlot, }) {
+    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: activityLabel }), activitySlot] }));
+}
+function FeedbackUserDetailEmpty() {
+    return (_jsx(Empty, { className: "min-h-72 border border-dashed", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(MessageSquareTextIcon, {}) }), _jsx(EmptyTitle, { children: "Select feedback" }), _jsx(EmptyDescription, { children: "Choose a submission to see its progress and details." })] }) }));
+}
+export { FeedbackUserDetail };

package/dist/components/blocks/feedback-user-list.d.ts

@@ -0,0 +1,9 @@
+import type { UserFeedbackItem } from "./feedback-tracking-types";
+type FeedbackUserListProps = {
+    isLoading?: boolean;
+    items: UserFeedbackItem[];
+    onSelectFeedback?: (item: UserFeedbackItem) => void;
+    selectedId?: string;
+};
+declare function FeedbackUserList({ isLoading, items, onSelectFeedback, selectedId, }: FeedbackUserListProps): import("@types/react").JSX.Element;
+export { FeedbackUserList, type FeedbackUserListProps };

package/dist/components/blocks/feedback-user-list.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InboxIcon } from "lucide-react";
+import { formatFeedbackTimestamp } from "./feedback-date-format";
+import { FeedbackStatusBadge } from "./feedback-status-badge";
+import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemTitle, } from "../ui/item";
+import { Skeleton } from "../ui/skeleton";
+import { cn } from "../../lib/utils";
+function FeedbackUserList({ isLoading = false, items, onSelectFeedback, selectedId, }) {
+    if (isLoading)
+        return _jsx(FeedbackUserListLoading, {});
+    if (items.length === 0)
+        return _jsx(FeedbackUserListEmpty, {});
+    return (_jsx(ItemGroup, { className: "gap-2", children: items.map((item) => (_jsx(FeedbackUserListItem, { item: item, onSelectFeedback: onSelectFeedback, selected: item.id === selectedId }, item.id))) }));
+}
+function FeedbackUserListItem({ item, onSelectFeedback, selected, }) {
+    return (_jsx(Item, { "aria-current": selected ? "true" : undefined, asChild: true, className: cn("w-full cursor-pointer text-left", selected && "border-foreground/30 bg-muted/50"), size: "sm", variant: "outline", children: _jsx("button", { onClick: () => onSelectFeedback?.(item), type: "button", children: _jsx(FeedbackUserListItemContent, { item: item }) }) }));
+}
+function FeedbackUserListItemContent({ item }) {
+    return (_jsxs(_Fragment, { children: [_jsxs(ItemContent, { className: "min-w-0", children: [_jsx(ItemTitle, { className: "max-w-full truncate", children: item.subject }), _jsx(ItemDescription, { className: "line-clamp-1", children: item.description })] }), _jsxs(ItemActions, { className: "shrink-0", children: [_jsx(FeedbackTypeBadge, { type: item.type }), _jsx(FeedbackStatusBadge, { status: item.status })] }), _jsxs(ItemFooter, { children: [_jsx(FeedbackListDate, { label: "Submitted", value: item.submittedAt }), item.updatedAt ? _jsx(FeedbackListDate, { label: "Updated", value: item.updatedAt }) : null] })] }));
+}
+function FeedbackListDate({ label, value }) {
+    return (_jsxs("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [label, " ", formatFeedbackTimestamp(value)] }));
+}
+function FeedbackUserListLoading() {
+    return (_jsx("div", { "aria-label": "Loading feedback", className: "grid gap-2", role: "status", children: loadingItems.map((item) => (_jsxs("div", { className: "rounded-md border p-(--panel-padding)", children: [_jsx(Skeleton, { className: "mb-2 h-4 w-2/3" }), _jsx(Skeleton, { className: "mb-4 h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] }, item))) }));
+}
+function FeedbackUserListEmpty() {
+    return (_jsx(Empty, { className: "min-h-72 border border-dashed", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(InboxIcon, {}) }), _jsx(EmptyTitle, { children: "No feedback yet" }), _jsx(EmptyDescription, { children: "Feedback you submit will appear here with its current progress." })] }) }));
+}
+const loadingItems = ["first", "second", "third"];
+export { FeedbackUserList };

package/dist/components/blocks/invite-user-sheet.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+type InviteUserRole = {
+    description?: string;
+    label: string;
+    value: string;
+};
+type InviteUserValues = {
+    email: string;
+    role: string;
+};
+type InviteUserSheetProps = {
+    defaultRole?: string;
+    isSubmitting?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSubmit: (values: InviteUserValues) => void | Promise<void>;
+    open: boolean;
+    roles: InviteUserRole[];
+};
+declare function InviteUserSheet({ defaultRole, isSubmitting, onOpenChange, onSubmit, open, roles, }: InviteUserSheetProps): React.JSX.Element;
+export { InviteUserSheet, type InviteUserRole, type InviteUserSheetProps, type InviteUserValues };

package/dist/components/blocks/invite-user-sheet.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SendIcon } from "lucide-react";
+import { Button } from "../ui/button";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "../ui/field";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../ui/sheet";
+function InviteUserSheet({ defaultRole, isSubmitting = false, onOpenChange, onSubmit, open, roles, }) {
+    const initialRole = getInitialRole(roles, defaultRole);
+    const formId = React.useId();
+    const emailFieldId = `${formId}-email`;
+    const roleFieldId = `${formId}-role`;
+    const [email, setEmail] = React.useState("");
+    const [role, setRole] = React.useState(initialRole);
+    const [error, setError] = React.useState();
+    React.useEffect(() => {
+        setRole(initialRole);
+    }, [initialRole]);
+    React.useEffect(() => {
+        if (open)
+            return;
+        setEmail("");
+        setError(undefined);
+        setRole(initialRole);
+    }, [initialRole, open]);
+    const submitInvite = async (event) => {
+        event.preventDefault();
+        const values = { email: email.trim(), role };
+        const validationError = getInviteValidationError(values);
+        setError(validationError);
+        if (validationError)
+            return;
+        try {
+            await onSubmit(values);
+        }
+        catch {
+            setError("Unable to send invite. Please try again.");
+        }
+    };
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { children: [_jsx(InviteUserSheetHeader, {}), _jsx(SheetBody, { children: _jsx("form", { className: "grid gap-(--panel-gap)", id: formId, onSubmit: submitInvite, children: _jsx(InviteUserFields, { email: email, emailFieldId: emailFieldId, error: error, isSubmitting: isSubmitting, onEmailChange: setEmail, onRoleChange: setRole, role: role, roleFieldId: roleFieldId, roles: roles }) }) }), _jsx(InviteUserSheetFooter, { formId: formId, isSubmitting: isSubmitting, roles: roles })] }) }));
+}
+function InviteUserSheetHeader() {
+    return (_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Invite user" }), _jsx(SheetDescription, { children: "Add a teammate and send an application invite." })] }));
+}
+function InviteUserFields({ email, emailFieldId, error, isSubmitting, onEmailChange, onRoleChange, role, roleFieldId, roles, }) {
+    return (_jsxs(FieldGroup, { children: [_jsxs(Field, { "data-invalid": error === "Email is required", children: [_jsx(FieldLabel, { htmlFor: emailFieldId, children: "Email" }), _jsx(Input, { "aria-invalid": error === "Email is required", autoComplete: "email", disabled: isSubmitting, id: emailFieldId, onChange: (event) => onEmailChange(event.target.value), placeholder: "name@company.com", type: "email", value: email }), error === "Email is required" ? _jsx(FieldError, { children: error }) : null] }), _jsx(InviteUserRoleField, { error: error, isSubmitting: isSubmitting, onRoleChange: onRoleChange, role: role, roleFieldId: roleFieldId, roles: roles }), _jsx(InviteUserSubmitError, { error: error })] }));
+}
+function InviteUserSubmitError({ error }) {
+    if (!error || error === "Email is required" || error === "Role is required")
+        return null;
+    return _jsx(FieldError, { children: error });
+}
+function InviteUserRoleField({ error, isSubmitting, onRoleChange, role, roleFieldId, roles, }) {
+    return (_jsxs(Field, { "data-invalid": error === "Role is required", children: [_jsxs(FieldContent, { children: [_jsx(FieldLabel, { htmlFor: roleFieldId, children: "Role" }), _jsx(FieldDescription, { children: "Choose the initial access level for this user." })] }), _jsxs(Select, { disabled: isSubmitting || roles.length === 0, onValueChange: onRoleChange, value: role, children: [_jsx(SelectTrigger, { "aria-invalid": error === "Role is required", className: "w-full", id: roleFieldId, children: _jsx(SelectValue, { placeholder: "Select role" }) }), _jsx(SelectContent, { children: roles.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] }), error === "Role is required" ? _jsx(FieldError, { children: error }) : null] }));
+}
+function InviteUserSheetFooter({ formId, isSubmitting, roles, }) {
+    return (_jsx(SheetFooter, { children: _jsxs(Button, { disabled: roles.length === 0, form: formId, loading: isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Send invite"] }) }));
+}
+function getInitialRole(roles, defaultRole) {
+    if (defaultRole && roles.some((role) => role.value === defaultRole))
+        return defaultRole;
+    return roles[0]?.value ?? "";
+}
+function getInviteValidationError(values) {
+    if (!values.email)
+        return "Email is required";
+    if (!values.role)
+        return "Role is required";
+    return undefined;
+}
+export { InviteUserSheet };

package/dist/components/blocks/kanban-board-parts.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+import type { KanbanCardData, KanbanColumnData, KanbanMoveEvent } from "./kanban-types";
+import { type KanbanBoardState, type KanbanOverlayRect } from "./kanban-board-utils";
+type KanbanBoardColumnProps = {
+    activeCardId: string | undefined;
+    activeCardRect: KanbanOverlayRect | undefined;
+    activeMove: KanbanMoveEvent | undefined;
+    boardState: KanbanBoardState;
+    column: KanbanColumnData;
+    columnMaxHeight: React.CSSProperties["maxHeight"];
+    empty?: React.ReactNode;
+    isLoading: boolean;
+    isOver: boolean;
+    onCardMove?: (event: KanbanMoveEvent) => void;
+    onCardSelect?: (card: KanbanCardData) => void;
+    renderCard?: (card: KanbanCardData) => React.ReactNode;
+    renderCardActions?: (card: KanbanCardData) => React.ReactNode;
+    renderColumnActions?: (column: KanbanColumnData) => React.ReactNode;
+    suppressSelectRef: React.MutableRefObject<boolean>;
+};
+declare function KanbanBoardColumn({ activeCardId, activeCardRect, activeMove, boardState, column, columnMaxHeight, empty, isLoading, isOver, onCardMove, onCardSelect, renderCard, renderCardActions, renderColumnActions, suppressSelectRef, }: KanbanBoardColumnProps): React.JSX.Element;
+declare function KanbanDragOverlay({ activeCard, activeCardRect, }: {
+    activeCard: KanbanCardData | undefined;
+    activeCardRect: KanbanOverlayRect | undefined;
+}): React.JSX.Element;
+export { KanbanBoardColumn, KanbanDragOverlay };

package/dist/components/blocks/kanban-board-parts.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragOverlay, useDroppable } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { createPortal } from "react-dom";
+import { KanbanCard } from "./kanban-card";
+import { KanbanColumn } from "./kanban-column";
+import { getColumnDroppableId, } from "./kanban-board-utils";
+function KanbanBoardColumn({ activeCardId, activeCardRect, activeMove, boardState, column, columnMaxHeight, empty, isLoading, isOver, onCardMove, onCardSelect, renderCard, renderCardActions, renderColumnActions, suppressSelectRef, }) {
+    const cards = boardState.cardsByColumnId.get(column.id) ?? [];
+    const dropPlaceholderIndex = getDropPlaceholderIndex(column.id, activeMove);
+    const droppable = useDroppable({
+        data: { columnId: column.id, type: "column" },
+        id: getColumnDroppableId(column.id),
+    });
+    return (_jsx("div", { className: "w-72 shrink-0", ref: droppable.setNodeRef, children: _jsx(SortableContext, { items: cards.map((card) => card.id), strategy: verticalListSortingStrategy, children: _jsx(KanbanColumn, { actionsSlot: renderColumnActions?.(column), cards: cards, column: column, columnMaxHeight: columnMaxHeight, dropPlaceholder: dropPlaceholderIndex === undefined ? undefined : (_jsx(KanbanDropPlaceholder, { height: activeCardRect?.height })), dropPlaceholderIndex: dropPlaceholderIndex, empty: empty, isLoading: isLoading, isOver: isOver || droppable.isOver, renderCard: (card) => (_jsx(SortableKanbanCard, { activeCardHeight: activeCardRect?.height, activeCardMode: getActiveCardMode(card, activeMove), card: card, dragDisabled: Boolean(!onCardMove || card.disabled), isActiveCard: activeCardId === card.id, onCardSelect: onCardSelect, renderCard: renderCard, renderCardActions: renderCardActions, suppressSelectRef: suppressSelectRef })) }) }) }));
+}
+function SortableKanbanCard({ activeCardHeight, activeCardMode, card, dragDisabled, isActiveCard, onCardSelect, renderCard, renderCardActions, suppressSelectRef, }) {
+    const sortable = useSortable({
+        data: { card, columnId: card.columnId, type: "card" },
+        disabled: dragDisabled,
+        id: card.id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(sortable.transform),
+        transition: sortable.transition,
+    };
+    return (_jsx("div", { ...sortable.attributes, ...sortable.listeners, "aria-disabled": card.disabled || undefined, className: "rounded-md outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50 data-[disabled=true]:cursor-default data-[disabled=true]:opacity-60 data-[draggable=true]:cursor-grab data-[draggable=true]:active:cursor-grabbing", "data-disabled": Boolean(card.disabled), "data-draggable": !dragDisabled, onClick: getSortableCardClickHandler({ card, onCardSelect, suppressSelectRef }), ref: sortable.setNodeRef, style: style, children: _jsx(SortableKanbanCardContent, { activeCardHeight: activeCardHeight, activeCardMode: activeCardMode, card: card, isActiveCard: isActiveCard, isDragging: sortable.isDragging, renderCard: renderCard, renderCardActions: renderCardActions }) }));
+}
+function SortableKanbanCardContent({ activeCardHeight, activeCardMode, card, isActiveCard, isDragging, renderCard, renderCardActions, }) {
+    if (isActiveCard && activeCardMode === "spacer") {
+        return _jsx(KanbanActiveCardSpacer, { height: activeCardHeight });
+    }
+    if (isActiveCard)
+        return _jsx(KanbanDropPlaceholder, { height: activeCardHeight });
+    if (renderCard)
+        return renderCard(card);
+    return _jsx(KanbanCard, { actionsSlot: renderCardActions?.(card), card: card, isDragging: isDragging });
+}
+function KanbanActiveCardSpacer({ height }) {
+    return _jsx("div", { "aria-hidden": "true", style: { height: height ? Math.max(height, 72) : 96 } });
+}
+function KanbanDropPlaceholder({ height }) {
+    return (_jsx("div", { "aria-hidden": "true", className: "rounded-md border border-dashed border-ring bg-muted/60 shadow-inner", style: { height: height ? Math.max(height, 72) : 96 } }));
+}
+function KanbanDragOverlay({ activeCard, activeCardRect, }) {
+    const overlay = (_jsx(DragOverlay, { adjustScale: false, children: activeCard ? (_jsx("div", { style: { width: activeCardRect?.width }, children: _jsx(KanbanCard, { card: activeCard, isDragging: true }) })) : null }));
+    if (typeof document === "undefined")
+        return overlay;
+    return createPortal(overlay, document.body);
+}
+function getSortableCardClickHandler({ card, onCardSelect, suppressSelectRef, }) {
+    return (event) => {
+        if (suppressSelectRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (!onCardSelect || card.disabled)
+            return;
+        if (event.target instanceof HTMLElement && event.target.closest("[data-kanban-card-action]")) {
+            return;
+        }
+        onCardSelect(card);
+    };
+}
+function getDropPlaceholderIndex(columnId, activeMove) {
+    if (!activeMove)
+        return undefined;
+    if (activeMove.fromColumnId === activeMove.toColumnId)
+        return undefined;
+    if (activeMove.toColumnId !== columnId)
+        return undefined;
+    return activeMove.toIndex;
+}
+function getActiveCardMode(card, activeMove) {
+    if (!activeMove)
+        return "placeholder";
+    if (activeMove.cardId !== card.id)
+        return "placeholder";
+    if (activeMove.fromColumnId === activeMove.toColumnId)
+        return "placeholder";
+    return "spacer";
+}
+export { KanbanBoardColumn, KanbanDragOverlay };

package/dist/components/blocks/kanban-board-utils.d.ts

@@ -0,0 +1,42 @@
+import type * as React from "react";
+import type { DragEndEvent, DragOverEvent, DragStartEvent } from "@dnd-kit/core";
+import type { KanbanCardData, KanbanColumnData, KanbanMoveEvent } from "./kanban-types";
+type KanbanBoardState = {
+    cardById: Map<string, KanbanCardData>;
+    cardsByColumnId: Map<string, KanbanCardData[]>;
+};
+type KanbanOverlayRect = {
+    height: number;
+    width: number;
+};
+type KanbanDragStateSetters = {
+    setActiveCard: React.Dispatch<React.SetStateAction<KanbanCardData | undefined>>;
+    setActiveCardRect: React.Dispatch<React.SetStateAction<KanbanOverlayRect | undefined>>;
+    setActiveMove: React.Dispatch<React.SetStateAction<KanbanMoveEvent | undefined>>;
+    setOverColumnId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+declare function getKanbanBoardState(columns: KanbanColumnData[], cards: KanbanCardData[]): {
+    cardById: Map<string, KanbanCardData>;
+    cardsByColumnId: Map<string, KanbanCardData[]>;
+};
+declare function getDragStartHandler({ cardById, setters, suppressSelectRef, }: {
+    cardById: Map<string, KanbanCardData>;
+    setters: KanbanDragStateSetters;
+    suppressSelectRef: React.MutableRefObject<boolean>;
+}): (event: DragStartEvent) => void;
+declare function getDragOverHandler({ boardState, setActiveMove, setOverColumnId, }: {
+    boardState: KanbanBoardState;
+    setActiveMove: React.Dispatch<React.SetStateAction<KanbanMoveEvent | undefined>>;
+    setOverColumnId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}): (event: DragOverEvent) => void;
+declare function getDragEndHandler({ activeMove, boardState, onCardMove, setters, suppressSelectRef, }: {
+    activeMove: KanbanMoveEvent | undefined;
+    boardState: KanbanBoardState;
+    onCardMove?: (event: KanbanMoveEvent) => void;
+    setters: KanbanDragStateSetters;
+    suppressSelectRef: React.MutableRefObject<boolean>;
+}): (event: DragEndEvent) => void;
+declare function clearDragState(setters: KanbanDragStateSetters): void;
+declare function getColumnDroppableId(columnId: string): string;
+export { clearDragState, getColumnDroppableId, getDragEndHandler, getDragOverHandler, getDragStartHandler, getKanbanBoardState, };
+export type { KanbanBoardState, KanbanDragStateSetters, KanbanOverlayRect };

package/dist/components/blocks/kanban-board-utils.js

@@ -0,0 +1,115 @@
+function getKanbanBoardState(columns, cards) {
+    const cardsByColumnId = new Map();
+    const cardById = new Map();
+    const columnIds = new Set(columns.map((column) => column.id));
+    for (const column of columns) {
+        cardsByColumnId.set(column.id, []);
+    }
+    for (const card of cards) {
+        cardById.set(card.id, card);
+        if (import.meta.env.DEV && !columnIds.has(card.columnId)) {
+            console.warn(`KanbanBoard received card "${card.id}" for missing column "${card.columnId}".`);
+        }
+        if (!cardsByColumnId.has(card.columnId))
+            cardsByColumnId.set(card.columnId, []);
+        cardsByColumnId.get(card.columnId)?.push(card);
+    }
+    return { cardById, cardsByColumnId };
+}
+function getDragStartHandler({ cardById, setters, suppressSelectRef, }) {
+    return (event) => {
+        const card = cardById.get(String(event.active.id));
+        setters.setActiveCard(card);
+        setters.setActiveCardRect(getActiveCardRect(event));
+        setters.setActiveMove(undefined);
+        setters.setOverColumnId(card?.columnId);
+        suppressSelectRef.current = true;
+    };
+}
+function getDragOverHandler({ boardState, setActiveMove, setOverColumnId, }) {
+    return (event) => {
+        const moveEvent = getKanbanMoveEvent(event.active.id, event.over?.id, boardState);
+        const nextOverColumnId = moveEvent?.toColumnId ?? getTargetColumnId(event.over?.id, boardState);
+        setActiveMove((currentMove) => areKanbanMovesEqual(currentMove, moveEvent) ? currentMove : moveEvent);
+        setOverColumnId((currentColumnId) => currentColumnId === nextOverColumnId ? currentColumnId : nextOverColumnId);
+    };
+}
+function getDragEndHandler({ activeMove, boardState, onCardMove, setters, suppressSelectRef, }) {
+    return (event) => {
+        const moveEvent = getKanbanMoveEvent(event.active.id, event.over?.id, boardState) ?? activeMove;
+        clearDragState(setters);
+        window.setTimeout(() => {
+            suppressSelectRef.current = false;
+        }, 0);
+        if (moveEvent)
+            onCardMove?.(moveEvent);
+    };
+}
+function getKanbanMoveEvent(activeId, overId, boardState) {
+    const activeCard = boardState.cardById.get(String(activeId));
+    if (!activeCard || !overId)
+        return undefined;
+    const targetColumnId = getTargetColumnId(overId, boardState);
+    if (!targetColumnId)
+        return undefined;
+    const fromCards = boardState.cardsByColumnId.get(activeCard.columnId) ?? [];
+    const targetCards = boardState.cardsByColumnId.get(targetColumnId) ?? [];
+    const fromIndex = fromCards.findIndex((card) => card.id === activeCard.id);
+    const toIndex = getTargetIndex(overId, targetCards);
+    if (fromIndex < 0 || toIndex < 0)
+        return undefined;
+    if (activeCard.columnId === targetColumnId && fromIndex === toIndex)
+        return undefined;
+    return {
+        cardId: activeCard.id,
+        fromColumnId: activeCard.columnId,
+        fromIndex,
+        toColumnId: targetColumnId,
+        toIndex,
+    };
+}
+function clearDragState(setters) {
+    setters.setActiveCard(undefined);
+    setters.setActiveCardRect(undefined);
+    setters.setActiveMove(undefined);
+    setters.setOverColumnId(undefined);
+}
+function getColumnDroppableId(columnId) {
+    return `${columnDroppablePrefix}${columnId}`;
+}
+function getTargetColumnId(overId, boardState) {
+    if (!overId)
+        return undefined;
+    const id = String(overId);
+    if (isColumnDroppableId(id))
+        return id.replace(columnDroppablePrefix, "");
+    return boardState.cardById.get(id)?.columnId;
+}
+function getTargetIndex(overId, targetCards) {
+    const id = String(overId);
+    if (isColumnDroppableId(id))
+        return targetCards.length;
+    return targetCards.findIndex((card) => card.id === id);
+}
+function getActiveCardRect(event) {
+    const rect = event.active.rect.current.initial;
+    if (!rect)
+        return undefined;
+    return { height: rect.height, width: rect.width };
+}
+function isColumnDroppableId(id) {
+    return id.startsWith(columnDroppablePrefix);
+}
+function areKanbanMovesEqual(currentMove, nextMove) {
+    if (!currentMove && !nextMove)
+        return true;
+    if (!currentMove || !nextMove)
+        return false;
+    return (currentMove.cardId === nextMove.cardId &&
+        currentMove.fromColumnId === nextMove.fromColumnId &&
+        currentMove.toColumnId === nextMove.toColumnId &&
+        currentMove.fromIndex === nextMove.fromIndex &&
+        currentMove.toIndex === nextMove.toIndex);
+}
+const columnDroppablePrefix = "kanban-column:";
+export { clearDragState, getColumnDroppableId, getDragEndHandler, getDragOverHandler, getDragStartHandler, getKanbanBoardState, };

package/dist/components/blocks/kanban-board.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { KanbanCardData, KanbanColumnData, KanbanMoveEvent } from "./kanban-types";
+type KanbanBoardProps = {
+    cards: KanbanCardData[];
+    columns: KanbanColumnData[];
+    columnMaxHeight?: React.CSSProperties["maxHeight"];
+    empty?: React.ReactNode;
+    isLoading?: boolean;
+    onCardMove?: (event: KanbanMoveEvent) => void;
+    onCardSelect?: (card: KanbanCardData) => void;
+    renderCard?: (card: KanbanCardData) => React.ReactNode;
+    renderCardActions?: (card: KanbanCardData) => React.ReactNode;
+    renderColumnActions?: (column: KanbanColumnData) => React.ReactNode;
+};
+declare function KanbanBoard({ cards, columns, columnMaxHeight, empty, isLoading, onCardMove, onCardSelect, renderCard, renderCardActions, renderColumnActions, }: KanbanBoardProps): React.JSX.Element;
+export { KanbanBoard, type KanbanBoardProps };

package/dist/components/blocks/kanban-board.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/refs -- dnd-kit drag handlers need a mutable ref to suppress the click fired after a drag. */
+import * as React from "react";
+import { closestCorners, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { KanbanBoardColumn, KanbanDragOverlay } from "./kanban-board-parts";
+import { clearDragState, getDragEndHandler, getDragOverHandler, getDragStartHandler, getKanbanBoardState, } from "./kanban-board-utils";
+function KanbanBoard({ cards, columns, columnMaxHeight = "min(44rem, calc(100vh - 14rem))", empty, isLoading = false, onCardMove, onCardSelect, renderCard, renderCardActions, renderColumnActions, }) {
+    const [activeCard, setActiveCard] = React.useState();
+    const [activeCardRect, setActiveCardRect] = React.useState();
+    const [activeMove, setActiveMove] = React.useState();
+    const [overColumnId, setOverColumnId] = React.useState();
+    const suppressSelectRef = React.useRef(false);
+    const boardState = React.useMemo(() => getKanbanBoardState(columns, cards), [cards, columns]);
+    const dragStateSetters = React.useMemo(() => ({ setActiveCard, setActiveCardRect, setActiveMove, setOverColumnId }), []);
+    const sensors = useKanbanSensors();
+    return (_jsxs(DndContext, { collisionDetection: closestCorners, onDragCancel: () => clearDragState(dragStateSetters), onDragEnd: getDragEndHandler({
+            activeMove,
+            boardState,
+            onCardMove,
+            setters: dragStateSetters,
+            suppressSelectRef,
+        }), onDragOver: getDragOverHandler({
+            boardState,
+            setActiveMove,
+            setOverColumnId,
+        }), onDragStart: getDragStartHandler({
+            cardById: boardState.cardById,
+            setters: dragStateSetters,
+            suppressSelectRef,
+        }), sensors: sensors, children: [_jsx("div", { className: "w-full overflow-x-auto", children: _jsx("div", { className: "flex min-h-80 w-max gap-3 pb-2", children: columns.map((column) => (_jsx(KanbanBoardColumn, { activeCardId: activeCard?.id, activeCardRect: activeCardRect, activeMove: activeMove, boardState: boardState, column: column, columnMaxHeight: columnMaxHeight, empty: empty, isLoading: isLoading, isOver: overColumnId === column.id, onCardMove: onCardMove, onCardSelect: onCardSelect, renderCard: renderCard, renderCardActions: renderCardActions, renderColumnActions: renderColumnActions, suppressSelectRef: suppressSelectRef }, column.id))) }) }), _jsx(KanbanDragOverlay, { activeCard: activeCard, activeCardRect: activeCardRect })] }));
+}
+function useKanbanSensors() {
+    return useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+}
+export { KanbanBoard };

package/dist/components/blocks/kanban-card.d.ts

@@ -0,0 +1,10 @@
+import type * as React from "react";
+import type { KanbanCardData } from "./kanban-types";
+type KanbanCardProps = {
+    actionsSlot?: React.ReactNode;
+    card: KanbanCardData;
+    isDragging?: boolean;
+    onSelect?: (card: KanbanCardData) => void;
+};
+declare function KanbanCard({ actionsSlot, card, isDragging, onSelect }: KanbanCardProps): React.JSX.Element;
+export { KanbanCard, type KanbanCardProps };

package/dist/components/blocks/kanban-card.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function KanbanCard({ actionsSlot, card, isDragging = false, onSelect }) {
+    return (_jsxs("article", { "aria-disabled": card.disabled, "data-dragging": isDragging, "data-disabled": card.disabled, onClick: getCardSelectHandler(card, onSelect), onKeyDown: getCardSelectKeyHandler(card, onSelect), role: onSelect ? "button" : undefined, tabIndex: onSelect && !card.disabled ? 0 : undefined, className: cn("group/kanban-card grid min-w-0 gap-2 rounded-md border bg-card p-3 text-card-foreground shadow-xs transition-[background-color,border-color,box-shadow,opacity,transform] outline-none", "hover:bg-accent/35 focus-visible:border-ring focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", "data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/40 data-[dragging=true]:opacity-80", "data-[disabled=true]:opacity-60", onSelect && !card.disabled ? "cursor-pointer" : undefined), children: [_jsx(KanbanCardHeader, { actionsSlot: actionsSlot, card: card }), card.description ? (_jsx("p", { className: "line-clamp-2 text-sm leading-normal text-muted-foreground", children: card.description })) : null, _jsx(KanbanCardFooter, { card: card })] }));
+}
+function KanbanCardHeader({ actionsSlot, card, }) {
+    return (_jsxs("header", { className: "flex min-w-0 items-start justify-between gap-2", children: [_jsx("h4", { className: "min-w-0 flex-1 text-sm leading-snug font-medium text-foreground", children: card.title }), _jsx("div", { className: "flex shrink-0 items-center gap-1", "data-kanban-card-action": true, onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), children: actionsSlot })] }));
+}
+function KanbanCardFooter({ card }) {
+    if (!card.badges && !card.meta)
+        return null;
+    return (_jsxs("footer", { className: "flex min-w-0 flex-wrap items-center justify-between gap-2", children: [_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: card.badges }), card.meta ? (_jsx("div", { className: "min-w-0 truncate text-xs text-muted-foreground", children: card.meta })) : null] }));
+}
+function getCardSelectHandler(card, onSelect) {
+    return (event) => {
+        if (!onSelect || card.disabled)
+            return;
+        if (event.target instanceof HTMLElement && event.target.closest("[data-kanban-card-action]")) {
+            return;
+        }
+        onSelect(card);
+    };
+}
+function getCardSelectKeyHandler(card, onSelect) {
+    return (event) => {
+        if (!onSelect || card.disabled)
+            return;
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        onSelect(card);
+    };
+}
+export { KanbanCard };

package/dist/components/blocks/kanban-column.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { KanbanCardData, KanbanColumnData } from "./kanban-types";
+type KanbanColumnProps = {
+    actionsSlot?: React.ReactNode;
+    cards: KanbanCardData[];
+    column: KanbanColumnData;
+    columnMaxHeight?: React.CSSProperties["maxHeight"];
+    dropPlaceholder?: React.ReactNode;
+    dropPlaceholderIndex?: number;
+    empty?: React.ReactNode;
+    isLoading?: boolean;
+    isOver?: boolean;
+    renderCard?: (card: KanbanCardData) => React.ReactNode;
+    renderCardActions?: (card: KanbanCardData) => React.ReactNode;
+};
+declare function KanbanColumn({ actionsSlot, cards, column, columnMaxHeight, dropPlaceholder, dropPlaceholderIndex, empty, isLoading, isOver, renderCard, renderCardActions, }: KanbanColumnProps): React.JSX.Element;
+export { KanbanColumn, type KanbanColumnProps };

package/dist/components/blocks/kanban-column.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { KanbanCard } from "./kanban-card";
+import { Skeleton } from "../ui/skeleton";
+import { cn } from "../../lib/utils";
+function KanbanColumn({ actionsSlot, cards, column, columnMaxHeight, dropPlaceholder, dropPlaceholderIndex, empty, isLoading = false, isOver = false, renderCard, renderCardActions, }) {
+    const isOverLimit = isColumnOverLimit(column, cards);
+    return (_jsxs("section", { "aria-label": column.title, "data-over": isOver, className: cn("flex min-h-72 min-w-72 flex-col overflow-hidden rounded-lg border bg-muted/25 transition-colors", "data-[over=true]:border-ring data-[over=true]:bg-muted/60"), style: { maxHeight: columnMaxHeight }, children: [_jsx(KanbanColumnHeader, { actionsSlot: actionsSlot, cardCount: cards.length, column: column, isOverLimit: isOverLimit }), _jsx("div", { className: "grid flex-1 content-start gap-2 overflow-y-auto p-2", children: _jsx(KanbanColumnContent, { cards: cards, dropPlaceholder: dropPlaceholder, dropPlaceholderIndex: dropPlaceholderIndex, empty: empty, isLoading: isLoading, renderCard: renderCard, renderCardActions: renderCardActions }) })] }));
+}
+function KanbanColumnHeader({ actionsSlot, cardCount, column, isOverLimit, }) {
+    return (_jsx("header", { className: "grid gap-1 border-b bg-background/70 px-3 py-2.5", children: _jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: column.title }), _jsx(KanbanColumnCount, { cardCount: cardCount, isOverLimit: isOverLimit, limit: column.limit })] }), column.description ? (_jsx("p", { className: "mt-1 line-clamp-1 text-xs text-muted-foreground", children: column.description })) : null] }), actionsSlot ? _jsx("div", { className: "shrink-0", children: actionsSlot }) : null] }) }));
+}
+function KanbanColumnCount({ cardCount, isOverLimit, limit, }) {
+    const label = typeof limit === "number" ? `${cardCount}/${limit}` : String(cardCount);
+    return (_jsx("span", { "data-over-limit": isOverLimit, className: "rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[11px] leading-none text-muted-foreground tabular-nums data-[over-limit=true]:bg-warning-muted data-[over-limit=true]:text-warning", children: label }));
+}
+function KanbanColumnContent({ cards, dropPlaceholder, dropPlaceholderIndex, empty, isLoading, renderCard, renderCardActions, }) {
+    if (isLoading)
+        return _jsx(KanbanColumnSkeleton, {});
+    if (cards.length === 0 && !dropPlaceholder) {
+        return _jsx(KanbanColumnEmpty, { children: empty });
+    }
+    return (_jsxs(_Fragment, { children: [cards.map((card, index) => (_jsxs(React.Fragment, { children: [dropPlaceholderIndex === index ? dropPlaceholder : null, _jsx("div", { children: renderCard ? (renderCard(card)) : (_jsx(KanbanCard, { actionsSlot: renderCardActions?.(card), card: card })) })] }, card.id))), dropPlaceholderIndex === cards.length ? dropPlaceholder : null] }));
+}
+function KanbanColumnEmpty({ children }) {
+    return (_jsx("div", { className: "rounded-md border border-dashed bg-background/60 px-3 py-2.5 text-sm text-muted-foreground", children: children ?? "No cards" }));
+}
+function KanbanColumnSkeleton() {
+    return (_jsx("div", { className: "grid gap-2", children: Array.from({ length: 3 }).map((_, index) => (_jsxs("div", { className: "rounded-md border bg-card p-3 shadow-xs", children: [_jsx(Skeleton, { className: "h-3.5 w-4/5" }), _jsx(Skeleton, { className: "mt-3 h-3 w-full" }), _jsx(Skeleton, { className: "mt-2 h-3 w-2/3" })] }, index))) }));
+}
+function isColumnOverLimit(column, cards) {
+    return typeof column.limit === "number" && cards.length > column.limit;
+}
+export { KanbanColumn };