@ciridae/ui 0.3.2 → 0.3.5

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 "@ciridae/ui/feedback-center-comments";
+import { FeedbackComposer } from "@ciridae/ui/feedback-composer";
+import { FeedbackUserDetail } from "@ciridae/ui/feedback-user-detail";
+import { FeedbackUserList } from "@ciridae/ui/feedback-user-list";
+import { Button } from "@ciridae/ui/button";
+import { SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@ciridae/ui/sheet";
+import { TabsContent, TabsList, TabsTrigger } from "@ciridae/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 "@ciridae/ui/comment-types";
+import type { FeedbackCommentSubmitHandler } from "@ciridae/ui/feedback-center-comments";
+import { type FeedbackCenterTab } from "@ciridae/ui/feedback-center-sheet-parts";
+import type { FeedbackComposerProps } from "@ciridae/ui/feedback-composer";
+import type { UserFeedbackItem } from "@ciridae/ui/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 "@ciridae/ui/feedback-center-sheet-parts";
+import { Sheet, SheetBody, SheetContent } from "@ciridae/ui/sheet";
+import { Tabs } from "@ciridae/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 "@ciridae/ui/feedback-composer-types";
+declare function FeedbackTypeField({ disabled, onTypeChange, type, }: {
+    disabled: boolean;
+    onTypeChange: (type: FeedbackType) => void;
+    type: FeedbackType;
+}): import("react").JSX.Element;
+declare function FeedbackSubmittedState({ onCancel, onSendAnother, referenceId, }: {
+    onCancel?: () => void;
+    onSendAnother: () => void;
+    referenceId?: string;
+}): import("react").JSX.Element;
+declare function FeedbackComposerActions({ isSubmitting, onCancel, }: {
+    isSubmitting: boolean;
+    onCancel?: () => void;
+}): import("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 "@ciridae/ui/alert";
+import { Button } from "@ciridae/ui/button";
+import { FieldContent, FieldSet, FieldTitle } from "@ciridae/ui/field";
+import { ToggleGroup, ToggleGroupItem } from "@ciridae/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 };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { FeedbackSubmitResult, FeedbackSubmitValues, FeedbackType } from "@ciridae/ui/feedback-composer-types";
+type FeedbackComposerProps = {
+    acceptedFileTypes?: string;
+    actions?: "inline" | "external";
+    attachmentsEnabled?: boolean;
+    defaultType?: FeedbackType;
+    formId?: string;
+    isSubmitting?: boolean;
+    maxAttachmentSizeMb?: number;
+    maxAttachments?: number;
+    onCancel?: () => void;
+    onSubmittedChange?: (submitted: boolean) => void;
+    onSubmit: (values: FeedbackSubmitValues) => void | Promise<void | FeedbackSubmitResult>;
+};
+declare function FeedbackComposer(props: FeedbackComposerProps): React.JSX.Element;
+export { FeedbackComposer, type FeedbackComposerProps, type FeedbackSubmitResult, type FeedbackSubmitValues, type FeedbackType, };

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FeedbackComposerActions, FeedbackSubmittedState, FeedbackTypeField, } from "@ciridae/ui/feedback-composer-parts";
+import { FileUploadField } from "@ciridae/ui/file-upload-field";
+import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from "@ciridae/ui/field";
+import { Input } from "@ciridae/ui/input";
+import { Textarea } from "@ciridae/ui/textarea";
+function FeedbackComposer(props) {
+    const state = useFeedbackComposerState(props.defaultType ?? "bug");
+    const ids = useFeedbackComposerIds();
+    if (state.submitResult) {
+        return (_jsx(FeedbackSubmittedState, { onCancel: props.onCancel, onSendAnother: () => {
+                state.resetForm();
+                props.onSubmittedChange?.(false);
+            }, referenceId: state.submitResult.referenceId }));
+    }
+    return _jsx(FeedbackComposerForm, { ids: ids, props: props, state: state });
+}
+function FeedbackComposerForm({ ids, props, state, }) {
+    const isSubmitting = props.isSubmitting ?? false;
+    return (_jsxs("form", { className: "grid gap-(--panel-gap)", id: props.formId, onSubmit: (event) => submitFeedback(event, props, state), children: [_jsxs(FieldGroup, { children: [_jsx(FeedbackTypeField, { disabled: isSubmitting, onTypeChange: state.setType, type: state.type }), _jsx(FeedbackSubjectField, { disabled: isSubmitting, error: state.error, fieldId: ids.subjectId, onSubjectChange: state.setSubject, subject: state.subject }), _jsx(FeedbackDescriptionField, { description: state.description, disabled: isSubmitting, error: state.error, fieldId: ids.descriptionId, onDescriptionChange: state.setDescription }), _jsx(FeedbackAttachmentsField, { props: props, state: state }), state.submitError ? _jsx(FieldError, { children: state.submitError }) : null] }), props.actions === "external" ? null : (_jsx(FeedbackComposerActions, { isSubmitting: isSubmitting, onCancel: props.onCancel }))] }));
+}
+function FeedbackSubjectField({ disabled, error, fieldId, onSubjectChange, subject, }) {
+    return (_jsxs(Field, { "data-invalid": error === "subject", children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Subject" }) }), _jsx(Input, { "aria-invalid": error === "subject", "aria-required": "true", disabled: disabled, id: fieldId, onChange: (event) => onSubjectChange(event.target.value), placeholder: "Short subject for the team", value: subject }), error === "subject" ? _jsx(FieldError, { children: "Subject is required." }) : null] }));
+}
+function FeedbackDescriptionField({ description, disabled, error, fieldId, onDescriptionChange, }) {
+    return (_jsxs(Field, { "data-invalid": error === "description", children: [_jsx(FieldContent, { children: _jsx(FieldLabel, { htmlFor: fieldId, required: true, children: "Feedback" }) }), _jsx(Textarea, { "aria-invalid": error === "description", "aria-required": "true", className: "min-h-40", disabled: disabled, id: fieldId, onChange: (event) => onDescriptionChange(event.target.value), placeholder: "What happened, what did you expect, or what would you like to see?", rows: 6, value: description }), error === "description" ? _jsx(FieldError, { children: "Feedback is required." }) : null] }));
+}
+function FeedbackAttachmentsField({ props, state, }) {
+    if (props.attachmentsEnabled === false)
+        return null;
+    return (_jsx(FileUploadField, { acceptedFileTypes: props.acceptedFileTypes ?? "image/*,.pdf,.csv,.txt,.doc,.docx,.xls,.xlsx", disabled: props.isSubmitting ?? false, files: state.attachments, maxAttachmentSizeMb: props.maxAttachmentSizeMb, maxAttachments: props.maxAttachments, onFilesChange: state.setAttachments, showConstraints: false, variant: "dropzone" }));
+}
+function useFeedbackComposerIds() {
+    const formId = React.useId();
+    return {
+        descriptionId: `${formId}-description`,
+        subjectId: `${formId}-subject`,
+    };
+}
+function useFeedbackComposerState(defaultType) {
+    const [attachments, setAttachments] = React.useState([]);
+    const [description, setDescription] = React.useState("");
+    const [error, setError] = React.useState();
+    const [submitError, setSubmitError] = React.useState();
+    const [submitResult, setSubmitResult] = React.useState();
+    const [subject, setSubject] = React.useState("");
+    const [type, setType] = React.useState(defaultType);
+    React.useEffect(() => {
+        setType(defaultType);
+    }, [defaultType]);
+    const resetForm = () => {
+        setAttachments([]);
+        setDescription("");
+        setError(undefined);
+        setSubmitError(undefined);
+        setSubmitResult(undefined);
+        setSubject("");
+        setType(defaultType);
+    };
+    return {
+        attachments,
+        description,
+        error,
+        resetForm,
+        setAttachments,
+        setDescription,
+        setError,
+        setSubmitError,
+        setSubmitResult,
+        setSubject,
+        setType,
+        submitError,
+        submitResult,
+        subject,
+        type,
+    };
+}
+async function submitFeedback(event, props, state) {
+    event.preventDefault();
+    const trimmedDescription = state.description.trim();
+    const trimmedSubject = state.subject.trim();
+    const validationError = getValidationError({
+        description: trimmedDescription,
+        subject: trimmedSubject,
+    });
+    state.setError(validationError);
+    state.setSubmitError(undefined);
+    if (validationError)
+        return;
+    try {
+        const result = await props.onSubmit({
+            attachments: state.attachments,
+            description: trimmedDescription,
+            subject: trimmedSubject,
+            type: state.type,
+        });
+        state.setSubmitResult(result ?? {});
+        props.onSubmittedChange?.(true);
+    }
+    catch {
+        state.setSubmitError("Unable to submit feedback. Please try again.");
+    }
+}
+function getValidationError({ description, subject, }) {
+    if (!subject)
+        return "subject";
+    if (!description)
+        return "description";
+    return undefined;
+}
+export { FeedbackComposer, };

package/dist/components/blocks/feedback-date-format.d.ts

@@ -0,0 +1,5 @@
+import { type TimestampFormatOptions } from "@ciridae/ui/timestamp-format";
+declare function formatFeedbackTimestamp(value: string | undefined, options?: TimestampFormatOptions): string;
+declare function formatFeedbackTimestampFull(value: string | undefined, options?: TimestampFormatOptions): string;
+declare function getFeedbackTimestampDateTime(value: string | undefined): string | undefined;
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };

package/dist/components/blocks/feedback-date-format.js

@@ -0,0 +1,11 @@
+import { formatTimestamp, formatTimestampFull, getTimestampDateTime, } from "@ciridae/ui/timestamp-format";
+function formatFeedbackTimestamp(value, options = {}) {
+    return formatTimestamp(value, options);
+}
+function formatFeedbackTimestampFull(value, options = {}) {
+    return formatTimestampFull(value, options);
+}
+function getFeedbackTimestampDateTime(value) {
+    return getTimestampDateTime(value);
+}
+export { formatFeedbackTimestamp, formatFeedbackTimestampFull, getFeedbackTimestampDateTime };

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

@@ -0,0 +1,9 @@
+import type * as React from "react";
+import { type StakeholderFeedbackItem } from "@ciridae/ui/feedback-tracking-types";
+type FeedbackDetailSheetProps = {
+    feedback?: StakeholderFeedbackItem;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+};
+declare function FeedbackDetailSheet({ feedback, onOpenChange, open }: FeedbackDetailSheetProps): React.JSX.Element;
+export { FeedbackDetailSheet, type FeedbackDetailSheetProps };

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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 { getFeedbackInitials, } from "@ciridae/ui/feedback-tracking-types";
+import { Avatar, AvatarFallback, AvatarImage } from "@ciridae/ui/avatar";
+import { Button } from "@ciridae/ui/button";
+import { Card } from "@ciridae/ui/card";
+import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "@ciridae/ui/item";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "@ciridae/ui/property-list";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "@ciridae/ui/sheet";
+function FeedbackDetailSheet({ feedback, onOpenChange, open }) {
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: feedback?.subject ?? "Feedback" }), _jsx(SheetDescription, { children: "Review the original submission and current progress." })] }), _jsx(SheetBody, { className: "grid content-start gap-(--panel-gap) pb-(--panel-padding)", children: feedback ? _jsx(FeedbackDetailContent, { feedback: feedback }) : null }), _jsx(SheetFooter, { children: _jsx(Button, { onClick: () => onOpenChange(false), type: "button", children: "Done" }) })] }) }));
+}
+function FeedbackDetailContent({ feedback }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FeedbackDetailSummary, { feedback: feedback }), _jsx(FeedbackDetailBody, { feedback: feedback }), _jsx(FeedbackDetailAttachments, { feedback: feedback })] }));
+}
+function FeedbackDetailSummary({ feedback }) {
+    const submitter = feedback.submittedBy;
+    return (_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-3 rounded-lg border bg-card p-(--panel-padding)", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { alt: "", src: submitter.imageUrl }), _jsx(AvatarFallback, { children: getFeedbackInitials(submitter.name, submitter.email) })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: submitter.name }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: submitter.organization ?? submitter.email ?? "Stakeholder" })] })] }), _jsx(FeedbackStatusBadge, { status: feedback.status })] }));
+}
+function FeedbackDetailBody({ feedback }) {
+    return (_jsxs("div", { className: "grid gap-(--panel-gap)", children: [_jsxs(PropertyList, { children: [_jsx(FeedbackProperty, { label: "Type", children: _jsx(FeedbackTypeBadge, { type: feedback.type }) }), _jsx(FeedbackProperty, { label: "Submitted", children: _jsx(FeedbackDetailDateValue, { value: feedback.submittedAt }) }), _jsx(FeedbackProperty, { label: "Updated", children: _jsx(FeedbackDetailDateValue, { value: feedback.updatedAt }) }), feedback.referenceId ? (_jsx(FeedbackProperty, { label: "Reference", children: _jsx("span", { className: "font-mono text-xs tabular-nums", children: feedback.referenceId }) })) : null] }), _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 FeedbackDetailDateValue({ value }) {
+    return (_jsx("time", { className: "font-mono text-xs tabular-nums", dateTime: getFeedbackTimestampDateTime(value), children: formatFeedbackTimestampFull(value) }));
+}
+function FeedbackDetailAttachments({ 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: attachment.url ? (_jsx("a", { className: "underline-offset-4 hover:underline", href: attachment.url, children: attachment.name })) : (attachment.name) }) })] }, getAttachmentKey(attachment, index)))) })] }));
+}
+function getAttachmentKey(attachment, index) {
+    return `${attachment.url ?? attachment.name}-${index}`;
+}
+export { FeedbackDetailSheet };

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MetricsStrip, MetricsStripDetail, MetricsStripItem, MetricsStripLabel, MetricsStripValue, } from "@ciridae/ui/metrics-strip";
+function FeedbackMetricsStrip({ metrics }) {
+    return (_jsxs(MetricsStrip, { className: "md:grid-cols-5", children: [_jsx(FeedbackMetricItem, { detail: "New this week", label: "Received", tone: "neutral", value: metrics.receivedThisWeek }), _jsx(FeedbackMetricItem, { detail: "Needs review", label: "Awaiting review", tone: "warning", value: metrics.awaitingReview }), _jsx(FeedbackMetricItem, { detail: "Reviewed this week", label: "Triaged", tone: "info", value: metrics.triagedThisWeek }), _jsx(FeedbackMetricItem, { detail: "Active work", label: "In progress", tone: "info", value: metrics.inProgress }), _jsx(FeedbackMetricItem, { detail: "This week", label: "Resolved", tone: "success", value: metrics.resolvedThisWeek })] }));
+}
+function FeedbackMetricItem({ detail, label, tone, value, }) {
+    return (_jsxs(MetricsStripItem, { children: [_jsx(MetricsStripLabel, { children: label }), _jsx(MetricsStripValue, { children: value }), _jsx(MetricsStripDetail, { className: feedbackMetricToneClasses[tone], children: detail })] }));
+}
+const feedbackMetricToneClasses = {
+    info: "text-info",
+    neutral: "text-muted-foreground",
+    success: "text-success",
+    warning: "text-warning",
+};
+export { FeedbackMetricsStrip };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type FeedbackComposerProps } from "@ciridae/ui/feedback-composer";
+type FeedbackSheetProps = Omit<FeedbackComposerProps, "actions" | "formId" | "onCancel" | "onSubmittedChange"> & {
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+};
+declare function FeedbackSheet({ onOpenChange, open, ...composerProps }: FeedbackSheetProps): React.JSX.Element;
+export { FeedbackSheet, type FeedbackSheetProps };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SendIcon } from "lucide-react";
+import { FeedbackComposer } from "@ciridae/ui/feedback-composer";
+import { Button } from "@ciridae/ui/button";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "@ciridae/ui/sheet";
+function FeedbackSheet({ onOpenChange, open, ...composerProps }) {
+    const formId = React.useId();
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    React.useEffect(() => {
+        if (!open)
+            setIsSubmitted(false);
+    }, [open]);
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Send feedback" }), _jsx(SheetDescription, { children: "Share a bug, feature request, or general note." })] }), _jsx(SheetBody, { children: _jsx(FeedbackComposer, { ...composerProps, actions: "external", formId: formId, onCancel: () => onOpenChange(false), onSubmittedChange: setIsSubmitted }) }), isSubmitted ? null : (_jsxs(SheetFooter, { children: [_jsx(Button, { disabled: composerProps.isSubmitting, onClick: () => onOpenChange(false), type: "button", variant: "outline", children: "Cancel" }), _jsxs(Button, { form: formId, loading: composerProps.isSubmitting, type: "submit", children: [_jsx(SendIcon, {}), "Submit feedback"] })] }))] }) }));
+}
+export { FeedbackSheet };

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@ciridae/ui/badge";
+import { feedbackStatusLabels } from "./feedback-tracking-types";
+function FeedbackStatusBadge({ status }) {
+    return _jsx(Badge, { variant: feedbackStatusVariants[status], children: feedbackStatusLabels[status] });
+}
+const feedbackStatusVariants = {
+    in_progress: "info",
+    in_review: "warning",
+    planned: "info",
+    received: "outline",
+    resolved: "success",
+};
+export { FeedbackStatusBadge };

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

@@ -0,0 +1,6 @@
+import { type StakeholderFeedbackItem } from "@ciridae/ui/feedback-tracking-types";
+declare function FeedbackTableRow({ item, onSelectFeedback, }: {
+    item: StakeholderFeedbackItem;
+    onSelectFeedback?: (item: StakeholderFeedbackItem) => void;
+}): import("react").JSX.Element;
+export { FeedbackTableRow };

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PaperclipIcon } from "lucide-react";
+import { formatFeedbackTimestamp, getFeedbackTimestampDateTime, } from "@ciridae/ui/feedback-date-format";
+import { FeedbackStatusBadge } from "@ciridae/ui/feedback-status-badge";
+import { FeedbackTypeBadge } from "@ciridae/ui/feedback-type-badge";
+import { getFeedbackInitials, } from "@ciridae/ui/feedback-tracking-types";
+import { Avatar, AvatarFallback, AvatarImage } from "@ciridae/ui/avatar";
+import { TableCell, TableRow } from "@ciridae/ui/table";
+function FeedbackTableRow({ item, onSelectFeedback, }) {
+    return (_jsxs(TableRow, { className: onSelectFeedback ? "cursor-pointer" : undefined, onClick: () => onSelectFeedback?.(item), onKeyDown: (event) => {
+            if (!onSelectFeedback)
+                return;
+            if (event.currentTarget !== event.target)
+                return;
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            onSelectFeedback(item);
+        }, role: onSelectFeedback ? "button" : undefined, tabIndex: onSelectFeedback ? 0 : undefined, children: [_jsx(TableCell, { className: "max-w-[22rem]", children: _jsx(FeedbackSummaryCell, { item: item }) }), _jsx(TableCell, { children: _jsx(FeedbackTypeBadge, { type: item.type }) }), _jsx(TableCell, { children: _jsx(FeedbackSubmitterCell, { item: item }) }), _jsx(TableCell, { children: _jsx(FeedbackStatusBadge, { status: item.status }) }), _jsx(TableCell, { children: _jsx(FeedbackDateValue, { value: item.submittedAt }) }), _jsx(TableCell, { children: _jsx(FeedbackDateValue, { value: item.updatedAt }) }), _jsx(TableCell, { className: "text-right", children: _jsx(FeedbackAttachmentCount, { item: item }) })] }));
+}
+function FeedbackSummaryCell({ item }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: item.subject }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: item.description })] }));
+}
+function FeedbackSubmitterCell({ item }) {
+    const submitter = item.submittedBy;
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "", src: submitter.imageUrl }), _jsx(AvatarFallback, { children: getFeedbackInitials(submitter.name, submitter.email) })] }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium text-foreground", children: submitter.name }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: submitter.organization ?? submitter.email ?? "Stakeholder" })] })] }));
+}
+function FeedbackDateValue({ value }) {
+    return (_jsx("time", { className: "font-mono text-xs text-muted-foreground tabular-nums", dateTime: getFeedbackTimestampDateTime(value), children: formatFeedbackTimestamp(value) }));
+}
+function FeedbackAttachmentCount({ item }) {
+    const count = item.attachments?.length ?? 0;
+    if (count === 0)
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: "None" });
+    return (_jsxs("span", { className: "inline-flex items-center justify-end gap-1 font-mono text-xs text-muted-foreground tabular-nums", children: [_jsx(PaperclipIcon, { className: "size-3.5" }), count] }));
+}
+export { FeedbackTableRow };

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

@@ -0,0 +1,11 @@
+import type { SortDirection } from "@ciridae/ui/data-table";
+import type { StakeholderFeedbackItem } from "./feedback-tracking-types";
+type FeedbackTableSortKey = "status" | "submittedAt" | "submittedBy" | "type" | "updatedAt";
+type FeedbackTableSort = {
+    direction: SortDirection;
+    key: FeedbackTableSortKey;
+};
+declare function sortFeedbackItems(items: StakeholderFeedbackItem[], sort: FeedbackTableSort): StakeholderFeedbackItem[];
+declare function getNextFeedbackTableSort(currentSort: FeedbackTableSort, key: FeedbackTableSortKey): FeedbackTableSort;
+declare const defaultFeedbackTableSort: FeedbackTableSort;
+export { defaultFeedbackTableSort, getNextFeedbackTableSort, sortFeedbackItems, type FeedbackTableSort, type FeedbackTableSortKey, };

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

@@ -0,0 +1,81 @@
+function sortFeedbackItems(items, sort) {
+    return [...items].sort((first, second) => {
+        const result = compareFeedbackItems(first, second, sort);
+        if (result !== 0)
+            return result;
+        return compareStrings(first.subject, second.subject, "asc");
+    });
+}
+function getNextFeedbackTableSort(currentSort, key) {
+    if (currentSort.key !== key)
+        return { direction: getDefaultSortDirection(key), key };
+    return {
+        direction: currentSort.direction === "asc" ? "desc" : "asc",
+        key,
+    };
+}
+function compareFeedbackItems(first, second, sort) {
+    if (sort.key === "type")
+        return compareFeedbackTypes(first.type, second.type, sort.direction);
+    if (sort.key === "submittedBy") {
+        return compareStrings(first.submittedBy.name, second.submittedBy.name, sort.direction);
+    }
+    if (sort.key === "status")
+        return compareFeedbackStatuses(first.status, second.status, sort.direction);
+    if (sort.key === "submittedAt") {
+        return compareTimestamps(first.submittedAt, second.submittedAt, sort.direction);
+    }
+    return compareTimestamps(first.updatedAt, second.updatedAt, sort.direction);
+}
+function getDefaultSortDirection(key) {
+    if (key === "submittedAt" || key === "updatedAt")
+        return "desc";
+    return "asc";
+}
+function compareFeedbackStatuses(first, second, direction) {
+    const result = statusSortOrder[first] - statusSortOrder[second];
+    return direction === "asc" ? result : -result;
+}
+function compareFeedbackTypes(first, second, direction) {
+    const result = typeSortOrder[first] - typeSortOrder[second];
+    return direction === "asc" ? result : -result;
+}
+function compareStrings(first, second, direction) {
+    const result = first.localeCompare(second, undefined, { sensitivity: "base" });
+    return direction === "asc" ? result : -result;
+}
+function compareTimestamps(first, second, direction) {
+    const firstTimestamp = getTimestamp(first);
+    const secondTimestamp = getTimestamp(second);
+    if (firstTimestamp === undefined && secondTimestamp === undefined)
+        return 0;
+    if (firstTimestamp === undefined)
+        return 1;
+    if (secondTimestamp === undefined)
+        return -1;
+    const result = firstTimestamp - secondTimestamp;
+    return direction === "asc" ? result : -result;
+}
+function getTimestamp(value) {
+    if (!value)
+        return undefined;
+    const timestamp = Date.parse(value);
+    return Number.isNaN(timestamp) ? undefined : timestamp;
+}
+const defaultFeedbackTableSort = {
+    direction: "desc",
+    key: "submittedAt",
+};
+const statusSortOrder = {
+    in_progress: 3,
+    in_review: 1,
+    planned: 2,
+    received: 0,
+    resolved: 4,
+};
+const typeSortOrder = {
+    bug: 0,
+    feature: 1,
+    general: 2,
+};
+export { defaultFeedbackTableSort, getNextFeedbackTableSort, sortFeedbackItems, };