@campfire-interactive/ui 0.12.0 → 0.13.0

package/dist/index.d.ts

@@ -1808,6 +1808,120 @@ declare function kanbanStep(columns: KanbanColumn[], from: string, delta: number
  */
 declare function KanbanBoard<T extends KanbanItem>({ columns, items, lanes, renderCard, itemLabel, columnLabel, onMove, onOpen, emptyLabel, movedLabel, minColumnWidth, className, style, ...rest }: KanbanBoardProps<T>): react.JSX.Element;
 
+type CalendarView = 'month' | 'week';
+/** What the grid needs of an item. The rest of the caller's object is passed back untouched. */
+interface CalendarItem {
+    id: string;
+    /**
+     * A `YYYY-MM-DD` day, an ISO instant, or a Date, read by its UTC day (a
+     * Prisma `@db.Date` arrives as `2028-01-01T00:00:00.000Z`). An item without
+     * a date that parses is left off the grid and counted in `undatedLabel`.
+     */
+    date: Date | string | null | undefined;
+    /** Any CSS color for the chip, e.g. a program's color. Defaults to the accent. White text sits on it. */
+    color?: string;
+    /** Drawn dashed in its color and never moved: a milestone beside the tasks. */
+    readOnly?: boolean;
+    /** Ringed in the error color: overdue. */
+    flagged?: boolean;
+    /** Struck through and faded. */
+    done?: boolean;
+}
+interface CalendarGridLabels {
+    today: string;
+    previous: (view: CalendarView) => string;
+    next: (view: CalendarView) => string;
+    month: string;
+    week: string;
+    view: string;
+    /** The add button on a day. */
+    add: (day: string) => string;
+    more: (count: number) => string;
+    less: string;
+    moved: (item: string, day: string) => string;
+}
+interface CalendarGridProps<T extends CalendarItem> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** In the order each day lists them; the grid does not sort. */
+    items: T[];
+    /** The chip's content. The grid draws the chip around it, so keep buttons and links out of it. */
+    renderItem: (item: T) => ReactNode;
+    /** Plain text for the item, read as its name and in announcements. */
+    itemLabel: (item: T) => string;
+    /** Controlled view; leave out and the grid keeps its own, starting at `defaultView`. */
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    /**
+     * Any day in the month or week shown, `YYYY-MM-DD`. Controlled the same
+     * way as `view`; uncontrolled it starts at today.
+     */
+    anchor?: string;
+    defaultAnchor?: string;
+    onAnchorChange?: (anchor: string) => void;
+    /** Which day is today. Defaults to the viewer's local day. */
+    today?: Date | string;
+    /** 1 (Monday, the default) or 0 (Sunday). */
+    weekStartsOn?: 0 | 1;
+    /**
+     * An item was dropped on another day, or moved with Alt+Arrow keys (Left /
+     * Right a day, Up / Down a week). Omitted, nothing drags. The grid does not
+     * move the item itself; the caller updates `items`.
+     */
+    onMove?: (item: T, day: string) => void;
+    /** Click or Enter / Space on an item. */
+    onOpen?: (item: T) => void;
+    /** The add button on a day, or a click on a day's empty space. Omitted, there is no add. */
+    onAddDay?: (day: string) => void;
+    /** How many items a month cell lists before "+N more". Week cells list every item. */
+    maxPerDay?: number;
+    /** Shown under the grid: what the colors mean. */
+    legend?: ReactNode;
+    /** A line in the footer when some items have no date, e.g. "3 tasks have no due date". */
+    undatedLabel?: (count: number) => ReactNode;
+    /** More controls at the end of the header, beside the view switch. */
+    toolbar?: ReactNode;
+    /** Month and weekday names and the date read out for a day. */
+    locale?: string;
+    labels?: Partial<CalendarGridLabels>;
+}
+/** An item's day as `YYYY-MM-DD` (by UTC day), or null when it has none. */
+declare function calendarDayKey(value: Date | string | null | undefined): string | null;
+/** `day` moved `n` days. */
+declare function calendarAddDays(day: string, n: number): string;
+/**
+ * The days a view shows: six weeks from the week holding the 1st for a month
+ * (always 42, so the grid does not jump in height between months), the
+ * anchor's week for a week. `inRange` is false for the days of the months
+ * either side.
+ */
+declare function calendarDays(view: CalendarView, anchor: string, weekStartsOn?: 0 | 1): {
+    day: string;
+    inRange: boolean;
+}[];
+/** The anchor `delta` months or weeks on. A month lands on its 1st, so a 31st never skips a short month. */
+declare function calendarShift(view: CalendarView, anchor: string, delta: number): string;
+/** Items by day, in the order given, and how many had no day. */
+declare function calendarBuckets<T extends CalendarItem>(items: T[]): {
+    byDay: Map<string, T[]>;
+    undated: number;
+};
+/**
+ * A month or week of days with items on them: tasks by due date, beside
+ * read-only milestones.
+ *
+ * Days are calendar days, read by UTC day as `Timeline` reads them, so a due
+ * date is the same square in Detroit and in Silao. Every drag has a keyboard
+ * twin: Alt+Left / Alt+Right moves the focused item a day, Alt+Up / Alt+Down
+ * a week, focus stays on it (the grid follows it into the next month), and
+ * the move is announced. The grid never moves an item on its own; `onMove`
+ * tells the caller, and the caller's `items` say where it is.
+ */
+declare function CalendarGrid<T extends CalendarItem>({ items, renderItem, itemLabel, view: viewProp, defaultView, onViewChange, anchor: anchorProp, defaultAnchor, onAnchorChange, today: todayProp, weekStartsOn, onMove, onOpen, onAddDay, maxPerDay, legend, undatedLabel, toolbar, locale, labels: labelsProp, className, ...rest }: CalendarGridProps<T>): react.JSX.Element;
+/** A swatch for a legend under the grid, drawn the way the grid draws an item. */
+declare function CalendarLegendItem({ color, readOnly, flagged, children, }: Pick<CalendarItem, 'color' | 'readOnly' | 'flagged'> & {
+    children: ReactNode;
+}): react.JSX.Element;
+
 interface SortState<K extends string> {
     key: K;
     direction: SortDirection;
@@ -2177,4 +2291,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
  */
 declare function formatPercent(value: number | null | undefined, decimals?: number): string;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, KanbanBoard, type KanbanBoardProps, type KanbanColumn, type KanbanItem, type KanbanLane, type KanbanLayout, type KanbanTone, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RequiredMark, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineLane, type TimelineLayout, type TimelineLayoutItem, type TimelineProps, type TimelineTone, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, kanbanLayout, kanbanStep, timelineLayout, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarGrid, type CalendarGridLabels, type CalendarGridProps, type CalendarItem, CalendarLegendItem, type CalendarView, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, KanbanBoard, type KanbanBoardProps, type KanbanColumn, type KanbanItem, type KanbanLane, type KanbanLayout, type KanbanTone, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RequiredMark, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineLane, type TimelineLayout, type TimelineLayoutItem, type TimelineProps, type TimelineTone, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, calendarAddDays, calendarBuckets, calendarDayKey, calendarDays, calendarShift, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, kanbanLayout, kanbanStep, timelineLayout, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };

package/dist/index.js

@@ -777,13 +777,13 @@ import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var Slider = forwardRef10(
   function Slider2({ showValue = false, formatValue, className, ...rest }, ref) {
     const values = rest.value ?? rest.defaultValue ?? [rest.min ?? 0];
-    const format = formatValue ?? ((v) => String(v));
+    const format2 = formatValue ?? ((v) => String(v));
     return /* @__PURE__ */ jsxs12("div", { className: cn("cfi-ui", "cfi-ui-slider-wrap", className), children: [
       /* @__PURE__ */ jsxs12(RadixSlider.Root, { ref, className: "cfi-ui-slider", ...rest, children: [
         /* @__PURE__ */ jsx12(RadixSlider.Track, { className: "cfi-ui-slider__track", children: /* @__PURE__ */ jsx12(RadixSlider.Range, { className: "cfi-ui-slider__range" }) }),
         values.map((_, i) => /* @__PURE__ */ jsx12(RadixSlider.Thumb, { className: "cfi-ui-slider__thumb" }, i))
       ] }),
-      showValue && /* @__PURE__ */ jsx12("output", { className: "cfi-ui-slider__value", children: values.map(format).join(" \u2013 ") })
+      showValue && /* @__PURE__ */ jsx12("output", { className: "cfi-ui-slider__value", children: values.map(format2).join(" \u2013 ") })
     ] });
   }
 );
@@ -2673,10 +2673,347 @@ function KanbanBoard({
   );
 }
 
+// src/CalendarGrid.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { ChevronLeft, ChevronRight, Plus as Plus2 } from "lucide-react";
+
+// src/CalendarGrid.css
+styleInject("@layer components {\n  :where(.cfi-ui-calendar) {\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-xl);\n    background: var(--cfi-ui-surface);\n    box-shadow: var(--cfi-ui-shadow-xs);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-calendar__header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-calendar__title {\n    margin: 0 0 0 var(--cfi-ui-space-xs);\n    font-size: var(--cfi-ui-text-lg);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-tight);\n  }\n  .cfi-ui-calendar__tools {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    margin-left: auto;\n  }\n  .cfi-ui-calendar__scroll {\n    overflow-x: auto;\n  }\n  .cfi-ui-calendar__weekdays,\n  .cfi-ui-calendar__grid {\n    display: grid;\n    grid-template-columns: repeat(7, minmax(7rem, 1fr));\n  }\n  .cfi-ui-calendar__weekdays {\n    border-bottom: 1px solid var(--cfi-ui-border);\n    background: var(--cfi-ui-surface-sunken);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-calendar__weekdays > div {\n    padding: var(--cfi-ui-space-2xs) var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-calendar__day {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n    min-height: 7rem;\n    padding: var(--cfi-ui-space-2xs);\n    border-right: 1px solid var(--cfi-ui-border);\n    border-bottom: 1px solid var(--cfi-ui-border);\n    transition: background var(--cfi-ui-transition-fast), box-shadow var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-calendar__day:nth-child(7n) {\n    border-right: 0;\n  }\n  .cfi-ui-calendar[data-view=month] .cfi-ui-calendar__day:nth-last-child(-n+7),\n  .cfi-ui-calendar[data-view=week] .cfi-ui-calendar__day {\n    border-bottom: 0;\n  }\n  .cfi-ui-calendar[data-view=week] .cfi-ui-calendar__day {\n    min-height: 20rem;\n  }\n  .cfi-ui-calendar__day[data-outside] {\n    background: var(--cfi-ui-surface-sunken);\n  }\n  .cfi-ui-calendar__day[data-addable] {\n    cursor: pointer;\n  }\n  .cfi-ui-calendar__day[data-addable]:hover {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-calendar__day[data-over] {\n    background: var(--cfi-ui-accent-soft);\n    box-shadow: inset 0 0 0 2px var(--cfi-ui-accent);\n  }\n  .cfi-ui-calendar__day-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .cfi-ui-calendar__date {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.5rem;\n    height: 1.5rem;\n    border-radius: var(--cfi-ui-radius-full);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-calendar__day[data-outside] .cfi-ui-calendar__date {\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-calendar__day[data-today] .cfi-ui-calendar__date {\n    background: var(--cfi-ui-accent);\n    color: var(--cfi-ui-accent-fg);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-calendar__add {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    color: var(--cfi-ui-accent-text);\n    cursor: pointer;\n    opacity: 0;\n  }\n  .cfi-ui-calendar__add svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-calendar__day:hover .cfi-ui-calendar__add,\n  .cfi-ui-calendar__add:focus-visible {\n    opacity: 1;\n  }\n  .cfi-ui-calendar__add:hover {\n    background: var(--cfi-ui-accent-soft);\n  }\n  .cfi-ui-calendar__add:focus-visible,\n  .cfi-ui-calendar__more:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-calendar__items {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-3xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ui-calendar__item {\n    overflow: hidden;\n    padding: 0.125rem var(--cfi-ui-space-2xs);\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-calendar-item, var(--cfi-ui-accent));\n    color: var(--cfi-ui-content-inverse);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    line-height: var(--cfi-ui-leading-snug);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    box-shadow: var(--cfi-ui-shadow-xs);\n    transition: filter var(--cfi-ui-transition-fast), opacity var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-calendar__item[role=button] {\n    cursor: pointer;\n  }\n  .cfi-ui-calendar__item[data-movable] {\n    cursor: grab;\n  }\n  .cfi-ui-calendar__item[data-movable]:active {\n    cursor: grabbing;\n  }\n  .cfi-ui-calendar__item[role=button]:hover {\n    filter: brightness(1.1);\n  }\n  .cfi-ui-calendar__item:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-calendar__item[data-read-only],\n  .cfi-ui-calendar__swatch[data-read-only] {\n    border: 1px dashed var(--cfi-ui-calendar-item, var(--cfi-ui-accent));\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-calendar-item, var(--cfi-ui-accent-text));\n    box-shadow: none;\n  }\n  .cfi-ui-calendar__item[data-read-only][role=button]:hover {\n    filter: none;\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-calendar__item[data-flagged],\n  .cfi-ui-calendar__swatch[data-flagged] {\n    box-shadow: 0 0 0 1px var(--cfi-ui-surface), 0 0 0 3px var(--cfi-ui-error);\n  }\n  .cfi-ui-calendar__item[data-done] {\n    opacity: 0.6;\n    text-decoration: line-through;\n  }\n  .cfi-ui-calendar__item[data-dragging] {\n    opacity: 0.4;\n  }\n  .cfi-ui-calendar__more {\n    align-self: flex-start;\n    padding: 0 var(--cfi-ui-space-2xs);\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    font: inherit;\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n  }\n  .cfi-ui-calendar__more:hover {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-calendar__footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-2xs) var(--cfi-ui-space-md);\n    padding: var(--cfi-ui-space-sm) var(--cfi-ui-space-md);\n    border-top: 1px solid var(--cfi-ui-border);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-calendar__undated {\n    margin-left: auto;\n  }\n  .cfi-ui-calendar__legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-2xs);\n  }\n  .cfi-ui-calendar__swatch {\n    flex: none;\n    width: 1.25rem;\n    height: 0.75rem;\n    border: 1px solid transparent;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-calendar-item, var(--cfi-ui-accent));\n  }\n  .cfi-ui-calendar__live {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui-calendar__day,\n    .cfi-ui-calendar__item {\n      transition: none;\n    }\n  }\n}\n");
+
+// src/CalendarGrid.tsx
+import { jsx as jsx30, jsxs as jsxs30 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  today: "Today",
+  previous: (view) => `Previous ${view}`,
+  next: (view) => `Next ${view}`,
+  month: "Month",
+  week: "Week",
+  view: "Calendar view",
+  add: (day) => `Add on ${day}`,
+  more: (count) => `+${count} more`,
+  less: "Show fewer",
+  moved: (item, day) => `Moved ${item} to ${day}`
+};
+var DAY2 = 864e5;
+function ymd2(t) {
+  return new Date(t).toISOString().slice(0, 10);
+}
+function calendarDayKey(value) {
+  const t = timelineTime(value, true);
+  return t === null ? null : ymd2(t);
+}
+function calendarAddDays(day, n) {
+  return ymd2(timelineTime(day, true) + n * DAY2);
+}
+function calendarDays(view, anchor, weekStartsOn = 1) {
+  const a = new Date(timelineTime(anchor, true));
+  const from = view === "month" ? Date.UTC(a.getUTCFullYear(), a.getUTCMonth(), 1) : a.getTime();
+  const back = (new Date(from).getUTCDay() - weekStartsOn + 7) % 7;
+  const start = from - back * DAY2;
+  const month = a.getUTCMonth();
+  return Array.from({ length: view === "month" ? 42 : 7 }, (_, i) => {
+    const t = start + i * DAY2;
+    return { day: ymd2(t), inRange: view === "week" || new Date(t).getUTCMonth() === month };
+  });
+}
+function calendarShift(view, anchor, delta) {
+  if (view === "week") return calendarAddDays(anchor, delta * 7);
+  const a = new Date(timelineTime(anchor, true));
+  return ymd2(Date.UTC(a.getUTCFullYear(), a.getUTCMonth() + delta, 1));
+}
+function calendarBuckets(items) {
+  const byDay = /* @__PURE__ */ new Map();
+  let undated = 0;
+  for (const item of items) {
+    const day = calendarDayKey(item.date);
+    if (day === null) {
+      undated += 1;
+      continue;
+    }
+    const list = byDay.get(day);
+    if (list) list.push(item);
+    else byDay.set(day, [item]);
+  }
+  return { byDay, undated };
+}
+function localToday() {
+  const now = /* @__PURE__ */ new Date();
+  return ymd2(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+function format(day, locale, options) {
+  return new Date(timelineTime(day, true)).toLocaleDateString(locale, { ...options, timeZone: "UTC" });
+}
+function CalendarGrid({
+  items,
+  renderItem,
+  itemLabel,
+  view: viewProp,
+  defaultView = "month",
+  onViewChange,
+  anchor: anchorProp,
+  defaultAnchor,
+  onAnchorChange,
+  today: todayProp,
+  weekStartsOn = 1,
+  onMove,
+  onOpen,
+  onAddDay,
+  maxPerDay = 3,
+  legend,
+  undatedLabel,
+  toolbar,
+  locale = "en-US",
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const today = todayProp !== void 0 && calendarDayKey(todayProp) || localToday();
+  const [ownView, setOwnView] = useState7(defaultView);
+  const [ownAnchor, setOwnAnchor] = useState7(() => defaultAnchor && calendarDayKey(defaultAnchor) || today);
+  const view = viewProp ?? ownView;
+  const anchor = anchorProp && calendarDayKey(anchorProp) || ownAnchor;
+  const setView = (next) => {
+    if (viewProp === void 0) setOwnView(next);
+    onViewChange?.(next);
+  };
+  const setAnchor = (next) => {
+    if (anchorProp === void 0) setOwnAnchor(next);
+    onAnchorChange?.(next);
+  };
+  const [drag, setDrag] = useState7(null);
+  const [over, setOver] = useState7(null);
+  const [expanded, setExpanded] = useState7(/* @__PURE__ */ new Set());
+  const [announcement, setAnnouncement] = useState7("");
+  const rootRef = useRef5(null);
+  const refocus = useRef5(null);
+  useEffect5(() => {
+    const id = refocus.current;
+    if (!id || !rootRef.current) return;
+    const chip = rootRef.current.querySelector(`[data-calendar-item="${CSS.escape(id)}"]`);
+    if (chip) {
+      chip.focus();
+      refocus.current = null;
+    }
+  });
+  const days = calendarDays(view, anchor, weekStartsOn);
+  const { byDay, undated } = calendarBuckets(items);
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const shown = new Set(days.map((d) => d.day));
+  const showsToday = shown.has(today) && (view === "week" || days.find((d) => d.day === today)?.inRange);
+  const longDay = (day) => format(day, locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+  const title = view === "month" ? format(anchor, locale, { month: "long", year: "numeric" }) : `${format(days[0].day, locale, { month: "short", day: "numeric" })} \u2013 ${format(days[6].day, locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  })}`;
+  const move = (item, day, viaKeyboard) => {
+    if (!onMove || item.readOnly || calendarDayKey(item.date) === day) return;
+    if (viaKeyboard) {
+      refocus.current = item.id;
+      if (!shown.has(day) || view === "month" && !days.find((d) => d.day === day)?.inRange) setAnchor(day);
+    }
+    onMove(item, day);
+    setAnnouncement(labels.moved(itemLabel(item), longDay(day)));
+  };
+  const endDrag = () => {
+    setDrag(null);
+    setOver(null);
+  };
+  return /* @__PURE__ */ jsxs30("div", { ref: rootRef, className: cn("cfi-ui", "cfi-ui-calendar", className), "data-view": view, ...rest, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-calendar__header", children: [
+      /* @__PURE__ */ jsx30(Button, { size: "sm", variant: "secondary", onClick: () => setAnchor(today), disabled: showsToday || void 0, children: labels.today }),
+      /* @__PURE__ */ jsx30(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          icon: /* @__PURE__ */ jsx30(ChevronLeft, { "aria-hidden": "true" }),
+          label: labels.previous(view),
+          onClick: () => setAnchor(calendarShift(view, anchor, -1))
+        }
+      ),
+      /* @__PURE__ */ jsx30(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          icon: /* @__PURE__ */ jsx30(ChevronRight, { "aria-hidden": "true" }),
+          label: labels.next(view),
+          onClick: () => setAnchor(calendarShift(view, anchor, 1))
+        }
+      ),
+      /* @__PURE__ */ jsx30("h2", { className: "cfi-ui-calendar__title", "aria-live": "polite", children: title }),
+      /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-calendar__tools", children: [
+        toolbar,
+        /* @__PURE__ */ jsx30(
+          ToggleGroup,
+          {
+            size: "sm",
+            "aria-label": labels.view,
+            value: view,
+            onValueChange: setView,
+            options: [
+              { value: "month", label: labels.month },
+              { value: "week", label: labels.week }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-calendar__scroll", children: [
+      /* @__PURE__ */ jsx30("div", { className: "cfi-ui-calendar__weekdays", "aria-hidden": "true", children: days.slice(0, 7).map(({ day }) => /* @__PURE__ */ jsx30("div", { children: format(day, locale, { weekday: "short" }) }, day)) }),
+      /* @__PURE__ */ jsx30("div", { className: "cfi-ui-calendar__grid", children: days.map(({ day, inRange }) => {
+        const dayItems = byDay.get(day) ?? [];
+        const capped = view === "month" && !expanded.has(day) && dayItems.length > maxPerDay + 1;
+        const visible = capped ? dayItems.slice(0, maxPerDay) : dayItems;
+        const accepts = drag !== null && calendarDayKey(byId.get(drag)?.date) !== day;
+        const name = longDay(day);
+        return /* @__PURE__ */ jsxs30(
+          "div",
+          {
+            className: "cfi-ui-calendar__day",
+            "data-outside": !inRange || void 0,
+            "data-today": day === today || void 0,
+            "data-over": over === day || void 0,
+            "data-addable": onAddDay ? true : void 0,
+            onClick: (e) => {
+              if (onAddDay && (e.target === e.currentTarget || e.target.dataset.calendarEmpty)) onAddDay(day);
+            },
+            onDragOver: (e) => {
+              if (!accepts) return;
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "move";
+              if (over !== day) setOver(day);
+            },
+            onDragLeave: (e) => {
+              if (!e.currentTarget.contains(e.relatedTarget)) setOver((o) => o === day ? null : o);
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              const item = drag ? byId.get(drag) : void 0;
+              if (item && accepts) move(item, day, false);
+              endDrag();
+            },
+            children: [
+              /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-calendar__day-head", "data-calendar-empty": "1", children: [
+                /* @__PURE__ */ jsx30("span", { className: "cfi-ui-calendar__date", "data-calendar-empty": "1", "aria-current": day === today ? "date" : void 0, children: Number(day.slice(8)) }),
+                onAddDay ? /* @__PURE__ */ jsx30(
+                  "button",
+                  {
+                    type: "button",
+                    className: "cfi-ui-calendar__add",
+                    "aria-label": labels.add(name),
+                    title: labels.add(name),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onAddDay(day);
+                    },
+                    children: /* @__PURE__ */ jsx30(Plus2, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx30("ul", { className: "cfi-ui-calendar__items", "aria-label": name, "data-calendar-empty": "1", children: visible.map((item) => {
+                const movable = onMove && !item.readOnly;
+                return /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
+                  "div",
+                  {
+                    className: "cfi-ui-calendar__item",
+                    "data-calendar-item": item.id,
+                    "data-read-only": item.readOnly || void 0,
+                    "data-flagged": item.flagged || void 0,
+                    "data-done": item.done || void 0,
+                    "data-dragging": drag === item.id || void 0,
+                    "data-movable": movable || void 0,
+                    style: item.color ? { "--cfi-ui-calendar-item": item.color } : void 0,
+                    title: itemLabel(item),
+                    role: onOpen ? "button" : void 0,
+                    tabIndex: onOpen || movable ? 0 : void 0,
+                    "aria-keyshortcuts": movable ? "Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown" : void 0,
+                    draggable: movable || void 0,
+                    onDragStart: (e) => {
+                      e.stopPropagation();
+                      e.dataTransfer.effectAllowed = "move";
+                      e.dataTransfer.setData("text/plain", item.id);
+                      setTimeout(() => setDrag(item.id), 0);
+                    },
+                    onDragEnd: endDrag,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onOpen?.(item);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.target !== e.currentTarget) return;
+                      const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+                      if (movable && e.altKey && step !== void 0) {
+                        e.preventDefault();
+                        move(item, calendarAddDays(day, step), true);
+                        return;
+                      }
+                      if (onOpen && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault();
+                        onOpen(item);
+                      }
+                    },
+                    children: renderItem(item)
+                  }
+                ) }, item.id);
+              }) }),
+              capped || expanded.has(day) ? /* @__PURE__ */ jsx30(
+                "button",
+                {
+                  type: "button",
+                  className: "cfi-ui-calendar__more",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setExpanded((all) => {
+                      const next = new Set(all);
+                      if (next.has(day)) next.delete(day);
+                      else next.add(day);
+                      return next;
+                    });
+                  },
+                  children: capped ? labels.more(dayItems.length - visible.length) : labels.less
+                }
+              ) : null
+            ]
+          },
+          day
+        );
+      }) })
+    ] }),
+    legend || undated > 0 && undatedLabel ? /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-calendar__footer", children: [
+      legend,
+      undated > 0 && undatedLabel ? /* @__PURE__ */ jsx30("span", { className: "cfi-ui-calendar__undated", children: undatedLabel(undated) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx30("div", { className: "cfi-ui-calendar__live", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+function CalendarLegendItem({
+  color,
+  readOnly,
+  flagged,
+  children
+}) {
+  return /* @__PURE__ */ jsxs30("span", { className: "cfi-ui-calendar__legend-item", children: [
+    /* @__PURE__ */ jsx30(
+      "span",
+      {
+        className: "cfi-ui-calendar__swatch",
+        "data-read-only": readOnly || void 0,
+        "data-flagged": flagged || void 0,
+        style: color ? { "--cfi-ui-calendar-item": color } : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    children
+  ] });
+}
+
 // src/useSortState.ts
-import { useCallback as useCallback3, useMemo as useMemo5, useState as useState7 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo5, useState as useState8 } from "react";
 function useSortState(initialKey, initialDirection = "asc") {
-  const [sort, setSort] = useState7({ key: initialKey, direction: initialDirection });
+  const [sort, setSort] = useState8({ key: initialKey, direction: initialDirection });
   const toggle = useCallback3((key) => {
     setSort(
       (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -2713,21 +3050,21 @@ function useSortState(initialKey, initialDirection = "asc") {
 }
 
 // src/SearchInput.tsx
-import { forwardRef as forwardRef18, useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
 import { Search as Search2, X as X6 } from "lucide-react";
 
 // src/SearchInput.css
 styleInject("@layer components {\n  .cfi-ui-search__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    background: none;\n    border: none;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    border-radius: var(--cfi-ui-radius-sm);\n  }\n  .cfi-ui-search__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-search__clear:hover {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-search__clear:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: 1px;\n  }\n}\n");
 
 // src/SearchInput.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
-  const [local, setLocal] = useState8(value);
-  const timer = useRef5(void 0);
-  const latest = useRef5(onChange);
+  const [local, setLocal] = useState9(value);
+  const timer = useRef6(void 0);
+  const latest = useRef6(onChange);
   latest.current = onChange;
-  useEffect5(() => setLocal(value), [value]);
-  useEffect5(() => () => clearTimeout(timer.current), []);
+  useEffect6(() => setLocal(value), [value]);
+  useEffect6(() => () => clearTimeout(timer.current), []);
   const push = (next) => {
     setLocal(next);
     clearTimeout(timer.current);
@@ -2739,7 +3076,7 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
     setLocal("");
     latest.current("");
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Input,
     {
       ...rest,
@@ -2748,20 +3085,20 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
       value: local,
       placeholder,
       onChange: (e) => push(e.target.value),
-      prefix: /* @__PURE__ */ jsx30(Search2, { "aria-hidden": "true" }),
-      suffix: local ? /* @__PURE__ */ jsx30("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx30(X6, { "aria-hidden": "true" }) }) : void 0
+      prefix: /* @__PURE__ */ jsx31(Search2, { "aria-hidden": "true" }),
+      suffix: local ? /* @__PURE__ */ jsx31("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx31(X6, { "aria-hidden": "true" }) }) : void 0
     }
   );
 });
 
 // src/Pagination.tsx
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 
 // src/Pagination.css
 styleInject("@layer components {\n  :where(.cfi-ui-pagination) {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-md);\n    padding-block: var(--cfi-ui-space-sm);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagination__controls {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-left: auto;\n  }\n  .cfi-ui-pagination__page {\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagination__range {\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-pagination__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--cfi-ui-control-height-sm);\n    height: var(--cfi-ui-control-height-sm);\n    padding: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    cursor: pointer;\n  }\n  .cfi-ui-pagination__btn > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n  .cfi-ui-pagination__btn:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagination__btn:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: default;\n  }\n  .cfi-ui-pagination__btn:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n}\n");
 
 // src/Pagination.tsx
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2777,12 +3114,12 @@ function Pagination({
   const from = (current - 1) * pageSize + 1;
   const to = Math.min(current * pageSize, totalItems);
   const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
-  return /* @__PURE__ */ jsxs30("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs31("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
     showRange && // aria-live so a screen-reader user hears where they landed; paging
     // otherwise moves focus nowhere and announces nothing.
-    /* @__PURE__ */ jsx31("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
-    /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-pagination__controls", children: [
-      /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs31("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -2790,15 +3127,15 @@ function Pagination({
           onClick: () => onPageChange(current - 1),
           disabled: current <= 1,
           "aria-label": labels?.previous ?? "Previous page",
-          children: /* @__PURE__ */ jsx31(ChevronLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx32(ChevronLeft2, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs30("span", { className: "cfi-ui-pagination__page", children: [
+      /* @__PURE__ */ jsxs31("span", { className: "cfi-ui-pagination__page", children: [
         current,
         " / ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -2806,7 +3143,7 @@ function Pagination({
           onClick: () => onPageChange(current + 1),
           disabled: current >= pageCount,
           "aria-label": labels?.next ?? "Next page",
-          children: /* @__PURE__ */ jsx31(ChevronRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx32(ChevronRight2, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -2817,23 +3154,23 @@ function Pagination({
 styleInject("@layer components {\n  :where(.cfi-ui-list-toolbar) {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-md);\n    min-width: 0;\n  }\n  .cfi-ui-list-toolbar__search {\n    flex: 1 1 14rem;\n    min-width: 0;\n    max-width: 22rem;\n  }\n  .cfi-ui-list-toolbar__filters {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    min-width: 0;\n    flex: 0 1 auto;\n  }\n  .cfi-ui-list-toolbar__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-inline-start: auto;\n  }\n  @media (max-width: 40rem) {\n    .cfi-ui-list-toolbar__search,\n    .cfi-ui-list-toolbar__filters,\n    .cfi-ui-list-toolbar__actions {\n      flex: 1 1 100%;\n      max-width: none;\n      margin-inline-start: 0;\n    }\n  }\n}\n");
 
 // src/ListToolbar.tsx
-import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 function ListToolbar({ search, filters, actions, className }) {
-  return /* @__PURE__ */ jsxs31("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
-    search && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__search", children: search }),
-    filters && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
-    actions && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
+  return /* @__PURE__ */ jsxs32("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
+    search && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-list-toolbar__search", children: search }),
+    filters && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
+    actions && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
   ] });
 }
 
 // src/PageHeader.tsx
-import { ArrowLeft, ChevronRight as ChevronRight2 } from "lucide-react";
+import { ArrowLeft, ChevronRight as ChevronRight3 } from "lucide-react";
 
 // src/PageHeader.css
 styleInject("@layer components {\n  :where(.cfi-ui-page-header) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-xs);\n    font-family: var(--cfi-ui-font);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header[data-bordered] {\n    padding-bottom: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-page-header__crumbs {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-page-header__crumb {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n  }\n  .cfi-ui-page-header__crumb-sep {\n    width: 0.75rem;\n    height: 0.75rem;\n    flex: none;\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-page-header__crumb a {\n    color: inherit;\n    text-decoration: none;\n    border-radius: var(--cfi-ui-radius-sm);\n    transition: color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-page-header__crumb a:hover {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__crumb a:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-page-header__crumb[data-current] {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__back {\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: var(--cfi-ui-space-2xs);\n    margin-left: -0.5rem;\n    padding: 0.25rem 0.5rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-md);\n    background: none;\n    font: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-page-header__back:hover {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__back:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-page-header__back > svg {\n    width: 1rem;\n    height: 1rem;\n    flex: none;\n  }\n  .cfi-ui-page-header__row {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-page-header__titles {\n    min-width: 0;\n  }\n  .cfi-ui-page-header__title,\n  h1.cfi-ui-page-header__title,\n  h2.cfi-ui-page-header__title,\n  h3.cfi-ui-page-header__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xl);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__description {\n    margin: 0.25rem 0 0;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-page-header__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    flex: none;\n  }\n  .cfi-ui-page-header__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-top: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-page-header__row {\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cfi-ui-space-sm);\n    }\n    .cfi-ui-page-header__actions {\n      flex-wrap: wrap;\n    }\n  }\n}\n");
 
 // src/PageHeader.tsx
-import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -2847,32 +3184,32 @@ function PageHeader({
   className
 }) {
   const Heading = `h${level}`;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: cn("cfi-ui", "cfi-ui-page-header", className),
       "data-bordered": bordered ? "" : void 0,
       children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx33("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx34("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
           const last = i === breadcrumbs.length - 1;
-          const label = crumb.render ? crumb.render(crumb.label) : crumb.href ? /* @__PURE__ */ jsx33("a", { href: crumb.href, children: crumb.label }) : crumb.label;
-          return /* @__PURE__ */ jsxs32("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
-            i > 0 && /* @__PURE__ */ jsx33(ChevronRight2, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx33("span", { "aria-current": last ? "page" : void 0, children: label })
+          const label = crumb.render ? crumb.render(crumb.label) : crumb.href ? /* @__PURE__ */ jsx34("a", { href: crumb.href, children: crumb.label }) : crumb.label;
+          return /* @__PURE__ */ jsxs33("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
+            i > 0 && /* @__PURE__ */ jsx34(ChevronRight3, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx34("span", { "aria-current": last ? "page" : void 0, children: label })
           ] }, i);
         }) }),
-        onBack && /* @__PURE__ */ jsxs32("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
-          /* @__PURE__ */ jsx33(ArrowLeft, { "aria-hidden": "true" }),
+        onBack && /* @__PURE__ */ jsxs33("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
+          /* @__PURE__ */ jsx34(ArrowLeft, { "aria-hidden": "true" }),
           backLabel
         ] }),
-        /* @__PURE__ */ jsxs32("div", { className: "cfi-ui-page-header__row", children: [
-          /* @__PURE__ */ jsxs32("div", { className: "cfi-ui-page-header__titles", children: [
-            /* @__PURE__ */ jsx33(Heading, { className: "cfi-ui-page-header__title", children: title }),
-            description && /* @__PURE__ */ jsx33("p", { className: "cfi-ui-page-header__description", children: description })
+        /* @__PURE__ */ jsxs33("div", { className: "cfi-ui-page-header__row", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "cfi-ui-page-header__titles", children: [
+            /* @__PURE__ */ jsx34(Heading, { className: "cfi-ui-page-header__title", children: title }),
+            description && /* @__PURE__ */ jsx34("p", { className: "cfi-ui-page-header__description", children: description })
           ] }),
-          actions && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-page-header__actions", children: actions })
+          actions && /* @__PURE__ */ jsx34("div", { className: "cfi-ui-page-header__actions", children: actions })
         ] }),
-        children && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-page-header__meta", children })
+        children && /* @__PURE__ */ jsx34("div", { className: "cfi-ui-page-header__meta", children })
       ]
     }
   );
@@ -2885,7 +3222,7 @@ import { X as X7 } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-selection-bar) {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-2xs) var(--cfi-ui-space-sm);\n    border: 1px solid var(--cfi-ui-accent);\n    border-radius: var(--cfi-ui-radius-md);\n    background: var(--cfi-ui-accent-soft);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    min-height: 2.5rem;\n  }\n  .cfi-ui-selection-bar__count {\n    font-weight: var(--cfi-ui-weight-medium);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n  }\n  .cfi-ui-selection-bar__actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-2xs);\n  }\n  .cfi-ui-selection-bar__clear {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    margin-left: auto;\n    padding: 0.25rem 0.5rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    font: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-selection-bar__clear:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-selection-bar__clear:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-selection-bar__clear:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-selection-bar__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-selection-bar[data-busy] {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n  .cfi-ui-selection-bar[data-variant=floating] {\n    position: fixed;\n    left: 50%;\n    bottom: var(--cfi-ui-space-lg);\n    transform: translateX(-50%);\n    z-index: var(--cfi-ui-z-dropdown);\n    width: max-content;\n    max-width: calc(100vw - 2 * var(--cfi-ui-space-lg));\n    padding: var(--cfi-ui-space-xs) var(--cfi-ui-space-md);\n    border-radius: var(--cfi-ui-radius-lg);\n    background: var(--cfi-ui-surface-raised);\n    box-shadow: var(--cfi-ui-shadow-lg);\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-selection-bar {\n      flex-wrap: wrap;\n    }\n    .cfi-ui-selection-bar[data-variant=floating] {\n      left: var(--cfi-ui-space-sm);\n      right: var(--cfi-ui-space-sm);\n      width: auto;\n      max-width: none;\n      transform: none;\n    }\n  }\n}\n");
 
 // src/SelectionBar.tsx
-import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 function SelectionBar({
   count,
   children,
@@ -2897,7 +3234,7 @@ function SelectionBar({
   className
 }) {
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       role: "status",
@@ -2906,9 +3243,9 @@ function SelectionBar({
       "data-busy": busy ? "" : void 0,
       className: cn("cfi-ui", "cfi-ui-selection-bar", className),
       children: [
-        /* @__PURE__ */ jsx34("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
-        children && /* @__PURE__ */ jsx34("div", { className: "cfi-ui-selection-bar__actions", children }),
-        onClear && /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsx35("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
+        children && /* @__PURE__ */ jsx35("div", { className: "cfi-ui-selection-bar__actions", children }),
+        onClear && /* @__PURE__ */ jsxs34(
           "button",
           {
             type: "button",
@@ -2916,7 +3253,7 @@ function SelectionBar({
             onClick: onClear,
             disabled: busy,
             children: [
-              /* @__PURE__ */ jsx34(X7, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx35(X7, { "aria-hidden": "true" }),
               clearLabel
             ]
           }
@@ -2927,14 +3264,14 @@ function SelectionBar({
 }
 
 // src/usePagedRows.ts
-import { useEffect as useEffect6, useMemo as useMemo6, useState as useState9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useState as useState10 } from "react";
 function usePagedRows(all, initialPageSize = 25) {
-  const [page, setPage] = useState9(1);
-  const [pageSize, setSize] = useState9(initialPageSize);
+  const [page, setPage] = useState10(1);
+  const [pageSize, setSize] = useState10(initialPageSize);
   const totalItems = all.length;
   const pageCount = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
   const clamped = Math.min(Math.max(1, page), pageCount);
-  useEffect6(() => {
+  useEffect7(() => {
     if (clamped !== page) setPage(clamped);
   }, [clamped, page]);
   const rows = useMemo6(
@@ -2961,6 +3298,8 @@ export {
   BootScreen,
   Button,
   ButtonGroup,
+  CalendarGrid,
+  CalendarLegendItem,
   Card,
   CardBody,
   CardDescription,
@@ -3080,6 +3419,11 @@ export {
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
+  calendarAddDays,
+  calendarBuckets,
+  calendarDayKey,
+  calendarDays,
+  calendarShift,
   cn,
   formatCalendarDate,
   formatDate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
   "type": "module",
   "main": "dist/index.js",