@ahrowe/ui 0.42.0 → 0.43.0

package/README.md

@@ -114,24 +114,24 @@ runs where `@ahrowe/ui` is installed.
 
 | Component | Description |
 |-----------|-------------|
-| `Accordion` | Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand |
+| `Accordion`, `AccordionStyleType`, `ThemeColor` | Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand |
 | `ActionButtons` | Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers |
-| `ActionIcon` | Clickable icon button without a label — toolbar actions, table row actions, icon-only controls |
+| `ActionIcon` | Clickable icon button without a label — toolbar actions, table row actions, close buttons, icon-only controls |
 | `AhroweProvider` | The one wrapper an app needs, at its root: it applies the theme, sets default props for every component, shows toasts and renders the element that Modal, Tooltip, Popover, Menu and Toast portal into |
-| `Alert`, `AlertStyleType` | A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices |
+| `Alert`, `ThemeColor` | A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices |
 | `AnimatedLogo` | A self-drawing SVG mark for splash/loading screens, empty states, or anywhere a brand or icon mark should feel alive rather than static |
 | `AnimatedText`, `AnimatedTextVariant`, `AnimatedTextUnit` | Decorative text entrance or emphasis effect, for hero headlines, empty-state messages, "premium"/"new" callouts, loading/decoding states |
 | `Avatar`, `AvatarGroup` | User or entity image — profile pictures, comment authors, member lists |
-| `Badge`, `BadgeStyleType`, `BadgePosition` | Small count or status indicator — unread counts, notification dots, "new" markers |
+| `Badge`, `BadgeStyleType`, `BadgePosition`, `ThemeColor` | Small count or status indicator — unread counts, notification dots, "new" markers |
 | `BodyEnd` | Renders children through a React portal, to the end of the app |
 | `Breadcrumb` | A trail showing the current page's position within a hierarchy, with links back to each ancestor, such as a file browser path, a category/subcategory drill-down, or a multi-level settings page |
-| `Button`, `ButtonStyleType`, `ButtonSize`, `ButtonType` | Primary interactive action trigger |
+| `Button`, `ButtonStyleType`, `ButtonSize`, `ButtonType`, `ThemeColor` | Primary interactive action trigger |
 | `ButtonGroup`, `ButtonGroupOrientation` | Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners |
-| `Calendar`, `CalendarView` | Showing and editing your own events over time, in month, week, day and agenda views: bookings, shifts, appointments, a team schedule |
-| `Card`, `CardStyleType`, `CardHeader`, `CardMedia`, `CardContent`, `CardActions` | Surface container for grouping related content — list items, profile cards, dashboard tiles, product listings |
+| `Calendar`, `CalendarView` | Showing and editing your own events over time, in month, week, day and agenda views: bookings, shifts, appointments |
+| `Card`, `CardStyleType`, `CardHeader`, `CardMedia`, `CardContent`, `CardActions`, `ThemeColor` | Surface container for grouping related content — list items, profile cards, dashboard tiles, product listings |
 | `Carousel` | A slide track for stepping through a set of items one at a time, with arrows, dots, and drag/swipe support, plus optional autoplay |
 | `Checkbox` | Boolean toggle input — settings, multi-select lists, accept terms, feature flags |
-| `Chip`, `ChipContainer`, `ChipStyleType` | Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove |
+| `Chip`, `ChipContainer`, `ChipStyleType`, `ThemeColor` | Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove |
 | `ColorPicker` | Hex colour selection — theme editors, annotation tools, customisation panels |
 | `CommandPalette` | A search-first dialog for running any command or jumping anywhere in the app from the keyboard, usually opened with ⌘K / Ctrl+K |
 | `ConfigProvider` | Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance |
@@ -186,12 +186,13 @@ runs where `@ahrowe/ui` is installed.
 | `Switch` | Sliding boolean toggle — settings panels, feature flags, preference lists |
 | `TabHeader` | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |
 | `Textarea` | Multiline text input — comments, descriptions, notes, code snippets, long-form content |
+| `ThemeColor` | The `color` prop of every component that takes one: the theme's named colours, or any CSS colour of your own |
 | `ThemeProvider` | Applies a theme to its subtree, injecting its CSS custom properties as inline styles so every component inside can use them |
 | `Tilt`, `TiltGroup` | Wrap content that should tilt toward the cursor in 3D |
 | `TimeInput` | Time-of-day selection — appointment times, opening hours, shift starts, reminders |
-| `Timeline`, `TimelineAlignment`, `TimelineItemStatus` | A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs |
+| `Timeline`, `TimelineAlignment`, `ThemeColor` | A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs |
 | `Timer` | A countdown timer with a depleting ring, add/remove-time and pause/cancel controls, and an imperative ref API |
-| `showToast` | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
+| `showToast`, `ThemeColor` | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
 | `Tooltip` | Contextual help, info icons, field explanations, error pointers |
 | `Tree`, `flattenTree` | A hierarchical list the user can expand, collapse and pick from: categories, nested locations, folder structures, org charts |
 | `VirtualList` | Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM |

package/dist/cjs-types/common/accordion/accordion.types.d.ts

@@ -1,8 +1,16 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/**
+ * How much the header stands out, as on Button, Badge and Chip. No `Filled`: a section of content
+ * should not compete with the page's main action.
+ */
 export declare enum AccordionStyleType {
-    Default = "default",
-    Primary = "primary",
+    /** The header in a light tint of the colour, its text in the colour. */
+    Light = "light",
+    /** A border in the colour, the header's text in the colour. The default. */
+    Outlined = "outlined",
+    /** The header's text in the colour, no chrome and no padding, for a disclosure inside other content. */
     Plain = "plain"
 }
 export type AccordionSlots = 'root' | 'header' | 'title' | 'icon' | 'body' | 'bodyInner';
@@ -12,6 +20,13 @@ export interface AccordionProps extends HtmlProps {
     expanded?: boolean | null;
     onHeaderClicked?: (id: string, isExpanded: boolean) => void;
     styleType?: AccordionStyleType;
+    /** A `ThemeColor` (default `Neutral`) or any CSS colour. */
+    color?: ColorValue;
+    /**
+     * Joins this accordion to the joined ones beside it into one block; otherwise neighbours keep a
+     * small gap. Default `false`.
+     */
+    joined?: boolean;
     startOpen?: boolean;
     hideHeader?: boolean;
     className?: string;

package/dist/cjs-types/common/actionButtons/actionButtons.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-import { ButtonStyleType } from '../button/index.js';
+import { ButtonProps, ButtonStyleType } from '../button/index.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 import { IconContent } from '../types/icon.types.js';
 export type ActionButtonsSlots = 'root' | 'submitButton' | 'cancelButton';
@@ -13,11 +13,17 @@ export interface ActionButtonsLabels {
 export interface ActionButtonsProps extends HtmlProps {
     onSubmit?: () => void;
     onClose?: () => void;
+    /** Default `Filled`. */
     submitButtonStyle?: ButtonStyleType;
+    /** Default `Primary`; `Error` for a destructive confirm. */
+    submitButtonColor?: ButtonProps['color'];
     isSubmitButtonLoading?: boolean;
     isSubmitButtonDisabled?: boolean;
     submitButtonIcon?: IconContent;
+    /** Default `Outlined`. */
     cancelButtonStyle?: ButtonStyleType;
+    /** Default `Primary`. */
+    cancelButtonColor?: ButtonProps['color'];
     isCancelButtonLoading?: boolean;
     isCancelButtonDisabled?: boolean;
     cancelButtonIcon?: IconContent;

package/dist/cjs-types/common/actionIcon/actionIcon.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ActionIconProps } from './actionIcon.types.js';
-declare function ActionIcon({ icon, className, style, title, onClick, classNames, styles: slotStyles, ...rest }: ActionIconProps): ReactElement;
+declare function ActionIcon({ icon, styleType, color, className, style, classNames, styles: slotStyles, ...rest }: ActionIconProps): ReactElement;
 export default ActionIcon;

package/dist/cjs-types/common/actionIcon/actionIcon.types.d.ts

@@ -1,15 +1,13 @@
-import { default as React, CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types.js';
-import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+import { ButtonProps } from '../button/button.types.js';
 export type ActionIconSlots = 'root' | 'icon';
-export interface ActionIconProps extends HtmlProps {
+/**
+ * A Button with only an icon, sized by that icon, so every Button prop applies except the ones
+ * that describe a label or a size.
+ */
+export interface ActionIconProps extends Omit<ButtonProps, 'icon' | 'size' | 'children' | 'isLoading' | 'classNames' | 'styles'> {
     icon: IconContent;
-    className?: string;
-    style?: CSSProperties;
-    title?: string;
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /** Ref to the root element. */
-    ref?: React.Ref<HTMLDivElement>;
     classNames?: SlotClassNames<ActionIconSlots>;
     styles?: SlotStyles<ActionIconSlots>;
 }

package/dist/cjs-types/common/alert/alert.types.d.ts

@@ -1,13 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
-export declare enum AlertStyleType {
-    Default = "default",
-    Info = "info",
-    Success = "success",
-    Warn = "warn",
-    Error = "error"
-}
+import { ColorValue } from '../themeProvider/color.types.js';
 export type AlertSlots = 'root' | 'icon' | 'content' | 'title' | 'description' | 'closeButton';
 /** Text Alert renders of its own, for translating it. */
 export interface AlertLabels {
@@ -17,7 +11,11 @@ export interface AlertLabels {
 export interface AlertProps extends Omit<HtmlProps, 'title'> {
     title?: ReactNode;
     children?: ReactNode;
-    styleType?: AlertStyleType;
+    /**
+     * A `ThemeColor` (default `Primary`) or any CSS colour. A ThemeColor also picks the icon; any
+     * other colour shows `icon`, or a bell.
+     */
+    color?: ColorValue;
     icon?: IconContent;
     hideIcon?: boolean;
     onClose?: () => void;

package/dist/cjs-types/common/animatedLogo/animatedLogo.types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, SVGAttributes } from 'react';
 import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export type AnimatedLogoSlots = 'path';
 /**
  * The root here is an `<svg>`, not an HTML element, so the native attributes come from
@@ -16,8 +17,8 @@ export interface AnimatedLogoProps extends DataProps, Omit<SVGAttributes<SVGSVGE
     viewBox?: string;
     /** Width/height of the SVG (any valid CSS size). Defaults to `96`. */
     size?: number | string;
-    /** Overrides the stroke/fill colour. Defaults to `var(--primary-color)`. */
-    color?: string;
+    /** The stroke and fill: a `ThemeColor` or any CSS colour. Defaults to `--primary-color`. */
+    color?: ColorValue;
     /** Length of one draw-fill cycle, in seconds. Defaults to `4.2`. */
     duration?: number;
     /** Repeats the draw-fill-retract cycle forever. When `false`, plays once and holds filled. Defaults to `true`. */

package/dist/cjs-types/common/badge/badge.types.d.ts

@@ -1,12 +1,14 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** How much the badge stands out. Independent of its colour; a `dot` is always solid. */
 export declare enum BadgeStyleType {
-    Default = "default",
-    Primary = "primary",
-    Success = "success",
-    Info = "info",
-    Warn = "warn",
-    Error = "error"
+    /** Solid fill. The default. */
+    Filled = "filled",
+    /** A light tint of the colour behind text in the colour. */
+    Light = "light",
+    /** Border and text in the colour, no fill. */
+    Outlined = "outlined"
 }
 export declare enum BadgePosition {
     TopRight = "top-right",
@@ -22,6 +24,8 @@ export interface BadgeProps extends Omit<HtmlProps, 'content'> {
     dot?: boolean;
     showZero?: boolean;
     styleType?: BadgeStyleType;
+    /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */
+    color?: ColorValue;
     position?: BadgePosition;
     children?: ReactNode;
     className?: string;

package/dist/cjs-types/common/button/button.types.d.ts

@@ -1,10 +1,17 @@
 import { default as React, CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/** How much the button stands out. Independent of its colour. */
 export declare enum ButtonStyleType {
-    Primary = "primary",
-    Default = "default",
-    Delete = "delete"
+    /** Solid fill, for the one main action. */
+    Filled = "filled",
+    /** A light tint of the colour behind text in the colour. */
+    Light = "light",
+    /** Border and text in the colour, no fill. The default. */
+    Outlined = "outlined",
+    /** Text in the colour, no fill and no border. For toolbar, icon and close buttons. */
+    Plain = "plain"
 }
 export declare enum ButtonSize {
     Default = "default",
@@ -22,13 +29,16 @@ export declare enum ButtonType {
 export type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';
 /**
  * `DataProps` supplies the `data-*` index signature, which `ButtonHTMLAttributes` doesn't cover.
- * `type` and `onClick` below deliberately narrow their inherited counterparts.
+ * `type`, `color` and `onClick` below deliberately narrow their inherited counterparts.
  */
 export interface ButtonProps extends DataProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     style?: CSSProperties;
     type?: ButtonType;
+    /** Emphasis: `Filled`, `Light`, `Outlined` (default) or `Plain`. */
     styleType?: ButtonStyleType;
+    /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */
+    color?: ColorValue;
     size?: ButtonSize;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
     children?: React.ReactNode;

package/dist/cjs-types/common/calendar/calendar.types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode, Ref } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
 export declare enum CalendarView {
     Month = "month",
     Week = "week",
@@ -11,6 +12,7 @@ export type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /** First day of the week, as `Date#getDay()` counts: 0 is Sunday, 1 is Monday. */
 export type CalendarWeekStart = CalendarWeekday;
 export interface CalendarEvent {
+    /** Unique among `events`: each occurrence of a recurring series needs an id of its own. */
     id: string | number;
     title: string;
     /** Local time. */
@@ -19,8 +21,8 @@ export interface CalendarEvent {
     end: Date;
     /** Shown in the all-day row instead of the time grid. Timed events of 24 hours or more are too. */
     allDay?: boolean;
-    /** Any CSS colour. Falls back to `--primary-color`. */
-    color?: string;
+    /** A `ThemeColor` or any CSS colour. Falls back to `--primary-color`. */
+    color?: ColorValue;
     /** Can be clicked but not moved or resized. */
     readOnly?: boolean;
 }
@@ -70,8 +72,10 @@ export interface CalendarLabels {
     eventCount?: (count: number) => string;
     /** A day or period without events (default `No events`). */
     noEvents?: string;
-    /** Create button in a day's event list, shown when `onSlotCreate` is set (default `New event`). */
+    /** Create button in the header and in a day's event list, shown when `onSlotCreate` is set (default `New event`). */
     newEvent?: string;
+    /** A week number, shown with `showWeekNumbers` (default `Week 40`). */
+    weekNumber?: (week: number) => string;
 }
 export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends HtmlProps<HTMLDivElement> {
     /** The events to show. Only the ones inside the range `onRangeChange` reports are needed. */
@@ -84,7 +88,7 @@ export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends
     onDateChange?: (day: string) => void;
     /** Controlled view. Omit for uncontrolled. */
     view?: CalendarView;
-    /** View shown initially when uncontrolled (default `CalendarView.Month`). */
+    /** View shown initially when uncontrolled (default the first of `views`). */
     defaultView?: CalendarView;
     onViewChange?: (view: CalendarView) => void;
     /** Views offered in the switcher, in order. The switcher is hidden when there is only one (default all four). */
@@ -99,9 +103,17 @@ export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends
     hiddenDays?: CalendarWeekday[];
     /**
      * Hour the week and day views open at, such as `6` for 06:00 (default an hour before now while
-     * today is shown, otherwise 07:00).
+     * today is shown, otherwise the start of `workingHours`, or 07:00).
      */
     scrollToHour?: number;
+    /**
+     * Working time in the week and day views, `[8, 17]` for 08:00 to 17:00: the hours outside it are
+     * shaded. `[22, 6]` runs overnight. Its start is also the hour those views open at when today is
+     * not shown and `scrollToHour` is not set.
+     */
+    workingHours?: readonly [start: number, end: number];
+    /** Shows ISO 8601 week numbers: on each row of the month view, and in the corner of the week and day views. */
+    showWeekNumbers?: boolean;
     /**
      * Called on mount and whenever the shown period changes, with the period and one either side of
      * it, so the neighbours are already filled while swiping. Fetch events and expand recurring
@@ -117,10 +129,11 @@ export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends
      */
     onEventChange?: (change: CalendarEventChange<E>) => void | Promise<unknown>;
     /**
-     * Empty time was clicked or dragged over. Setting it is what enables creating: a click creates
-     * an hour, or an all-day slot in the month view. `anchor` marks the slot on screen, for a
-     * popover's `anchor`: the day's cell in the month view, an invisible box over the slot in the
-     * week and day views.
+     * Empty time was clicked or dragged over, or the header's New event button pressed. Setting it is
+     * what enables creating: a click creates an hour, or an all-day slot in the month view and the
+     * all-day row. `anchor` marks the slot on screen, for a popover's `anchor`: the first day's cell
+     * in the month view, the first day's header for the all-day row, an invisible box over the slot
+     * in the time grid, and the button itself from the header.
      */
     onSlotCreate?: (slot: CalendarSlot, anchor: HTMLElement) => void;
     /**
@@ -128,6 +141,8 @@ export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends
      * title where `context.singleLine` is set: further lines have no room there.
      */
     renderEvent?: (event: E, context: CalendarEventContext) => ReactNode;
+    /** A class for one event's element, next to `classNames.event`: a tentative, cancelled or selected event. */
+    eventClassName?: (event: E) => string | undefined;
     /** The root element. */
     ref?: Ref<HTMLDivElement>;
     className?: string;
@@ -138,4 +153,4 @@ export interface CalendarProps<E extends CalendarEvent = CalendarEvent> extends
     labels?: CalendarLabels;
 }
 /** The props `ConfigProvider` can set for every Calendar. The rest depend on the event type. */
-export type CalendarDefaults = Pick<CalendarProps, 'labels' | 'locale' | 'weekStartsOn' | 'slotMinutes' | 'views' | 'hiddenDays' | 'scrollToHour'>;
+export type CalendarDefaults = Pick<CalendarProps, 'labels' | 'locale' | 'weekStartsOn' | 'slotMinutes' | 'views' | 'hiddenDays' | 'scrollToHour' | 'workingHours' | 'showWeekNumbers'>;

package/dist/cjs-types/common/calendar/components/agendaList/agendaList.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
 import { CalendarEvent } from '../../calendar.types.js';
 import { AgendaListProps } from './agendaList.types.js';
-declare function AgendaList<E extends CalendarEvent>({ events, start, days, hidden, scrollTo, showDayHeaders, locale, text, onEventClick, renderEvent, className, classNames, slotStyles, }: AgendaListProps<E>): ReactElement;
+declare function AgendaList<E extends CalendarEvent>({ events, start, days, hidden, scrollTo, showDayHeaders, locale, today, text, onEventClick, renderEvent, eventClassName, className, classNames, slotStyles, }: AgendaListProps<E>): ReactElement;
 export default AgendaList;

package/dist/cjs-types/common/calendar/components/agendaList/agendaList.types.d.ts

@@ -14,9 +14,12 @@ export interface AgendaListProps<E extends CalendarEvent = CalendarEvent> {
     /** A dated heading over each day. The list of a single, already named day leaves them out. */
     showDayHeaders: boolean;
     locale: string | undefined;
+    /** Midnight of today. */
+    today: Date;
     text: Required<CalendarLabels>;
     onEventClick: ((event: E, anchor: HTMLElement) => void) | undefined;
     renderEvent: ((event: E, context: CalendarEventContext) => ReactNode) | undefined;
+    eventClassName: ((event: E) => string | undefined) | undefined;
     className?: string;
     classNames: SlotClassNames<CalendarSlots> | undefined;
     slotStyles: SlotStyles<CalendarSlots> | undefined;

package/dist/cjs-types/common/calendar/components/calendarHeader/calendarHeader.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { CalendarHeaderProps } from './calendarHeader.types.js';
-declare function CalendarHeader({ title, compact, direction, view, views, text, onStep, onToday, onViewChange, className, style, }: CalendarHeaderProps): ReactElement;
+declare function CalendarHeader({ title, compact, direction, view, views, text, onStep, onToday, onViewChange, onCreate, className, style, }: CalendarHeaderProps): ReactElement;
 export default CalendarHeader;

package/dist/cjs-types/common/calendar/components/calendarHeader/calendarHeader.types.d.ts

@@ -12,6 +12,8 @@ export interface CalendarHeaderProps {
     onStep: (step: 1 | -1) => void;
     onToday: () => void;
     onViewChange: (view: CalendarView) => void;
+    /** The New event button was pressed; omitted where creating is off. */
+    onCreate: ((anchor: HTMLElement) => void) | undefined;
     className?: string;
     style?: CSSProperties;
 }

package/dist/cjs-types/common/calendar/components/compactMonth/compactMonth.d.ts

@@ -5,5 +5,5 @@ import { CompactMonthProps } from './compactMonth.types.js';
  * The month view of a narrow calendar: a grid of days with event dots over the selected day's
  * events. Scrolling that list folds the month up into the selected week, iOS-style.
  */
-declare function CompactMonth<E extends CalendarEvent>({ events, date, locale, weekStartsOn, hidden, text, onDateChange, onEventClick, onSlotCreate, renderEvent, classNames, slotStyles, }: CompactMonthProps<E>): ReactElement;
+declare function CompactMonth<E extends CalendarEvent>({ events, date, today, locale, weekStartsOn, hidden, text, onDateChange, onEventClick, renderEvent, eventClassName, classNames, slotStyles, }: CompactMonthProps<E>): ReactElement;
 export default CompactMonth;

package/dist/cjs-types/common/calendar/components/monthView/monthView.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
 import { CalendarEvent } from '../../calendar.types.js';
 import { MonthViewProps } from './monthView.types.js';
-declare function MonthView<E extends CalendarEvent>({ events, date, locale, weekStartsOn, hidden, text, onDateChange, onOpenDay, onEventClick, onEventChange, onSlotCreate, renderEvent, classNames, slotStyles, }: MonthViewProps<E>): ReactElement;
+declare function MonthView<E extends CalendarEvent>({ events, date, today, locale, weekStartsOn, hidden, showWeekNumbers, text, onDateChange, onOpenDay, onEventClick, onEventChange, onSlotCreate, renderEvent, eventClassName, classNames, slotStyles, }: MonthViewProps<E>): ReactElement;
 export default MonthView;

package/dist/cjs-types/common/calendar/components/monthView/monthView.types.d.ts

@@ -1,7 +1,8 @@
 import { CalendarEvent } from '../../calendar.types.js';
-/** An event picked up in the month view, and how many days it has been dragged. */
+/** An event picked up in the month view, or a new slot drawn over days, and how far it has been dragged. */
 export interface MonthDrag<E extends CalendarEvent = CalendarEvent> {
-    event: E;
+    /** The event being moved, or `null` while a new slot is drawn. */
+    event: E | null;
     /** The day under the pointer when it was picked up. */
     grabbed: Date;
     /** Days it has been dragged by. */

package/dist/cjs-types/common/calendar/components/timeGrid/timeGrid.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
 import { CalendarEvent } from '../../calendar.types.js';
 import { TimeGridProps } from './timeGrid.types.js';
-declare function TimeGrid<E extends CalendarEvent>({ events, date, view, locale, weekStartsOn, slotMinutes, hidden, scrollToHour, text, onDateChange, onOpenDay, onEventClick, onEventChange, onSlotCreate, renderEvent, classNames, slotStyles, zoomRef, }: TimeGridProps<E>): ReactElement;
+declare function TimeGrid<E extends CalendarEvent>({ events, date, period, locale, weekStartsOn, slotMinutes, hidden, scrollToHour, workingHours, showWeekNumbers, text, onDateChange, onOpenDay, onEventClick, onEventChange, onSlotCreate, renderEvent, eventClassName, classNames, slotStyles, zoomRef, }: TimeGridProps<E>): ReactElement;
 export default TimeGrid;

package/dist/cjs-types/common/calendar/components/timeGrid/timeGrid.types.d.ts

@@ -36,5 +36,13 @@ export interface ResizeDrag<E extends CalendarEvent = CalendarEvent> extends Dra
     kind: 'resize';
     event: E;
 }
-export type TimeDrag<E extends CalendarEvent = CalendarEvent> = CreateDrag | MoveDrag<E> | ResizeDrag<E>;
+/** A drag in the all-day row, which moves and creates by whole days. */
+export interface AllDayDrag<E extends CalendarEvent = CalendarEvent> extends DragBase {
+    kind: 'allDay';
+    /** The event being moved, or `null` while a new slot is drawn. */
+    event: E | null;
+    /** Days from the period's first day to the one pressed. */
+    grabbed: number;
+}
+export type TimeDrag<E extends CalendarEvent = CalendarEvent> = CreateDrag | MoveDrag<E> | ResizeDrag<E> | AllDayDrag<E>;
 export {};

package/dist/cjs-types/common/calendar/dates.d.ts

@@ -1,4 +1,4 @@
-import { CalendarView, CalendarRange, CalendarWeekStart } from './calendar.types.js';
+import { CalendarView, CalendarRange, CalendarSlot, CalendarWeekStart } from './calendar.types.js';
 export declare const MINUTES_PER_DAY = 1440;
 export declare function startOfDay(date: Date): Date;
 /** Midnight, `days` calendar days away. */
@@ -27,18 +27,34 @@ export declare function atMinutes(day: Date, minutes: number): Date;
  * after the start instead.
  */
 export declare function endAfter(start: Date, end: Date, minutes: number): Date;
+/**
+ * The Week view of a narrow calendar: three shown days from the selected one, paged by three, where
+ * seven columns would leave no room for a title. Not a `CalendarView`: the switcher still says Week.
+ */
+export declare const NARROW_WEEK = "narrowWeek";
+/** What the period arithmetic is keyed by: a view, or the narrow calendar's Week. */
+export type CalendarPeriod = CalendarView | typeof NARROW_WEEK;
 /** Midnight of the first day of the period `date` is in. */
-export declare function periodStart(view: CalendarView, date: Date, weekStartsOn: CalendarWeekStart): Date;
+export declare function periodStart(period: CalendarPeriod, date: Date, weekStartsOn: CalendarWeekStart): Date;
 /** The days a view shows for `date`. The month view is always six full weeks. */
-export declare function periodRange(view: CalendarView, date: Date, weekStartsOn: CalendarWeekStart): CalendarRange;
+export declare function periodRange(period: CalendarPeriod, date: Date, weekStartsOn: CalendarWeekStart, hidden?: ReadonlySet<number>): CalendarRange;
 /** `hiddenDays` as a lookup. A list that leaves no day of the week hides nothing. */
 export declare function hiddenDaySet(hiddenDays: readonly number[] | undefined): ReadonlySet<number>;
 /** `date`, or the first shown day from it on in `direction`. */
 export declare function shownDay(date: Date, hidden: ReadonlySet<number>, direction?: 1 | -1): Date;
 /** `date` moved by `steps` periods, keeping its place in the period where it can. */
-export declare function stepDate(view: CalendarView, date: Date, steps: number, hidden?: ReadonlySet<number>): Date;
+export declare function stepDate(period: CalendarPeriod, date: Date, steps: number, hidden?: ReadonlySet<number>): Date;
 /** The shown period plus one on either side: what the swipe pager can reveal. */
-export declare function rangeWithNeighbours(view: CalendarView, date: Date, weekStartsOn: CalendarWeekStart, hidden?: ReadonlySet<number>): CalendarRange;
+export declare function rangeWithNeighbours(period: CalendarPeriod, date: Date, weekStartsOn: CalendarWeekStart, hidden?: ReadonlySet<number>): CalendarRange;
+/** Every day from `first` to `last`, in either order: what creating whole days hands out. */
+export declare function allDaySlot(first: Date, last?: Date): CalendarSlot;
+/**
+ * What the header's New event button creates on `day`: in the week and day views the hour from
+ * the next full hour of the clock, as calendar apps do, and elsewhere the whole day.
+ */
+export declare function newEventSlot(period: CalendarPeriod, day: Date, now: Date, slotMinutes: number): CalendarSlot;
+/** The ISO 8601 week `date` falls in: weeks run Monday to Sunday, and week 1 holds 4 January. */
+export declare function weekNumber(date: Date): number;
 /** Midnight of each of `count` days from `start`. */
 export declare function daysFrom(start: Date, count: number): Date[];
 /** The days of `count` from `start` that are not hidden: the columns a row of them draws. */

package/dist/cjs-types/common/calendar/format.d.ts

@@ -1,4 +1,5 @@
-import { CalendarView, CalendarRange, CalendarWeekStart } from './calendar.types.js';
+import { CalendarRange, CalendarWeekStart } from './calendar.types.js';
+import { CalendarPeriod } from './dates.js';
 /**
  * Cached, since building one costs about fifty times more than using it. A formatter keeps the
  * time zone it was built in while `Date` follows the current one, so the key carries the zone: a
@@ -29,4 +30,4 @@ export declare function formatDayNumber(date: Date, locale: string | undefined):
 export declare function formatLongDate(date: Date, locale: string | undefined): string;
 export declare function formatShortDate(date: Date, locale: string | undefined): string;
 export declare function formatMonthTitle(date: Date, locale: string | undefined): string;
-export declare function formatPeriodTitle(view: CalendarView, date: Date, range: CalendarRange, locale: string | undefined): string;
+export declare function formatPeriodTitle(period: CalendarPeriod, date: Date, range: CalendarRange, locale: string | undefined): string;

package/dist/cjs-types/common/calendar/layout.d.ts

@@ -6,6 +6,11 @@ import { CalendarEvent } from './calendar.types.js';
 export declare const BRIEF_EVENT_MINUTES = 15;
 /** `end`, clamped so an event that ends before it starts is treated as having no length. */
 export declare function eventEnd(event: CalendarEvent): Date;
+/** `event` moved by `days` calendar days, keeping its clock times and its real length. */
+export declare function moveByDays(event: CalendarEvent, days: number): {
+    start: Date;
+    end: Date;
+};
 /** Drawn in the all-day row rather than the time grid. */
 export declare function isAllDayLike(event: CalendarEvent): boolean;
 /** First and last day (both midnight, both inclusive) the event appears on. */

package/dist/cjs-types/common/calendar/useNow.d.ts

@@ -0,0 +1,4 @@
+/** The current time, updated on each minute boundary: it carries the now-line through the day. */
+export declare function useNow(): Date;
+/** Midnight of today, updated when the day changes: today's mark, for a calendar left open overnight. */
+export declare function useToday(): Date;

package/dist/cjs-types/common/calendar/view.types.d.ts

@@ -1,18 +1,24 @@
 import { ReactNode } from 'react';
 import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
-import { CalendarEvent, CalendarEventChange, CalendarEventContext, CalendarLabels, CalendarSlot, CalendarSlots, CalendarView, CalendarWeekStart } from './calendar.types.js';
+import { CalendarEvent, CalendarEventChange, CalendarEventContext, CalendarLabels, CalendarSlot, CalendarSlots, CalendarWeekStart } from './calendar.types.js';
+import { CalendarPeriod } from './dates.js';
 /** What Calendar hands each of its views. Internal, so it stays out of the published types. */
 export interface CalendarViewProps<E extends CalendarEvent = CalendarEvent> {
     events: readonly E[];
     /** Local midnight of the selected day. */
     date: Date;
-    view: CalendarView;
+    /** The view, or the narrow calendar's three-day Week. */
+    period: CalendarPeriod;
+    /** Midnight of today, a new value when the day changes. */
+    today: Date;
     locale: string | undefined;
     weekStartsOn: CalendarWeekStart;
     slotMinutes: number;
     /** Weekdays left out, as `Date#getDay()` counts. `date` is never one of them. */
     hidden: ReadonlySet<number>;
     scrollToHour: number | undefined;
+    workingHours: readonly [start: number, end: number] | undefined;
+    showWeekNumbers: boolean;
     text: Required<CalendarLabels>;
     onDateChange: (date: Date) => void;
     /** Opens a day in the Day view, or `undefined` where the Day view is not offered. */
@@ -21,6 +27,7 @@ export interface CalendarViewProps<E extends CalendarEvent = CalendarEvent> {
     onEventChange: ((change: CalendarEventChange<E>) => void) | undefined;
     onSlotCreate: ((slot: CalendarSlot, anchor: HTMLElement) => void) | undefined;
     renderEvent: ((event: E, context: CalendarEventContext) => ReactNode) | undefined;
+    eventClassName: ((event: E) => string | undefined) | undefined;
     classNames: SlotClassNames<CalendarSlots> | undefined;
     slotStyles: SlotStyles<CalendarSlots> | undefined;
 }

package/dist/cjs-types/common/card/card.types.d.ts

@@ -1,17 +1,30 @@
 import { default as React, ReactNode } from 'react';
-import { ButtonStyleType } from '../button/button.types.js';
+import { ButtonProps, ButtonStyleType } from '../button/button.types.js';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
 import { IconAction } from '../types/actions.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+/**
+ * The card's surface. `Outlined` and `Light` mean what they do on Button, Badge and Chip; `Elevated`
+ * is a card's own. There is no `Filled`: body text on a solid colour reads badly.
+ */
 export declare enum CardStyleType {
+    /** A raised surface with a shadow, always neutral. The default. */
     Elevated = "elevated",
+    /** A border in the colour, no fill. */
     Outlined = "outlined",
-    Filled = "filled"
+    /** A flat tint of the colour, no border. */
+    Light = "light"
 }
 export type CardSlots = 'root' | 'content';
 export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     className?: string | undefined;
     children?: ReactNode;
     styleType?: CardStyleType;
+    /**
+     * The border of an `Outlined` card and the tint of a `Light` one: a `ThemeColor` (default
+     * `Neutral`) or any CSS colour. An `Elevated` card stays neutral.
+     */
+    color?: ColorValue;
     onClick?: () => void;
     tabIndex?: number | null;
     hoverEffect?: boolean;
@@ -45,6 +58,7 @@ export interface CardAction {
     id?: string;
     label?: string;
     styleType?: ButtonStyleType;
+    color?: ButtonProps['color'];
     onClick?: () => void;
 }
 export interface CardActionsProps {