@ciridae/ui 0.3.3 → 0.3.6

package/dist/components/blocks/admin-users-table.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MoreHorizontalIcon, ShieldCheckIcon, UserPlusIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { DataTable, DataTableContent, DataTableEmpty, DataTableSkeleton } from "../ui/data-table";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+function AdminUsersTable({ isLoading = false, users, ...actions }) {
+    if (isLoading) {
+        return _jsx(AdminUsersTableLoading, {});
+    }
+    if (users.length === 0) {
+        return _jsx(AdminUsersTableEmpty, {});
+    }
+    return (_jsx(DataTable, { children: _jsx(DataTableContent, { children: _jsx(AdminUsersTableContent, { actions: actions, users: users }) }) }));
+}
+function AdminUsersTableLoading() {
+    return (_jsx(DataTable, { children: _jsx(DataTableSkeleton, { columns: 5, rows: 5 }) }));
+}
+function AdminUsersTableEmpty() {
+    return (_jsx(DataTable, { children: _jsx(DataTableEmpty, { className: "min-h-80 border-b", children: _jsx(AdminUsersEmptyContent, {}) }) }));
+}
+function AdminUsersEmptyContent() {
+    return (_jsx(Empty, { className: "border-0", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(UserPlusIcon, {}) }), _jsx(EmptyTitle, { children: "No users yet" }), _jsx(EmptyDescription, { children: "Invite the first teammate to start managing access." })] }) }));
+}
+function AdminUsersTableContent({ actions, users, }) {
+    return (_jsxs(Table, { children: [_jsx(AdminUsersTableHeader, {}), _jsx(TableBody, { children: users.map((user) => (_jsx(AdminUsersTableRow, { actions: actions, user: user }, user.id))) })] }));
+}
+function AdminUsersTableHeader() {
+    return (_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "User" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Activity" }), _jsx(TableHead, { className: "w-12 text-right", children: "Actions" })] }) }));
+}
+function AdminUsersTableRow({ actions, user, }) {
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(AdminUserIdentity, { user: user }) }), _jsx(TableCell, { children: _jsx(AdminUserRole, { user: user }) }), _jsx(TableCell, { children: _jsx(AdminUserStatusBadge, { status: user.status }) }), _jsx(TableCell, { children: _jsx(AdminUserActivity, { user: user }) }), _jsx(TableCell, { className: "text-right", children: _jsx(AdminUserActions, { actions: actions, user: user }) })] }));
+}
+function AdminUserIdentity({ user }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "", src: user.imageUrl }), _jsx(AvatarFallback, { children: getInitials(user.name, user.email) })] }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: user.name }), user.isCurrentUser ? _jsx(Badge, { variant: "outline", children: "You" }) : null] }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: user.email })] })] }));
+}
+function AdminUserRole({ user }) {
+    return (_jsxs("div", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ShieldCheckIcon, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "truncate text-sm", children: user.role })] }));
+}
+function AdminUserStatusBadge({ status }) {
+    const label = statusLabels[status];
+    const variant = statusVariants[status];
+    return _jsx(Badge, { variant: variant, children: label });
+}
+function AdminUserActivity({ user }) {
+    const value = getActivityValue(user);
+    return _jsx("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: value });
+}
+function AdminUserActions({ actions, user }) {
+    if (!hasAnyAction(actions))
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { "aria-label": `Open actions for ${user.name}`, size: "icon", variant: "ghost", children: _jsx(MoreHorizontalIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(AdminUserActionItems, { actions: actions, user: user }) })] }));
+}
+function AdminUserActionItems({ actions, user, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuLabel, { children: "User actions" }), actions.onEditUser ? (_jsx(DropdownMenuItem, { onSelect: () => actions.onEditUser?.(user), children: "Edit user" })) : null, actions.onEditUser && hasStatusAction(actions, user) ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(AdminUserStatusActions, { actions: actions, user: user })] }));
+}
+function AdminUserStatusActions({ actions, user, }) {
+    if (user.status === "invited" && actions.onResendInvite) {
+        return (_jsx(DropdownMenuItem, { onSelect: () => actions.onResendInvite?.(user), children: "Resend invite" }));
+    }
+    if (user.status === "suspended" && actions.onReactivateUser) {
+        return (_jsx(DropdownMenuItem, { onSelect: () => actions.onReactivateUser?.(user), children: "Reactivate" }));
+    }
+    if (!actions.onDeactivateUser)
+        return null;
+    return (_jsx(DropdownMenuItem, { disabled: user.isCurrentUser, onSelect: () => actions.onDeactivateUser?.(user), variant: "destructive", children: "Deactivate" }));
+}
+const statusLabels = {
+    active: "Active",
+    invited: "Invited",
+    suspended: "Suspended",
+};
+const statusVariants = {
+    active: "success",
+    invited: "warning",
+    suspended: "destructive",
+};
+function getInitials(name, email) {
+    const source = name.trim() || email;
+    return source
+        .split(/\s|@/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part.charAt(0).toUpperCase())
+        .join("");
+}
+function getActivityValue(user) {
+    if (user.status === "invited")
+        return formatDateValue(user.invitedAt, "Invite pending");
+    if (user.status === "suspended")
+        return "Access suspended";
+    return formatDateValue(user.lastActiveAt, "No activity");
+}
+function formatDateValue(value, fallback) {
+    if (!value)
+        return fallback;
+    return value;
+}
+function hasAnyAction(actions) {
+    return Boolean(actions.onDeactivateUser ||
+        actions.onEditUser ||
+        actions.onReactivateUser ||
+        actions.onResendInvite);
+}
+function hasStatusAction(actions, user) {
+    if (user.status === "invited" && actions.onResendInvite)
+        return true;
+    if (user.status === "suspended" && actions.onReactivateUser)
+        return true;
+    return Boolean(actions.onDeactivateUser);
+}
+export { AdminUsersTable };

package/dist/components/blocks/comment-composer.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type CommentAuthor } from "./comment-types";
+type CommentComposerProps = {
+    actionsSlot?: React.ReactNode;
+    author?: CommentAuthor;
+    defaultExpanded?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    isSubmitting?: boolean;
+    onSubmit: (body: string) => void | Promise<void>;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+declare function CommentComposer({ actionsSlot, author, defaultExpanded, defaultValue, disabled, isSubmitting, onSubmit, onValueChange, placeholder, value, }: CommentComposerProps): React.JSX.Element;
+export { CommentComposer, type CommentComposerProps };

package/dist/components/blocks/comment-composer.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { getCommentAuthorInitials } from "./comment-types";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { InputGroupButton, InputGroupTextarea } from "../ui/input-group";
+const COMMENT_TEXTAREA_MAX_HEIGHT = 128;
+function CommentComposer({ actionsSlot, author, defaultExpanded = false, defaultValue = "", disabled = false, isSubmitting = false, onSubmit, onValueChange, placeholder = "Write a reply...", value, }) {
+    const textareaRef = React.useRef(null);
+    const state = useCommentComposerState({
+        defaultExpanded,
+        defaultValue,
+        disabled,
+        isSubmitting,
+        onSubmit,
+        onValueChange,
+        value,
+    });
+    React.useEffect(() => {
+        resizeCommentTextarea(textareaRef.current);
+    }, [state.value]);
+    const isDisabled = disabled || isSubmitting;
+    return (_jsx("form", { onSubmit: state.onSubmit, children: _jsxs("div", { className: "grid w-full gap-1.5 rounded-md border border-input bg-background px-2.5 py-2 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[var(--focus-ring-width)] focus-within:ring-ring/50 dark:bg-input/30", "data-disabled": isDisabled ? "true" : undefined, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(CommentComposerAvatar, { author: author }), _jsx(InputGroupTextarea, { "aria-label": "Comment", className: "max-h-32 min-h-7 overflow-y-hidden px-0 py-1 text-sm leading-5", disabled: isDisabled, onBlur: state.onBlur, onChange: state.onValueChange, onFocus: state.onFocus, placeholder: placeholder, ref: textareaRef, rows: 1, value: state.value })] }), _jsx(CommentComposerActions, { actionsSlot: actionsSlot, canSubmit: state.canSubmit, isSubmitting: isSubmitting, showActions: state.showActions })] }) }));
+}
+function useCommentComposerState({ defaultExpanded, defaultValue, disabled, isSubmitting, onSubmit, onValueChange, value, }) {
+    const [localValue, setLocalValue] = React.useState(defaultValue);
+    const [isActive, setIsActive] = React.useState(getInitialExpanded(defaultExpanded, defaultValue, value));
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : localValue;
+    const canSubmit = currentValue.trim().length > 0 && !disabled && !isSubmitting;
+    const showActions = isActive || currentValue.trim().length > 0;
+    React.useEffect(() => {
+        if (isControlled && currentValue.trim().length > 0)
+            setIsActive(true);
+    }, [currentValue, isControlled]);
+    return {
+        canSubmit,
+        onBlur: getBlurHandler(currentValue, setIsActive),
+        onFocus: getFocusHandler(disabled, isSubmitting, setIsActive),
+        onSubmit: getSubmitHandler({
+            currentValue,
+            disabled,
+            isControlled,
+            isSubmitting,
+            onSubmit,
+            setIsActive,
+            setLocalValue,
+        }),
+        onValueChange: getValueChangeHandler({ isControlled, onValueChange, setLocalValue }),
+        showActions,
+        value: currentValue,
+    };
+}
+function getInitialExpanded(defaultExpanded, defaultValue, value) {
+    return defaultExpanded || defaultValue.trim().length > 0 || (value?.trim().length ?? 0) > 0;
+}
+function getFocusHandler(disabled, isSubmitting, setIsActive) {
+    return () => {
+        if (disabled || isSubmitting)
+            return;
+        setIsActive(true);
+    };
+}
+function getBlurHandler(currentValue, setIsActive) {
+    return (event) => {
+        if (event.currentTarget.form?.contains(event.relatedTarget))
+            return;
+        if (currentValue.trim().length > 0)
+            return;
+        setIsActive(false);
+    };
+}
+function getSubmitHandler({ currentValue, disabled, isControlled, isSubmitting, onSubmit, setIsActive, setLocalValue, }) {
+    return async (event) => {
+        event.preventDefault();
+        const body = currentValue.trim();
+        if (!body || disabled || isSubmitting)
+            return;
+        await onSubmit(body);
+        if (!isControlled) {
+            setLocalValue("");
+            setIsActive(false);
+        }
+    };
+}
+function getValueChangeHandler({ isControlled, onValueChange, setLocalValue, }) {
+    return (event) => {
+        const nextValue = event.target.value;
+        if (!isControlled)
+            setLocalValue(nextValue);
+        onValueChange?.(nextValue);
+    };
+}
+function CommentComposerActions({ actionsSlot, canSubmit, isSubmitting, showActions, }) {
+    if (!showActions)
+        return null;
+    return (_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-2 pl-8", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: actionsSlot }), _jsx(CommentSubmitButton, { canSubmit: canSubmit, isSubmitting: isSubmitting })] }));
+}
+function CommentComposerAvatar({ author }) {
+    const name = author?.name ?? "You";
+    return (_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "", src: author?.avatarUrl }), _jsx(AvatarFallback, { children: getCommentAuthorInitials(name) })] }));
+}
+function CommentSubmitButton({ canSubmit, isSubmitting, }) {
+    return (_jsx(InputGroupButton, { disabled: !canSubmit, loading: isSubmitting, loadingLabel: "Posting comment", size: "sm", type: "submit", children: "Post" }));
+}
+function resizeCommentTextarea(textarea) {
+    if (!textarea)
+        return;
+    textarea.style.height = "auto";
+    const nextHeight = Math.min(textarea.scrollHeight, COMMENT_TEXTAREA_MAX_HEIGHT);
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > COMMENT_TEXTAREA_MAX_HEIGHT ? "auto" : "hidden";
+}
+export { CommentComposer };

package/dist/components/blocks/comment-item.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+import { type CommentItemData } from "./comment-types";
+type CommentItemProps = {
+    actionsSlot?: React.ReactNode;
+    comment: CommentItemData;
+};
+declare function CommentItem({ actionsSlot, comment }: CommentItemProps): React.JSX.Element;
+export { CommentItem, type CommentItemProps };

package/dist/components/blocks/comment-item.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { formatTimestamp, formatTimestampFull, getTimestampDateTime } from "./timestamp-format";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { getCommentAuthorInitials } from "./comment-types";
+function CommentItem({ actionsSlot, comment }) {
+    return (_jsxs("article", { className: "group/comment flex min-w-0 gap-3 rounded-md px-1 py-3", children: [_jsx(CommentAvatar, { comment: comment }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1.5", children: [_jsx(CommentHeader, { actionsSlot: actionsSlot, comment: comment }), _jsx("p", { className: "text-sm leading-relaxed break-words whitespace-pre-wrap text-foreground", children: comment.body })] })] }));
+}
+function CommentAvatar({ comment }) {
+    return (_jsxs(Avatar, { className: "mt-0.5", size: "sm", children: [_jsx(AvatarImage, { alt: "", src: comment.author.avatarUrl }), _jsx(AvatarFallback, { children: getCommentAuthorInitials(comment.author.name) })] }));
+}
+function CommentHeader({ actionsSlot, comment, }) {
+    return (_jsxs("header", { 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 flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: comment.author.name }), _jsx(CommentTimestamp, { comment: comment })] }), _jsx(CommentState, { comment: comment })] }), actionsSlot ? _jsx("div", { className: "shrink-0", children: actionsSlot }) : null] }));
+}
+function CommentTimestamp({ comment }) {
+    return (_jsx("time", { className: "font-mono text-xs text-muted-foreground tabular-nums", dateTime: getTimestampDateTime(comment.createdAt), title: formatTimestampFull(comment.createdAt), children: formatTimestamp(comment.createdAt) }));
+}
+function CommentState({ comment }) {
+    const state = getCommentState(comment);
+    if (!state)
+        return null;
+    return _jsx("div", { className: cn("text-xs", state.className), children: state.label });
+}
+function getCommentState(comment) {
+    if (comment.status === "sending") {
+        return { className: "text-muted-foreground", label: "Sending" };
+    }
+    if (comment.status === "failed") {
+        return { className: "text-destructive", label: "Failed to post" };
+    }
+    if (isEdited(comment)) {
+        return { className: "text-muted-foreground", label: "Edited" };
+    }
+    return undefined;
+}
+function isEdited(comment) {
+    if (!comment.updatedAt)
+        return false;
+    const createdAt = Date.parse(comment.createdAt);
+    const updatedAt = Date.parse(comment.updatedAt);
+    if (Number.isNaN(createdAt) || Number.isNaN(updatedAt))
+        return false;
+    return updatedAt !== createdAt;
+}
+export { CommentItem };

package/dist/components/blocks/comment-thread.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import type { CommentAuthor, CommentItemData } from "./comment-types";
+type CommentThreadProps = {
+    comments: CommentItemData[];
+    composerAuthor?: CommentAuthor;
+    composerPlaceholder?: string;
+    emptyDescription?: string;
+    emptyTitle?: string;
+    isLoading?: boolean;
+    isSubmitting?: boolean;
+    onSubmit?: (body: string) => void | Promise<void>;
+    readOnly?: boolean;
+    renderCommentActions?: (comment: CommentItemData) => React.ReactNode;
+    showHeader?: boolean;
+    title?: string;
+};
+declare function CommentThread({ comments, composerAuthor, composerPlaceholder, emptyDescription, emptyTitle, isLoading, isSubmitting, onSubmit, readOnly, renderCommentActions, showHeader, title, }: CommentThreadProps): React.JSX.Element;
+export { CommentThread, type CommentThreadProps };

package/dist/components/blocks/comment-thread.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageSquareTextIcon } from "lucide-react";
+import { CommentComposer } from "./comment-composer";
+import { CommentItem } from "./comment-item";
+import { Skeleton } from "../ui/skeleton";
+function CommentThread({ comments, composerAuthor, composerPlaceholder, emptyDescription = "Start the conversation with a short update or question.", emptyTitle = "No comments yet", isLoading = false, isSubmitting = false, onSubmit, readOnly = false, renderCommentActions, showHeader = true, title = "Comments", }) {
+    const showComposer = !readOnly && Boolean(onSubmit);
+    return (_jsxs("section", { className: "grid w-full gap-(--panel-gap)", "aria-label": title, children: [showHeader ? _jsx(CommentThreadHeader, { count: comments.length, title: title }) : null, _jsx(CommentThreadBody, { comments: comments, emptyDescription: emptyDescription, emptyTitle: emptyTitle, isLoading: isLoading, renderCommentActions: renderCommentActions }), showComposer && onSubmit ? (_jsx(CommentComposer, { author: composerAuthor, isSubmitting: isSubmitting, onSubmit: onSubmit, placeholder: composerPlaceholder })) : null] }));
+}
+function CommentThreadHeader({ count, title }) {
+    return (_jsxs("header", { className: "flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: title }), _jsx("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: count })] }));
+}
+function CommentThreadBody({ comments, emptyDescription, emptyTitle, isLoading, renderCommentActions, }) {
+    if (isLoading)
+        return _jsx(CommentThreadSkeleton, {});
+    if (comments.length === 0) {
+        return _jsx(CommentThreadEmpty, { description: emptyDescription, title: emptyTitle });
+    }
+    return (_jsx("div", { className: "grid gap-1", children: comments.map((comment) => (_jsx(CommentItem, { actionsSlot: renderCommentActions?.(comment), comment: comment }, comment.id))) }));
+}
+function CommentThreadSkeleton() {
+    return (_jsx("div", { className: "grid gap-4 py-2", children: Array.from({ length: 3 }).map((_, index) => (_jsx(CommentSkeletonRow, {}, index))) }));
+}
+function CommentSkeletonRow() {
+    return (_jsxs("div", { className: "flex gap-3 px-1 py-2", children: [_jsx(Skeleton, { className: "size-6 rounded-full" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-3 w-40" }), _jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-4/5" })] })] }));
+}
+function CommentThreadEmpty({ description, title }) {
+    return (_jsxs("div", { className: "flex min-w-0 items-start gap-2 rounded-md border border-dashed bg-muted/20 px-3 py-2.5", children: [_jsx(MessageSquareTextIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "grid min-w-0 gap-0.5", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] })] }));
+}
+export { CommentThread };

package/dist/components/blocks/comment-types.d.ts

@@ -0,0 +1,18 @@
+type CommentAuthor = {
+    avatarUrl?: string;
+    email?: string;
+    id: string;
+    name: string;
+};
+type CommentStatus = "sent" | "sending" | "failed";
+type CommentItemData = {
+    author: CommentAuthor;
+    body: string;
+    createdAt: string;
+    id: string;
+    status?: CommentStatus;
+    updatedAt?: string;
+};
+declare function getCommentAuthorInitials(name: string): string;
+export { getCommentAuthorInitials };
+export type { CommentAuthor, CommentItemData, CommentStatus };

package/dist/components/blocks/comment-types.js

@@ -0,0 +1,11 @@
+function getCommentAuthorInitials(name) {
+    const initials = name
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((part) => part[0])
+        .join("")
+        .toUpperCase();
+    return initials || "?";
+}
+export { getCommentAuthorInitials };

package/dist/components/blocks/feedback-center-comments.d.ts

@@ -0,0 +1,12 @@
+import type { CommentItemData } from "./comment-types";
+import type { UserFeedbackItem } from "./feedback-tracking-types";
+type FeedbackCommentSubmitHandler = (feedback: UserFeedbackItem, body: string) => void | Promise<void>;
+type FeedbackCenterCommentThreadProps = {
+    comments: CommentItemData[];
+    feedback?: UserFeedbackItem;
+    isCommentSubmitting: boolean;
+    isCommentsLoading: boolean;
+    onSubmitComment?: FeedbackCommentSubmitHandler;
+};
+declare function FeedbackCenterCommentThread({ comments, feedback, isCommentSubmitting, isCommentsLoading, onSubmitComment, }: FeedbackCenterCommentThreadProps): import("@types/react").JSX.Element;
+export { FeedbackCenterCommentThread, type FeedbackCommentSubmitHandler };

package/dist/components/blocks/feedback-center-comments.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CommentThread } from "./comment-thread";
+function FeedbackCenterCommentThread({ comments, feedback, isCommentSubmitting, isCommentsLoading, onSubmitComment, }) {
+    return (_jsx(CommentThread, { comments: comments, composerPlaceholder: "Write a reply...", isLoading: isCommentsLoading, isSubmitting: isCommentSubmitting, onSubmit: getCommentSubmitHandler(feedback, onSubmitComment), readOnly: !onSubmitComment, showHeader: false }));
+}
+function getCommentSubmitHandler(feedback, onSubmitComment) {
+    if (!feedback || !onSubmitComment)
+        return undefined;
+    return (body) => onSubmitComment(feedback, body);
+}
+export { FeedbackCenterCommentThread };

package/dist/components/blocks/feedback-center-sheet-parts.d.ts

@@ -0,0 +1,34 @@
+import type * as React from "react";
+import type { CommentItemData } from "./comment-types";
+import { type FeedbackCommentSubmitHandler } from "./feedback-center-comments";
+import { type FeedbackComposerProps } from "./feedback-composer";
+import type { UserFeedbackItem } from "./feedback-tracking-types";
+type FeedbackCenterTab = "mine" | "submit";
+type FeedbackCenterView = "detail" | "list";
+type FeedbackCenterComposerProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onSubmittedChange">;
+type FeedbackCenterTabsProps = {
+    commentsByFeedbackId: Record<string, CommentItemData[]>;
+    composerProps: FeedbackCenterComposerProps;
+    formId: string;
+    isCommentSubmitting: boolean;
+    isCommentsLoading: boolean;
+    isLoading: boolean;
+    items: UserFeedbackItem[];
+    onBack: () => void;
+    onCancel: () => void;
+    onSelectFeedback: (item: UserFeedbackItem) => void;
+    onSubmittedChange: (submitted: boolean) => void;
+    onSubmitComment?: FeedbackCommentSubmitHandler;
+    selectedFeedback?: UserFeedbackItem;
+    view: FeedbackCenterView;
+};
+declare function FeedbackCenterSheetHeader(): React.JSX.Element;
+declare function FeedbackCenterTabs({ composerProps, commentsByFeedbackId, formId, isCommentSubmitting, isCommentsLoading, isLoading, items, onBack, onCancel, onSelectFeedback, onSubmittedChange, onSubmitComment, selectedFeedback, view, }: FeedbackCenterTabsProps): React.JSX.Element;
+declare function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, }: {
+    activeTab: FeedbackCenterTab;
+    formId: string;
+    isSubmitted: boolean;
+    isSubmitting: boolean;
+    onCancel: () => void;
+}): React.JSX.Element | null;
+export { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, type FeedbackCenterTab, type FeedbackCenterView, };

package/dist/components/blocks/feedback-center-sheet-parts.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SendIcon } from "lucide-react";
+import { FeedbackCenterCommentThread, } from "./feedback-center-comments";
+import { FeedbackComposer } from "./feedback-composer";
+import { FeedbackUserDetail } from "./feedback-user-detail";
+import { FeedbackUserList } from "./feedback-user-list";
+import { Button } from "../ui/button";
+import { SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet";
+import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+function FeedbackCenterSheetHeader() {
+    return (_jsxs(SheetHeader, { className: "gap-3", children: [_jsxs("div", { className: "grid gap-1.5 pr-12", children: [_jsx(SheetTitle, { children: "Feedback" }), _jsx(SheetDescription, { children: "Send feedback and track your submissions in one place." })] }), _jsx(FeedbackCenterTabsList, {})] }));
+}
+function FeedbackCenterTabs({ composerProps, commentsByFeedbackId, formId, isCommentSubmitting, isCommentsLoading, isLoading, items, onBack, onCancel, onSelectFeedback, onSubmittedChange, onSubmitComment, selectedFeedback, view, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FeedbackCenterSubmitTab, { composerProps: composerProps, formId: formId, onCancel: onCancel, onSubmittedChange: onSubmittedChange }), _jsx(FeedbackCenterMineContent, { commentsByFeedbackId: commentsByFeedbackId, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, onBack: onBack, onSelectFeedback: onSelectFeedback, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, view: view })] }));
+}
+function FeedbackCenterTabsList() {
+    return (_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "submit", children: "Send feedback" }), _jsx(TabsTrigger, { value: "mine", children: "My feedback" })] }));
+}
+function FeedbackCenterSubmitTab({ composerProps, formId, onCancel, onSubmittedChange, }) {
+    return (_jsx(TabsContent, { className: "mt-0", value: "submit", children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: onCancel, onSubmittedChange: onSubmittedChange }) }));
+}
+function FeedbackCenterFooter({ activeTab, formId, isSubmitted, isSubmitting, onCancel, }) {
+    if (activeTab !== "submit" || isSubmitted)
+        return null;
+    return (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Submit feedback"] })] }));
+}
+function FeedbackCenterMineContent(props) {
+    return (_jsx(TabsContent, { className: "mt-0", value: "mine", children: _jsx(FeedbackCenterMineTab, { ...props }) }));
+}
+function FeedbackCenterMineTab({ isLoading, commentsByFeedbackId, isCommentSubmitting, isCommentsLoading, items, onBack, onSelectFeedback, onSubmitComment, selectedFeedback, view, }) {
+    if (view === "detail") {
+        return (_jsx(FeedbackCenterDetailPane, { comments: getFeedbackComments(commentsByFeedbackId, selectedFeedback), feedback: selectedFeedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onBack: onBack, onSubmitComment: onSubmitComment }));
+    }
+    return (_jsx(FeedbackUserList, { isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback, selectedId: selectedFeedback?.id }));
+}
+function FeedbackCenterDetailPane({ comments, feedback, isCommentSubmitting, isCommentsLoading, onBack, onSubmitComment, }) {
+    return (_jsx(FeedbackUserDetail, { activityLabel: "Comments", activitySlot: _jsx(FeedbackCenterCommentThread, { comments: comments, feedback: feedback, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, onSubmitComment: onSubmitComment }), feedback: feedback, onBack: onBack }));
+}
+function getFeedbackComments(commentsByFeedbackId, feedback) {
+    if (!feedback)
+        return [];
+    return commentsByFeedbackId[feedback.id] ?? [];
+}
+export { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, };

package/dist/components/blocks/feedback-center-sheet.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { CommentItemData } from "./comment-types";
+import type { FeedbackCommentSubmitHandler } from "./feedback-center-comments";
+import { type FeedbackCenterTab } from "./feedback-center-sheet-parts";
+import type { FeedbackComposerProps } from "./feedback-composer";
+import type { UserFeedbackItem } from "./feedback-tracking-types";
+type FeedbackCenterSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onSubmittedChange"> & {
+    commentsByFeedbackId?: Record<string, CommentItemData[]>;
+    defaultTab?: FeedbackCenterTab;
+    isCommentSubmitting?: boolean;
+    isCommentsLoading?: boolean;
+    isLoading?: boolean;
+    items: UserFeedbackItem[];
+    onSubmitComment?: FeedbackCommentSubmitHandler;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+};
+declare function FeedbackCenterSheet({ commentsByFeedbackId, defaultTab, isCommentSubmitting, isCommentsLoading, isLoading, items, onSubmitComment, onOpenChange, open, ...composerProps }: FeedbackCenterSheetProps): React.JSX.Element;
+export { FeedbackCenterSheet, type FeedbackCenterSheetProps };

package/dist/components/blocks/feedback-center-sheet.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FeedbackCenterFooter, FeedbackCenterSheetHeader, FeedbackCenterTabs, } from "./feedback-center-sheet-parts";
+import { Sheet, SheetBody, SheetContent } from "../ui/sheet";
+import { Tabs } from "../ui/tabs";
+function FeedbackCenterSheet({ commentsByFeedbackId = {}, defaultTab = "submit", isCommentSubmitting = false, isCommentsLoading = false, isLoading = false, items, onSubmitComment, onOpenChange, open, ...composerProps }) {
+    const formId = React.useId();
+    const [activeTab, setActiveTab] = React.useState(defaultTab);
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const [selectedId, setSelectedId] = React.useState();
+    const [view, setView] = React.useState("list");
+    const selectedFeedback = getSelectedFeedback(items, selectedId);
+    const handleBack = React.useCallback(() => {
+        setView("list");
+    }, []);
+    const handleSelectFeedback = React.useCallback((item) => {
+        setSelectedId(item.id);
+        setView("detail");
+    }, []);
+    const handleTabChange = React.useCallback((tab) => {
+        setActiveTab(tab);
+        setIsSubmitted(false);
+        setView("list");
+    }, []);
+    React.useEffect(() => {
+        if (!open) {
+            setActiveTab(defaultTab);
+            setIsSubmitted(false);
+            setSelectedId(undefined);
+            setView("list");
+        }
+    }, [defaultTab, open]);
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsx(SheetContent, { size: "md", children: _jsxs(Tabs, { className: "min-h-0 flex-1", onValueChange: setFeedbackCenterTab(handleTabChange), value: activeTab, children: [_jsx(FeedbackCenterSheetHeader, {}), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(FeedbackCenterTabs, { composerProps: composerProps, commentsByFeedbackId: commentsByFeedbackId, formId: formId, isCommentSubmitting: isCommentSubmitting, isCommentsLoading: isCommentsLoading, isLoading: isLoading, items: items, onBack: handleBack, onCancel: () => onOpenChange(false), onSelectFeedback: handleSelectFeedback, onSubmittedChange: setIsSubmitted, onSubmitComment: onSubmitComment, selectedFeedback: selectedFeedback, view: view }) }), _jsx(FeedbackCenterFooter, { activeTab: activeTab, formId: formId, isSubmitted: isSubmitted, isSubmitting: composerProps.isSubmitting ?? false, onCancel: () => onOpenChange(false) })] }) }) }));
+}
+function getSelectedFeedback(items, selectedId) {
+    if (!selectedId)
+        return undefined;
+    return items.find((item) => item.id === selectedId);
+}
+function setFeedbackCenterTab(onTabChange) {
+    return (value) => {
+        if (value === "submit" || value === "mine")
+            onTabChange(value);
+    };
+}
+export { FeedbackCenterSheet };

package/dist/components/blocks/feedback-composer-parts.d.ts

@@ -0,0 +1,16 @@
+import type { FeedbackType } from "./feedback-composer-types";
+declare function FeedbackTypeField({ disabled, onTypeChange, type, }: {
+    disabled: boolean;
+    onTypeChange: (type: FeedbackType) => void;
+    type: FeedbackType;
+}): import("@types/react").JSX.Element;
+declare function FeedbackSubmittedState({ onCancel, onSendAnother, referenceId, }: {
+    onCancel?: () => void;
+    onSendAnother: () => void;
+    referenceId?: string;
+}): import("@types/react").JSX.Element;
+declare function FeedbackComposerActions({ isSubmitting, onCancel, }: {
+    isSubmitting: boolean;
+    onCancel?: () => void;
+}): import("@types/react").JSX.Element;
+export { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField };

package/dist/components/blocks/feedback-composer-parts.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BugIcon, CheckCircle2Icon, LightbulbIcon, MessageSquareTextIcon, SendIcon, } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Button } from "../ui/button";
+import { FieldContent, FieldSet, FieldTitle } from "../ui/field";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
+const feedbackTypeOptions = [
+    {
+        icon: BugIcon,
+        label: "Bug",
+        value: "bug",
+    },
+    {
+        icon: LightbulbIcon,
+        label: "Feature request",
+        value: "feature",
+    },
+    {
+        icon: MessageSquareTextIcon,
+        label: "General",
+        value: "general",
+    },
+];
+function FeedbackTypeField({ disabled, onTypeChange, type, }) {
+    return (_jsxs(FieldSet, { className: "gap-2", children: [_jsx(FieldContent, { children: _jsx(FieldTitle, { children: "Type" }) }), _jsx(ToggleGroup, { className: "grid w-full grid-cols-3", disabled: disabled, size: "lg", type: "single", variant: "outline", onValueChange: (value) => {
+                    if (isFeedbackType(value))
+                        onTypeChange(value);
+                }, value: type, children: feedbackTypeOptions.map((option) => (_jsx(FeedbackTypeOption, { option: option }, option.value))) })] }));
+}
+function FeedbackTypeOption({ option }) {
+    const Icon = option.icon;
+    return (_jsxs(ToggleGroupItem, { className: "w-full px-2", value: option.value, children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: option.label })] }));
+}
+function FeedbackSubmittedState({ onCancel, onSendAnother, referenceId, }) {
+    return (_jsxs("div", { className: "grid gap-(--panel-gap)", children: [_jsxs(Alert, { children: [_jsx(CheckCircle2Icon, {}), _jsx(AlertTitle, { children: "Feedback submitted" }), _jsxs(AlertDescription, { children: [_jsx("p", { children: "Your feedback has been sent to the team." }), referenceId ? (_jsxs("p", { children: ["Reference", " ", _jsx("span", { className: "font-mono text-foreground tabular-nums", children: referenceId })] })) : null] })] }), _jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [_jsx(Button, { onClick: onSendAnother, type: "button", variant: "outline", children: "Send another" }), onCancel ? (_jsx(Button, { onClick: onCancel, type: "button", children: "Done" })) : null] })] }));
+}
+function FeedbackComposerActions({ isSubmitting, onCancel, }) {
+    return (_jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [onCancel ? (_jsx(Button, { disabled: isSubmitting, onClick: onCancel, type: "button", variant: "outline", children: "Cancel" })) : null, _jsxs(Button, { loading: isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Submit feedback"] })] }));
+}
+function isFeedbackType(value) {
+    return feedbackTypeOptions.some((option) => option.value === value);
+}
+export { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField };

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

@@ -0,0 +1,11 @@
+type FeedbackType = "bug" | "feature" | "general";
+type FeedbackSubmitValues = {
+    attachments: File[];
+    description: string;
+    subject: string;
+    type: FeedbackType;
+};
+type FeedbackSubmitResult = {
+    referenceId?: string;
+};
+export type { FeedbackSubmitResult, FeedbackSubmitValues, FeedbackType };