@ciridae/ui 0.3.2 → 0.3.5

package/dist/components/blocks/feedback-table.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { StakeholderFeedbackItem } from "@ciridae/ui/feedback-tracking-types";
+import { type FeedbackTableSort, type FeedbackTableSortKey } from "./feedback-table-sort";
+type FeedbackTableProps = {
+    defaultSort?: FeedbackTableSort;
+    emptyAction?: React.ReactNode;
+    emptyDescription?: string;
+    emptyTitle?: string;
+    isLoading?: boolean;
+    items: StakeholderFeedbackItem[];
+    onSelectFeedback?: (item: StakeholderFeedbackItem) => void;
+    onSortChange?: (sort: FeedbackTableSort) => void;
+    sort?: FeedbackTableSort;
+};
+declare function FeedbackTable({ defaultSort, emptyAction, emptyDescription, emptyTitle, isLoading, items, onSelectFeedback, onSortChange, sort, }: FeedbackTableProps): React.JSX.Element;
+export { FeedbackTable, type FeedbackTableProps, type FeedbackTableSort, type FeedbackTableSortKey };

package/dist/components/blocks/feedback-table.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { InboxIcon } from "lucide-react";
+import { DataTable, DataTableContent, DataTableEmpty, DataTableSkeleton, SortableTableHead, } from "@ciridae/ui/data-table";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@ciridae/ui/empty";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@ciridae/ui/table";
+import { defaultFeedbackTableSort, getNextFeedbackTableSort, sortFeedbackItems, } from "./feedback-table-sort";
+import { FeedbackTableRow } from "./feedback-table-row";
+function FeedbackTable({ defaultSort = defaultFeedbackTableSort, emptyAction, emptyDescription = "No feedback has been submitted yet.", emptyTitle = "No feedback", isLoading = false, items, onSelectFeedback, onSortChange, sort, }) {
+    const [internalSort, setInternalSort] = React.useState(defaultSort);
+    const activeSort = sort ?? internalSort;
+    const sortedItems = React.useMemo(() => sortFeedbackItems(items, activeSort), [activeSort, items]);
+    const handleSortChange = React.useCallback((key) => {
+        const nextSort = getNextFeedbackTableSort(activeSort, key);
+        if (!sort)
+            setInternalSort(nextSort);
+        onSortChange?.(nextSort);
+    }, [activeSort, onSortChange, sort]);
+    if (isLoading)
+        return _jsx(FeedbackTableLoading, {});
+    if (items.length === 0) {
+        return (_jsx(FeedbackTableEmpty, { action: emptyAction, description: emptyDescription, title: emptyTitle }));
+    }
+    return (_jsx(DataTable, { children: _jsx(DataTableContent, { children: _jsx(FeedbackTableContent, { items: sortedItems, onSelectFeedback: onSelectFeedback, onSortChange: handleSortChange, sort: activeSort }) }) }));
+}
+function FeedbackTableLoading() {
+    return (_jsx(DataTable, { children: _jsx(DataTableSkeleton, { columns: 7, rows: 6 }) }));
+}
+function FeedbackTableEmpty({ action, description, title, }) {
+    return (_jsx(DataTable, { children: _jsx(DataTableEmpty, { className: "min-h-80 border-b-0", children: _jsx(FeedbackTableEmptyContent, { action: action, description: description, title: title }) }) }));
+}
+function FeedbackTableEmptyContent({ action, description, title, }) {
+    return (_jsxs(Empty, { className: "border-0", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(InboxIcon, {}) }), _jsx(EmptyTitle, { children: title }), _jsx(EmptyDescription, { children: description })] }), action] }));
+}
+function FeedbackTableContent({ items, onSelectFeedback, onSortChange, sort, }) {
+    return (_jsxs(Table, { children: [_jsx(FeedbackTableHeader, { onSortChange: onSortChange, sort: sort }), _jsx(TableBody, { children: items.map((item) => (_jsx(FeedbackTableRow, { item: item, onSelectFeedback: onSelectFeedback }, item.id))) })] }));
+}
+function FeedbackTableHeader({ onSortChange, sort, }) {
+    return (_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Feedback" }), _jsx(FeedbackSortableHead, { label: "Type", onSortChange: onSortChange, sort: sort, sortKey: "type" }), _jsx(FeedbackSortableHead, { label: "Submitted by", onSortChange: onSortChange, sort: sort, sortKey: "submittedBy" }), _jsx(FeedbackSortableHead, { label: "Status", onSortChange: onSortChange, sort: sort, sortKey: "status" }), _jsx(FeedbackSortableHead, { label: "Submitted", onSortChange: onSortChange, sort: sort, sortKey: "submittedAt" }), _jsx(FeedbackSortableHead, { label: "Updated", onSortChange: onSortChange, sort: sort, sortKey: "updatedAt" }), _jsx(TableHead, { className: "text-right", children: "Files" })] }) }));
+}
+function FeedbackSortableHead({ label, onSortChange, sort, sortKey, }) {
+    const active = sort.key === sortKey;
+    return (_jsx(SortableTableHead, { active: active, direction: active ? sort.direction : "asc", onSort: () => onSortChange(sortKey), children: label }));
+}
+export { FeedbackTable };

package/dist/components/blocks/feedback-tracking-types.d.ts

@@ -0,0 +1,78 @@
+type FeedbackStatus = "received" | "in_review" | "planned" | "in_progress" | "resolved";
+type StakeholderFeedbackType = "bug" | "feature" | "general";
+type FeedbackSubmittedBy = {
+    email?: string;
+    imageUrl?: string;
+    name: string;
+    organization?: string;
+};
+type FeedbackAttachment = {
+    name: string;
+    url?: string;
+};
+type StakeholderFeedbackItem = {
+    attachments?: FeedbackAttachment[];
+    description: string;
+    id: string;
+    referenceId?: string;
+    status: FeedbackStatus;
+    subject: string;
+    submittedAt: string;
+    submittedBy: FeedbackSubmittedBy;
+    type: StakeholderFeedbackType;
+    updatedAt?: string;
+};
+type UserFeedbackItem = {
+    attachments?: FeedbackAttachment[];
+    description: string;
+    id: string;
+    referenceId?: string;
+    status: FeedbackStatus;
+    subject: string;
+    submittedAt: string;
+    type: StakeholderFeedbackType;
+    updatedAt?: string;
+};
+type FeedbackMetrics = {
+    awaitingReview: number;
+    inProgress: number;
+    receivedThisWeek: number;
+    resolvedThisWeek: number;
+    triagedThisWeek: number;
+};
+declare const feedbackStatusLabels: Record<FeedbackStatus, string>;
+declare const feedbackTypeLabels: Record<StakeholderFeedbackType, string>;
+declare const feedbackStatusOptions: readonly [{
+    readonly label: "All statuses";
+    readonly value: "all";
+}, {
+    readonly label: string;
+    readonly value: "received";
+}, {
+    readonly label: string;
+    readonly value: "in_review";
+}, {
+    readonly label: string;
+    readonly value: "planned";
+}, {
+    readonly label: string;
+    readonly value: "in_progress";
+}, {
+    readonly label: string;
+    readonly value: "resolved";
+}];
+declare const feedbackTypeOptions: readonly [{
+    readonly label: "All types";
+    readonly value: "all";
+}, {
+    readonly label: string;
+    readonly value: "bug";
+}, {
+    readonly label: string;
+    readonly value: "feature";
+}, {
+    readonly label: string;
+    readonly value: "general";
+}];
+declare function getFeedbackInitials(name: string, email: string | undefined): string;
+export { feedbackStatusLabels, feedbackStatusOptions, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, type FeedbackAttachment, type FeedbackMetrics, type FeedbackStatus, type FeedbackSubmittedBy, type StakeholderFeedbackItem, type StakeholderFeedbackType, type UserFeedbackItem, };

package/dist/components/blocks/feedback-tracking-types.js

@@ -0,0 +1,36 @@
+const feedbackStatusLabels = {
+    in_progress: "In progress",
+    in_review: "In review",
+    planned: "Planned",
+    received: "Received",
+    resolved: "Resolved",
+};
+const feedbackTypeLabels = {
+    bug: "Bug",
+    feature: "Feature request",
+    general: "General",
+};
+const feedbackStatusOptions = [
+    { label: "All statuses", value: "all" },
+    { label: feedbackStatusLabels.received, value: "received" },
+    { label: feedbackStatusLabels.in_review, value: "in_review" },
+    { label: feedbackStatusLabels.planned, value: "planned" },
+    { label: feedbackStatusLabels.in_progress, value: "in_progress" },
+    { label: feedbackStatusLabels.resolved, value: "resolved" },
+];
+const feedbackTypeOptions = [
+    { label: "All types", value: "all" },
+    { label: feedbackTypeLabels.bug, value: "bug" },
+    { label: feedbackTypeLabels.feature, value: "feature" },
+    { label: feedbackTypeLabels.general, value: "general" },
+];
+function getFeedbackInitials(name, email) {
+    const source = name.trim() || email || "Stakeholder";
+    return source
+        .split(/\s|@/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part.charAt(0).toUpperCase())
+        .join("");
+}
+export { feedbackStatusLabels, feedbackStatusOptions, feedbackTypeLabels, feedbackTypeOptions, getFeedbackInitials, };

package/dist/components/blocks/feedback-type-badge.d.ts

@@ -0,0 +1,6 @@
+import { type StakeholderFeedbackType } from "./feedback-tracking-types";
+type FeedbackTypeBadgeProps = {
+    type: StakeholderFeedbackType;
+};
+declare function FeedbackTypeBadge({ type }: FeedbackTypeBadgeProps): import("react").JSX.Element;
+export { FeedbackTypeBadge, type FeedbackTypeBadgeProps };

package/dist/components/blocks/feedback-type-badge.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@ciridae/ui/badge";
+import { feedbackTypeLabels } from "./feedback-tracking-types";
+function FeedbackTypeBadge({ type }) {
+    return _jsx(Badge, { variant: feedbackTypeVariants[type], children: feedbackTypeLabels[type] });
+}
+const feedbackTypeVariants = {
+    bug: "destructive",
+    feature: "info",
+    general: "outline",
+};
+export { FeedbackTypeBadge };

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

@@ -0,0 +1,10 @@
+import type * as React from "react";
+import type { UserFeedbackItem } from "@ciridae/ui/feedback-tracking-types";
+type FeedbackUserDetailProps = {
+    activityLabel?: string;
+    activitySlot?: React.ReactNode;
+    feedback?: UserFeedbackItem;
+    onBack?: () => void;
+};
+declare function FeedbackUserDetail({ activityLabel, activitySlot, feedback, onBack, }: FeedbackUserDetailProps): React.JSX.Element;
+export { FeedbackUserDetail, type FeedbackUserDetailProps };

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 "@ciridae/ui/feedback-date-format";
+import { FeedbackStatusBadge } from "@ciridae/ui/feedback-status-badge";
+import { FeedbackTypeBadge } from "@ciridae/ui/feedback-type-badge";
+import { Button } from "@ciridae/ui/button";
+import { Card } from "@ciridae/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@ciridae/ui/empty";
+import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "@ciridae/ui/item";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "@ciridae/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 "@ciridae/ui/feedback-tracking-types";
+type FeedbackUserListProps = {
+    isLoading?: boolean;
+    items: UserFeedbackItem[];
+    onSelectFeedback?: (item: UserFeedbackItem) => void;
+    selectedId?: string;
+};
+declare function FeedbackUserList({ isLoading, items, onSelectFeedback, selectedId, }: FeedbackUserListProps): import("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 "@ciridae/ui/feedback-date-format";
+import { FeedbackStatusBadge } from "@ciridae/ui/feedback-status-badge";
+import { FeedbackTypeBadge } from "@ciridae/ui/feedback-type-badge";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@ciridae/ui/empty";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemTitle, } from "@ciridae/ui/item";
+import { Skeleton } from "@ciridae/ui/skeleton";
+import { cn } from "@ciridae/ui/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 "@ciridae/ui/button";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@ciridae/ui/field";
+import { Input } from "@ciridae/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@ciridae/ui/select";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "@ciridae/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 "@ciridae/ui/kanban-types";
+import { type KanbanBoardState, type KanbanOverlayRect } from "@ciridae/ui/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 "@ciridae/ui/kanban-card";
+import { KanbanColumn } from "@ciridae/ui/kanban-column";
+import { getColumnDroppableId, } from "@ciridae/ui/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 "@ciridae/ui/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 };