@ciridae/ui 0.3.2 → 0.3.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import type { KanbanCardData, KanbanColumnData } from "@ciridae/ui/kanban-types";
+type KanbanDetailProperty = {
+    label: string;
+    value: React.ReactNode;
+};
+type KanbanDetailSheetProps = {
+    actionsSlot?: React.ReactNode;
+    activitySlot?: React.ReactNode;
+    card?: KanbanCardData;
+    column?: KanbanColumnData;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+    properties?: KanbanDetailProperty[];
+};
+declare function KanbanDetailSheet({ actionsSlot, activitySlot, card, column, onOpenChange, open, properties, }: KanbanDetailSheetProps): React.JSX.Element;
+export { KanbanDetailSheet, type KanbanDetailProperty, type KanbanDetailSheetProps };

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "@ciridae/ui/badge";
+import { Button } from "@ciridae/ui/button";
+import { Card } from "@ciridae/ui/card";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "@ciridae/ui/property-list";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "@ciridae/ui/sheet";
+function KanbanDetailSheet({ actionsSlot, activitySlot, card, column, onOpenChange, open, properties = [], }) {
+    return (_jsx(Sheet, { onOpenChange: onOpenChange, open: open, children: _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Card details" }), _jsx(SheetDescription, { children: "Review the selected work item." })] }), _jsx(SheetBody, { className: "grid content-start gap-(--panel-gap) pb-(--panel-padding)", children: card ? (_jsx(KanbanDetailContent, { activitySlot: activitySlot, card: card, column: column, properties: properties })) : null }), _jsxs(SheetFooter, { children: [actionsSlot, _jsx(Button, { onClick: () => onOpenChange(false), type: "button", children: "Done" })] })] }) }));
+}
+function KanbanDetailContent({ activitySlot, card, column, properties, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(KanbanDetailHeader, { card: card, column: column }), _jsx(KanbanDetailProperties, { card: card, properties: properties }), _jsx(KanbanDetailDescription, { card: card }), activitySlot ? _jsx(KanbanDetailActivity, { children: activitySlot }) : null] }));
+}
+function KanbanDetailHeader({ card, column }) {
+    return (_jsx("header", { className: "grid gap-3", children: _jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsx("h3", { className: "min-w-0 truncate text-sm font-medium text-foreground", children: card.title }), _jsx(KanbanDetailBadges, { card: card, column: column })] }) }));
+}
+function KanbanDetailBadges({ card, column }) {
+    return (_jsxs("div", { className: "flex shrink-0 flex-wrap justify-end gap-2", children: [card.badges, _jsx(KanbanStatusBadge, { column: column })] }));
+}
+function KanbanStatusBadge({ column }) {
+    return _jsx(Badge, { variant: "outline", children: column?.title ?? "Unassigned" });
+}
+function KanbanDetailProperties({ card, properties, }) {
+    return (_jsxs(PropertyList, { children: [_jsx(KanbanProperty, { label: "Reference", children: _jsx("span", { className: "font-mono text-xs tabular-nums", children: card.meta ?? card.id }) }), properties.map((property) => (_jsx(KanbanProperty, { label: property.label, children: property.value }, property.label)))] }));
+}
+function KanbanProperty({ children, label }) {
+    return (_jsxs(PropertyListItem, { children: [_jsx(PropertyListLabel, { children: label }), _jsx(PropertyListValue, { children: children })] }));
+}
+function KanbanDetailDescription({ card }) {
+    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Details" }), _jsx("p", { className: "text-sm whitespace-pre-wrap text-foreground", children: card.description ?? "No description provided." })] }));
+}
+function KanbanDetailActivity({ children }) {
+    return (_jsxs(Card, { className: "grid gap-2 p-(--panel-padding)", children: [_jsx("div", { className: "text-meta text-muted-foreground", children: "Activity" }), children] }));
+}
+export { KanbanDetailSheet };

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

@@ -0,0 +1,24 @@
+import type * as React from "react";
+type KanbanColumnData = {
+    description?: string;
+    id: string;
+    limit?: number;
+    title: string;
+};
+type KanbanCardData = {
+    badges?: React.ReactNode;
+    columnId: string;
+    description?: string;
+    disabled?: boolean;
+    id: string;
+    meta?: React.ReactNode;
+    title: string;
+};
+type KanbanMoveEvent = {
+    cardId: string;
+    fromColumnId: string;
+    fromIndex: number;
+    toColumnId: string;
+    toIndex: number;
+};
+export type { KanbanCardData, KanbanColumnData, KanbanMoveEvent };

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

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

package/dist/components/blocks/timestamp-format.d.ts

@@ -0,0 +1,8 @@
+type TimestampFormatOptions = {
+    fallback?: string;
+};
+declare function formatTimestamp(value: string | undefined, options?: TimestampFormatOptions): string;
+declare function formatTimestampFull(value: string | undefined, options?: TimestampFormatOptions): string;
+declare function getTimestampDateTime(value: string | undefined): string | undefined;
+export { formatTimestamp, formatTimestampFull, getTimestampDateTime };
+export type { TimestampFormatOptions };

package/dist/components/blocks/timestamp-format.js

@@ -0,0 +1,66 @@
+function formatTimestamp(value, options = {}) {
+    const date = parseTimestamp(value);
+    if (!date)
+        return getTimestampFallback(value, options.fallback);
+    const time = timeFormatter.format(date);
+    const dayDifference = getLocalCalendarDayDifference(date, new Date());
+    if (dayDifference === 0)
+        return `Today, ${time}`;
+    if (dayDifference === -1)
+        return `Yesterday, ${time}`;
+    if (dayDifference < 0 && dayDifference > -7) {
+        return `${weekdayFormatter.format(date)}, ${time}`;
+    }
+    if (date.getFullYear() === new Date().getFullYear()) {
+        return `${monthDayFormatter.format(date)}, ${time}`;
+    }
+    return dateTimeFormatter.format(date);
+}
+function formatTimestampFull(value, options = {}) {
+    const date = parseTimestamp(value);
+    if (!date)
+        return getTimestampFallback(value, options.fallback);
+    return dateTimeFormatter.format(date);
+}
+function getTimestampDateTime(value) {
+    const date = parseTimestamp(value);
+    if (!date)
+        return undefined;
+    return date.toISOString();
+}
+function parseTimestamp(value) {
+    if (!value)
+        return undefined;
+    const timestamp = Date.parse(value);
+    if (Number.isNaN(timestamp))
+        return undefined;
+    return new Date(timestamp);
+}
+function getTimestampFallback(value, fallback = "No update") {
+    return value?.trim() || fallback;
+}
+function getLocalCalendarDayDifference(date, comparisonDate) {
+    const dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    const comparisonStart = new Date(comparisonDate.getFullYear(), comparisonDate.getMonth(), comparisonDate.getDate()).getTime();
+    return Math.round((dateStart - comparisonStart) / millisecondsPerDay);
+}
+const millisecondsPerDay = 24 * 60 * 60 * 1000;
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+});
+const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
+    weekday: "short",
+});
+const monthDayFormatter = new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    month: "short",
+});
+const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    year: "numeric",
+});
+export { formatTimestamp, formatTimestampFull, getTimestampDateTime };

package/dist/components/pages/admin-users-page.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type AdminUsersTableProps } from "@ciridae/ui/admin-users-table";
+import { type InviteUserRole, type InviteUserValues } from "@ciridae/ui/invite-user-sheet";
+type AdminUsersPageProps = AdminUsersTableProps & {
+    defaultRole?: string;
+    isInviting?: boolean;
+    onInviteUser: (values: InviteUserValues) => void | Promise<void>;
+    roles: InviteUserRole[];
+};
+declare function AdminUsersPage({ defaultRole, isInviting, onInviteUser, roles, users, ...tableProps }: AdminUsersPageProps): React.JSX.Element;
+export { AdminUsersPage, type AdminUsersPageProps };

package/dist/components/pages/admin-users-page.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { UserPlusIcon } from "lucide-react";
+import { AdminUsersTable, } from "@ciridae/ui/admin-users-table";
+import { InviteUserSheet, } from "@ciridae/ui/invite-user-sheet";
+import { Button } from "@ciridae/ui/button";
+import { MetricsStrip, MetricsStripDetail, MetricsStripItem, MetricsStripLabel, MetricsStripValue, } from "@ciridae/ui/metrics-strip";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "@ciridae/ui/page-header";
+function AdminUsersPage({ defaultRole, isInviting = false, onInviteUser, roles, users, ...tableProps }) {
+    const [inviteOpen, setInviteOpen] = React.useState(false);
+    return (_jsxs("div", { className: "min-h-svh bg-background text-foreground", children: [_jsx(AdminUsersPageHeader, { onInvite: () => setInviteOpen(true) }), _jsxs("main", { className: "grid gap-4 px-4 py-4 md:px-6 lg:px-8", children: [_jsx(AdminUsersMetrics, { users: users }), _jsx(AdminUsersTable, { users: users, ...tableProps })] }), _jsx(InviteUserSheet, { defaultRole: defaultRole, isSubmitting: isInviting, onOpenChange: setInviteOpen, onSubmit: onInviteUser, open: inviteOpen, roles: roles })] }));
+}
+function AdminUsersPageHeader({ onInvite }) {
+    return (_jsx(PageHeader, { children: _jsxs(PageHeaderMain, { children: [_jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: "Admin user management" }), _jsx(PageHeaderDescription, { children: "Manage platform access, pending invites, and user status." })] }), _jsx(PageHeaderActions, { children: _jsxs(Button, { onClick: onInvite, type: "button", children: [_jsx(UserPlusIcon, {}), "Invite user"] }) })] }) }));
+}
+function AdminUsersMetrics({ users }) {
+    const metrics = getAdminUserMetrics(users);
+    return (_jsxs(MetricsStrip, { className: "md:grid-cols-3", children: [_jsx(AdminUsersMetric, { detail: "Total platform users", label: "Users", value: metrics.total }), _jsx(AdminUsersMetric, { detail: "Invites awaiting acceptance", label: "Pending", value: metrics.invited }), _jsx(AdminUsersMetric, { detail: "Users with admin access", label: "Admins", value: metrics.admins })] }));
+}
+function AdminUsersMetric({ detail, label, value, }) {
+    return (_jsxs(MetricsStripItem, { children: [_jsx(MetricsStripLabel, { children: label }), _jsx(MetricsStripValue, { children: value }), _jsx(MetricsStripDetail, { children: detail })] }));
+}
+function getAdminUserMetrics(users) {
+    return {
+        admins: users.filter((user) => user.role.toLowerCase().includes("admin")).length,
+        invited: users.filter((user) => user.status === "invited").length,
+        total: users.length,
+    };
+}
+export { AdminUsersPage };

package/dist/components/pages/feedback-stakeholder-page-parts.d.ts

@@ -0,0 +1,18 @@
+import { type FeedbackStatus, type StakeholderFeedbackType } from "@ciridae/ui/feedback-tracking-types";
+type StatusFilter = FeedbackStatus | "all";
+type TypeFilter = StakeholderFeedbackType | "all";
+type FeedbackFilters = {
+    search: string;
+    status: StatusFilter;
+    type: TypeFilter;
+};
+declare function FeedbackFiltersToolbar({ filters, hasActiveFilters, onClearFilters, onFiltersChange, }: {
+    filters: FeedbackFilters;
+    hasActiveFilters: boolean;
+    onClearFilters: () => void;
+    onFiltersChange: (filters: FeedbackFilters) => void;
+}): import("react").JSX.Element;
+declare function ClearFiltersButton({ onClearFilters }: {
+    onClearFilters: () => void;
+}): import("react").JSX.Element;
+export { ClearFiltersButton, FeedbackFiltersToolbar, type FeedbackFilters, type StatusFilter, type TypeFilter, };

package/dist/components/pages/feedback-stakeholder-page-parts.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon, XIcon } from "lucide-react";
+import { feedbackStatusOptions, feedbackTypeOptions, } from "@ciridae/ui/feedback-tracking-types";
+import { Button } from "@ciridae/ui/button";
+import { Input } from "@ciridae/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@ciridae/ui/select";
+function FeedbackFiltersToolbar({ filters, hasActiveFilters, onClearFilters, onFiltersChange, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [_jsx(FeedbackSearchInput, { onSearchChange: (search) => onFiltersChange({ ...filters, search }), search: filters.search }), _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsx(FeedbackStatusFilter, { onStatusChange: (status) => onFiltersChange({ ...filters, status }), status: filters.status }), _jsx(FeedbackTypeFilter, { onTypeChange: (type) => onFiltersChange({ ...filters, type }), type: filters.type }), hasActiveFilters ? _jsx(ClearFiltersButton, { onClearFilters: onClearFilters }) : null] })] }));
+}
+function FeedbackSearchInput({ onSearchChange, search, }) {
+    return (_jsxs("div", { className: "relative w-full md:max-w-sm", children: [_jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { "aria-label": "Search feedback", className: "pl-8", onChange: (event) => onSearchChange(event.target.value), placeholder: "Search feedback", value: search })] }));
+}
+function FeedbackStatusFilter({ onStatusChange, status, }) {
+    return (_jsxs(Select, { onValueChange: (value) => updateStatusFilter(value, onStatusChange), value: status, children: [_jsx(SelectTrigger, { "aria-label": "Filter by status", className: "w-full sm:w-40", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: feedbackStatusOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }));
+}
+function FeedbackTypeFilter({ onTypeChange, type, }) {
+    return (_jsxs(Select, { onValueChange: (value) => updateTypeFilter(value, onTypeChange), value: type, children: [_jsx(SelectTrigger, { "aria-label": "Filter by type", className: "w-full sm:w-44", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: feedbackTypeOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }));
+}
+function ClearFiltersButton({ onClearFilters }) {
+    return (_jsxs(Button, { onClick: onClearFilters, type: "button", variant: "outline", children: [_jsx(XIcon, {}), "Clear filters"] }));
+}
+function updateStatusFilter(value, onStatusChange) {
+    if (isStatusFilter(value))
+        onStatusChange(value);
+}
+function updateTypeFilter(value, onTypeChange) {
+    if (isTypeFilter(value))
+        onTypeChange(value);
+}
+function isStatusFilter(value) {
+    return feedbackStatusOptions.some((option) => option.value === value);
+}
+function isTypeFilter(value) {
+    return feedbackTypeOptions.some((option) => option.value === value);
+}
+export { ClearFiltersButton, FeedbackFiltersToolbar, };

package/dist/components/pages/feedback-stakeholder-page.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type FeedbackMetrics, type StakeholderFeedbackItem } from "@ciridae/ui/feedback-tracking-types";
+type FeedbackStakeholderPageProps = {
+    isLoading?: boolean;
+    items: StakeholderFeedbackItem[];
+    metrics: FeedbackMetrics;
+};
+declare function FeedbackStakeholderPage({ isLoading, items, metrics, }: FeedbackStakeholderPageProps): React.JSX.Element;
+export { FeedbackStakeholderPage, type FeedbackStakeholderPageProps };

package/dist/components/pages/feedback-stakeholder-page.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FeedbackDetailSheet } from "@ciridae/ui/feedback-detail-sheet";
+import { FeedbackMetricsStrip } from "@ciridae/ui/feedback-metrics";
+import { FeedbackTable } from "@ciridae/ui/feedback-table";
+import { ClearFiltersButton, FeedbackFiltersToolbar, } from "@ciridae/ui/feedback-stakeholder-page-parts";
+import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "@ciridae/ui/page-header";
+function FeedbackStakeholderPage({ isLoading = false, items, metrics, }) {
+    const [filters, setFilters] = React.useState(defaultFilters);
+    const [selectedFeedback, setSelectedFeedback] = React.useState();
+    const filteredItems = React.useMemo(() => filterFeedbackItems(items, filters), [items, filters]);
+    const hasActiveFilters = !areDefaultFilters(filters);
+    return (_jsxs("div", { className: "min-h-svh bg-background text-foreground", children: [_jsx(FeedbackStakeholderPageHeader, {}), _jsxs("main", { className: "grid gap-4 px-4 py-4 md:px-6 lg:px-8", children: [_jsx(FeedbackMetricsStrip, { metrics: metrics }), _jsx(FeedbackTrackerSurface, { filters: filters, hasActiveFilters: hasActiveFilters, isLoading: isLoading, items: filteredItems, onClearFilters: () => setFilters(defaultFilters), onFiltersChange: setFilters, onSelectFeedback: setSelectedFeedback })] }), _jsx(FeedbackDetailSheet, { feedback: selectedFeedback, onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedFeedback(undefined);
+                }, open: Boolean(selectedFeedback) })] }));
+}
+function FeedbackStakeholderPageHeader() {
+    return (_jsx(PageHeader, { children: _jsx(PageHeaderMain, { children: _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: "Feedback" }), _jsx(PageHeaderDescription, { children: "Track submitted feedback and Ciridae's progress on review and implementation." })] }) }) }));
+}
+function FeedbackTrackerSurface({ filters, hasActiveFilters, isLoading, items, onClearFilters, onFiltersChange, onSelectFeedback, }) {
+    return (_jsxs("div", { className: "grid gap-(--panel-gap)", children: [_jsx(FeedbackFiltersToolbar, { filters: filters, hasActiveFilters: hasActiveFilters, onClearFilters: onClearFilters, onFiltersChange: onFiltersChange }), _jsx(FeedbackTable, { emptyAction: hasActiveFilters ? _jsx(ClearFiltersButton, { onClearFilters: onClearFilters }) : null, emptyDescription: getEmptyDescription(hasActiveFilters), emptyTitle: hasActiveFilters ? "No matching feedback" : "No feedback", isLoading: isLoading, items: items, onSelectFeedback: onSelectFeedback })] }));
+}
+const defaultFilters = {
+    search: "",
+    status: "all",
+    type: "all",
+};
+function filterFeedbackItems(items, filters) {
+    return items.filter((item) => {
+        return (matchesSearch(item, filters.search) &&
+            matchesStatus(item, filters.status) &&
+            matchesType(item, filters.type));
+    });
+}
+function matchesSearch(item, search) {
+    const query = search.trim().toLowerCase();
+    if (!query)
+        return true;
+    return [
+        item.subject,
+        item.description,
+        item.submittedBy.name,
+        item.submittedBy.email,
+        item.referenceId,
+    ]
+        .filter(Boolean)
+        .some((value) => value?.toLowerCase().includes(query));
+}
+function matchesStatus(item, status) {
+    return status === "all" || item.status === status;
+}
+function matchesType(item, type) {
+    return type === "all" || item.type === type;
+}
+function areDefaultFilters(filters) {
+    return (filters.search === defaultFilters.search &&
+        filters.status === defaultFilters.status &&
+        filters.type === defaultFilters.type);
+}
+function getEmptyDescription(hasActiveFilters) {
+    if (hasActiveFilters)
+        return "No feedback matches the current filters.";
+    return "Feedback submitted by users will appear here.";
+}
+export { FeedbackStakeholderPage };

package/dist/components/pages/kanban-page.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { KanbanCardData, KanbanColumnData, KanbanMoveEvent } from "@ciridae/ui/kanban-types";
+type KanbanPageProps = {
+    cards: KanbanCardData[];
+    columns: KanbanColumnData[];
+    isLoading?: boolean;
+    onCardMove?: (event: KanbanMoveEvent) => void;
+    onCreateCard?: () => void;
+    renderCardActions?: (card: KanbanCardData) => React.ReactNode;
+    renderColumnActions?: (column: KanbanColumnData) => React.ReactNode;
+};
+declare function KanbanPage({ cards, columns, isLoading, onCardMove, onCreateCard, renderCardActions, renderColumnActions, }: KanbanPageProps): React.JSX.Element;
+export { KanbanPage, type KanbanPageProps };