@ciridae/ui 0.3.3 → 0.3.6

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 "./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 "./feedback-composer-parts";
+import { FileUploadField } from "../ui/file-upload-field";
+import { Field, FieldContent, FieldError, FieldGroup, FieldLabel } from "../ui/field";
+import { Input } from "../ui/input";
+import { Textarea } from "../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 "./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 "./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 "./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 "./feedback-date-format";
+import { FeedbackStatusBadge } from "./feedback-status-badge";
+import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { getFeedbackInitials } from "./feedback-tracking-types";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Card } from "../ui/card";
+import { Item, ItemContent, ItemGroup, ItemMedia, ItemTitle } from "../ui/item";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../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("@types/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 "../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 "./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 "./feedback-composer";
+import { Button } from "../ui/button";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../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("@types/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 "../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 "./feedback-tracking-types";
+declare function FeedbackTableRow({ item, onSelectFeedback, }: {
+    item: StakeholderFeedbackItem;
+    onSelectFeedback?: (item: StakeholderFeedbackItem) => void;
+}): import("@types/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 "./feedback-date-format";
+import { FeedbackStatusBadge } from "./feedback-status-badge";
+import { FeedbackTypeBadge } from "./feedback-type-badge";
+import { getFeedbackInitials } from "./feedback-tracking-types";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { TableCell, TableRow } from "../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 "../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, };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { StakeholderFeedbackItem } from "./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 "../ui/data-table";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "../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("@types/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 "../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 "./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 };