@ciridae/ui 0.3.3 → 0.3.6

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

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import type { KanbanCardData, KanbanColumnData } from "./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 "../ui/badge";
+import { Button } from "../ui/button";
+import { Card } from "../ui/card";
+import { PropertyList, PropertyListItem, PropertyListLabel, PropertyListValue, } from "../ui/property-list";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "../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 "../blocks/admin-users-table";
+import { type InviteUserRole, type InviteUserValues } from "../blocks/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 "../blocks/admin-users-table";
+import { InviteUserSheet, } from "../blocks/invite-user-sheet";
+import { Button } from "../ui/button";
+import { MetricsStrip, MetricsStripDetail, MetricsStripItem, MetricsStripLabel, MetricsStripValue, } from "../ui/metrics-strip";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "../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 "../blocks/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("@types/react").JSX.Element;
+declare function ClearFiltersButton({ onClearFilters }: {
+    onClearFilters: () => void;
+}): import("@types/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 "../blocks/feedback-tracking-types";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../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 "../blocks/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 "../blocks/feedback-detail-sheet";
+import { FeedbackMetricsStrip } from "../blocks/feedback-metrics";
+import { FeedbackTable } from "../blocks/feedback-table";
+import { ClearFiltersButton, FeedbackFiltersToolbar, } from "./feedback-stakeholder-page-parts";
+import { PageHeader, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "../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 "../blocks/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 };

package/dist/components/pages/kanban-page.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import { KanbanBoard } from "../blocks/kanban-board";
+import { KanbanDetailSheet } from "../blocks/kanban-detail-sheet";
+import { Button } from "../ui/button";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../ui/input-group";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "../ui/page-header";
+function KanbanPage({ cards, columns, isLoading = false, onCardMove, onCreateCard, renderCardActions, renderColumnActions, }) {
+    const [search, setSearch] = React.useState("");
+    const [selectedCardId, setSelectedCardId] = React.useState();
+    const filteredCards = React.useMemo(() => filterKanbanCards(cards, search), [cards, search]);
+    const selectedCard = React.useMemo(() => cards.find((card) => card.id === selectedCardId), [cards, selectedCardId]);
+    const selectedColumn = getSelectedColumn(columns, selectedCard);
+    return (_jsxs("div", { className: "min-h-svh bg-background text-foreground", children: [_jsx(KanbanPageHeader, { onCreateCard: onCreateCard }), _jsxs("main", { className: "grid gap-4 px-4 py-4 md:px-6 lg:px-8", children: [_jsx(KanbanPageToolbar, { filteredCount: filteredCards.length, onSearchChange: setSearch, search: search, totalCount: cards.length }), _jsx(KanbanBoard, { cards: filteredCards, columnMaxHeight: "calc(100vh - 18rem)", columns: columns, empty: getBoardEmptyMessage(search), isLoading: isLoading, onCardMove: onCardMove
+                            ? (move) => onCardMove(getUnfilteredMoveEvent(move, filteredCards, cards))
+                            : undefined, onCardSelect: (card) => setSelectedCardId(card.id), renderCardActions: renderCardActions, renderColumnActions: renderColumnActions })] }), _jsx(KanbanDetailSheet, { card: selectedCard, column: selectedColumn, onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedCardId(undefined);
+                }, open: Boolean(selectedCard) })] }));
+}
+function KanbanPageHeader({ onCreateCard }) {
+    return (_jsx(PageHeader, { children: _jsxs(PageHeaderMain, { children: [_jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: "Work board" }), _jsx(PageHeaderDescription, { children: "Track work across status columns and open cards for detail." })] }), onCreateCard ? (_jsx(PageHeaderActions, { children: _jsxs(Button, { onClick: onCreateCard, type: "button", children: [_jsx(PlusIcon, {}), "New card"] }) })) : null] }) }));
+}
+function KanbanPageToolbar({ filteredCount, onSearchChange, search, totalCount, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "w-full sm:max-w-sm", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(KanbanSearchAdornment, {}) }), _jsx(InputGroupInput, { "aria-label": "Search cards", onChange: (event) => onSearchChange(event.target.value), placeholder: "Search cards...", value: search })] }) }), _jsxs("div", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [filteredCount, " of ", totalCount, " cards"] })] }));
+}
+function KanbanSearchAdornment() {
+    return (_jsxs(InputGroupText, { children: [_jsx(SearchIcon, {}), _jsx("span", { className: "sr-only", children: "Search" })] }));
+}
+function filterKanbanCards(cards, search) {
+    const query = search.trim().toLowerCase();
+    if (!query)
+        return cards;
+    return cards.filter((card) => matchesKanbanSearch(card, query));
+}
+function matchesKanbanSearch(card, query) {
+    return [card.id, card.title, card.description]
+        .filter(Boolean)
+        .some((value) => value?.toLowerCase().includes(query));
+}
+function getSelectedColumn(columns, selectedCard) {
+    if (!selectedCard)
+        return undefined;
+    return columns.find((column) => column.id === selectedCard.columnId);
+}
+function getUnfilteredMoveEvent(move, filteredCards, cards) {
+    const fromIndex = cards
+        .filter((card) => card.columnId === move.fromColumnId)
+        .findIndex((card) => card.id === move.cardId);
+    const filteredTargetCards = filteredCards.filter((card) => card.columnId === move.toColumnId);
+    const targetCard = filteredTargetCards[move.toIndex];
+    const unfilteredTargetCards = cards.filter((card) => card.columnId === move.toColumnId);
+    const toIndex = targetCard
+        ? unfilteredTargetCards.findIndex((card) => card.id === targetCard.id)
+        : unfilteredTargetCards.length;
+    return {
+        ...move,
+        fromIndex: fromIndex >= 0 ? fromIndex : move.fromIndex,
+        toIndex: toIndex >= 0 ? toIndex : move.toIndex,
+    };
+}
+function getBoardEmptyMessage(search) {
+    if (search.trim())
+        return "No cards match this search";
+    return "No cards";
+}
+export { KanbanPage };

package/dist/components/ui/accordion.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
+import { cn } from "../../lib/utils";
 function Accordion({ ...props }) {
     return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
 }

package/dist/components/ui/alert-dialog.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { type ButtonVariantProps } from "@ciridae/ui/button-variants";
+import { type ButtonVariantProps } from "./button-variants";
 declare function AlertDialogPortalContainerProvider({ children, container, }: {
     children: React.ReactNode;
     container: HTMLElement | null;

package/dist/components/ui/alert-dialog.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
-import { buttonVariants } from "@ciridae/ui/button-variants";
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button-variants";
 const AlertDialogPortalContainerContext = React.createContext({
     container: null,
 });

package/dist/components/ui/alert.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { cn } from "@ciridae/ui/utils";
+import { cn } from "../../lib/utils";
 const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-(--panel-padding) py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variants: {
         variant: {

package/dist/components/ui/app-shell-page.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PageHeader } from "@ciridae/ui/page-header";
+import { PageHeader } from "./page-header";
 type AppShellPageBrand = {
     name: string;
     iconLight: string;

package/dist/components/ui/app-shell-page.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { cn } from "@ciridae/ui/utils";
-import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "@ciridae/ui/page-header";
-import { SidebarTrigger } from "@ciridae/ui/sidebar";
+import { cn } from "../../lib/utils";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "./page-header";
+import { SidebarTrigger } from "./sidebar";
 function AppShellPage({ className, ...props }) {
     return (_jsx("div", { "data-slot": "app-shell-page", className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className), ...props }));
 }

package/dist/components/ui/app-shell.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { SidebarAccountThemeMode } from "@ciridae/ui/sidebar-account-menu-theme";
-import type { SidebarProviderStyle } from "@ciridae/ui/sidebar/context";
+import type { SidebarAccountThemeMode } from "./sidebar-account-menu-theme";
+import type { SidebarProviderStyle } from "./sidebar/context";
 type AppShellBrand = {
     name: string;
     iconLight: string;

package/dist/components/ui/app-shell.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "@ciridae/ui/utils";
-import { SidebarAccountMenu } from "@ciridae/ui/sidebar-account-menu";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, } from "@ciridae/ui/sidebar";
+import { cn } from "../../lib/utils";
+import { SidebarAccountMenu } from "./sidebar-account-menu";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, } from "./sidebar";
 const defaultSidebarStyle = {
     "--sidebar-width": "15.5rem",
     "--sidebar-width-icon": "3rem",

package/dist/components/ui/aspect-ratio.d.ts

@@ -1,3 +1,3 @@
 import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
-declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react").JSX.Element;
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("@types/react").JSX.Element;
 export { AspectRatio };

package/dist/components/ui/avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
+import { cn } from "../../lib/utils";
 function Avatar({ className, size = "default", ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", className), ...props }));
 }

package/dist/components/ui/badge-variants.d.ts

@@ -1,4 +1,4 @@
-import { type RecipeVariantProps } from "@ciridae/ui/styled-system/css";
+import { type RecipeVariantProps } from "#ui/styled-system/css";
 declare const badgeVariants: import("../../styled-system/types").RecipeRuntimeFn<{
     variant: {
         default: {

package/dist/components/ui/badge-variants.js

@@ -1,4 +1,4 @@
-import { cva } from "@ciridae/ui/styled-system/css";
+import { cva } from "#ui/styled-system/css";
 const badgeVariants = cva({
     base: {
         alignItems: "center",

package/dist/components/ui/badge.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type BadgeVariantProps } from "@ciridae/ui/badge-variants";
+import { type BadgeVariantProps } from "./badge-variants";
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & BadgeVariantProps & {
     asChild?: boolean;
 }): React.JSX.Element;

package/dist/components/ui/badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
-import { badgeVariants } from "@ciridae/ui/badge-variants";
+import { cn } from "../../lib/utils";
+import { badgeVariants } from "./badge-variants";
 function Badge({ className, variant = "default", asChild = false, ...props }) {
     const Comp = asChild ? Slot.Root : "span";
     return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));

package/dist/components/ui/breadcrumb.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { Slot } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
+import { cn } from "../../lib/utils";
 function Breadcrumb({ ...props }) {
     return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }

package/dist/components/ui/button-group-variants.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;
 export { buttonGroupVariants, type ButtonGroupVariantProps };

package/dist/components/ui/button-group.d.ts

@@ -1,8 +1,8 @@
-import { Separator } from "@ciridae/ui/separator";
-import { type ButtonGroupVariantProps } from "@ciridae/ui/button-group-variants";
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & ButtonGroupVariantProps): import("react").JSX.Element;
+import { Separator } from "./separator";
+import { type ButtonGroupVariantProps } from "./button-group-variants";
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & ButtonGroupVariantProps): import("@types/react").JSX.Element;
 declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
     asChild?: boolean;
-}): import("react").JSX.Element;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+}): import("@types/react").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("@types/react").JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/ui/button-group.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "radix-ui";
-import { cn } from "@ciridae/ui/utils";
-import { Separator } from "@ciridae/ui/separator";
-import { buttonGroupVariants, } from "@ciridae/ui/button-group-variants";
+import { cn } from "../../lib/utils";
+import { Separator } from "./separator";
+import { buttonGroupVariants } from "./button-group-variants";
 function ButtonGroup({ className, orientation, ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
 }