@ahrowe/ui 0.39.1 → 0.41.0

package/dist/types/common/confirmModal/confirmModal.types.d.ts

@@ -14,7 +14,7 @@ export interface ConfirmModalProps extends Omit<HtmlProps<HTMLDivElement>, 'onCl
     style?: CSSProperties;
     onClose?: (didSubmit: boolean) => void;
     onConfirm?: () => void | Promise<void>;
-    title?: string;
+    title?: ReactNode;
     content?: ReactNode;
     isOpen?: boolean;
     isDelete?: boolean;

package/dist/types/common/datePicker/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './datePicker.js';
 export * from './datePicker.types.js';
-export { dateToDay, dayToDate } from '../utils/day.js';
+export { dateToDay, dayToDate, dateToTime, dayTimeToDate } from '../utils/day.js';

package/dist/types/common/errorBoundary/errorBoundary.types.d.ts

@@ -19,9 +19,9 @@ export interface ErrorBoundaryLabels {
     copied?: string;
     /** Reset button label. Default: "Try again". */
     reset?: string;
-    /** Toast shown after a successful copy (only visible if `ToastProvider` is mounted). */
+    /** Toast shown after a successful copy, when the boundary is inside an `AhroweProvider`. */
     copySuccessToast?: string;
-    /** Toast shown if the copy fails (only visible if `ToastProvider` is mounted). */
+    /** Toast shown if the copy fails, when the boundary is inside an `AhroweProvider`. */
     copyErrorToast?: string;
 }
 export interface ErrorBoundaryProps extends Omit<HtmlProps, 'title' | 'onError'> {

package/dist/types/common/modal/modal.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 import { Presentation } from '../configProvider/presentation.types.js';
 export type ModalSlots = 'container' | 'backdrop' | 'modal' | 'header' | 'title' | 'closeButton' | 'body' | 'footer';
@@ -7,9 +7,10 @@ export interface ModalLabels {
     /** Close button, read out by screen readers. */
     close?: string;
 }
-export interface ModalProps extends HtmlProps<HTMLDivElement> {
+export interface ModalProps extends Omit<HtmlProps<HTMLDivElement>, 'title'> {
     children?: React.ReactNode;
-    title?: string;
+    /** Heading in the header. Its text becomes the dialog's accessible name, unless `aria-label` is passed. */
+    title?: ReactNode;
     isOpen?: boolean;
     onClose?: () => void;
     /** Applied to the modal panel itself */

package/dist/types/common/themeProvider/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './themeProvider.js';
 export { defaultTheme } from './defaultTheme.js';
 export { lightTheme } from './lightTheme.js';
-export type { Theme, ThemeVariables } from './theme.types.js';
+export type { Theme, ThemeProviderProps, ThemeVariables } from './theme.types.js';

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 /**
  * All CSS custom properties used by the component library.
  * Every key is optional so a theme only needs to declare the variables it overrides.
@@ -205,6 +206,14 @@ export interface ThemeVariables {
     '--tree-selected-background'?: string;
     /** Selected row text. Falls back to --text-on-primary. */
     '--tree-selected-color'?: string;
+    /** Height of one hour in the week and day views. Pinching zooms from it. Falls back to 3em. */
+    '--calendar-hour-height'?: string;
+    /** Today's date marker. Falls back to --primary-color. */
+    '--calendar-today-color'?: string;
+    /** The current-time line. Falls back to --error-color. */
+    '--calendar-now-color'?: string;
+    /** Corner radius of an event. Falls back to 6px. */
+    '--calendar-event-radius'?: string;
     /** Page button size. Falls back to 36px. */
     '--pagination-size'?: string;
     /** Gap between page buttons. Falls back to 4px. */
@@ -270,3 +279,10 @@ export interface Theme {
     baseThemeId?: string;
     variables: ThemeVariables;
 }
+export interface ThemeProviderProps {
+    children: ReactNode;
+    /** The themes to choose from. Defaults to `[defaultTheme]`. */
+    themes?: Theme[];
+    /** The `id` of the theme to apply, from `themes`. */
+    currentThemeId?: string;
+}

package/dist/types/common/themeProvider/themeProvider.d.ts

@@ -1,10 +1,6 @@
 import { default as React, Component } from 'react';
-import { Theme } from './theme.types.js';
-interface Props {
-    children: React.ReactNode;
-    themes?: Theme[];
-    currentThemeId?: string;
-}
+import { Theme, ThemeProviderProps } from './theme.types.js';
+import { ThemeVariablesContext } from './themeVariablesContext.js';
 interface State {
     resolvedVariables: Record<string, string>;
     colorFadeActive: boolean;
@@ -15,15 +11,17 @@ interface State {
         currentThemeId: string | undefined;
     };
 }
-declare class ThemeProvider extends Component<Props, State> {
+declare class ThemeProvider extends Component<ThemeProviderProps, State> {
+    static contextType: React.Context<Record<string, string> | null>;
+    context: React.ContextType<typeof ThemeVariablesContext>;
     state: State;
     private colorFadeTimeout;
     private wrapperRef;
     private themeColorMeta;
     private createdThemeColorMeta;
-    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
+    static getDerivedStateFromProps(props: ThemeProviderProps, state: State): Partial<State> | null;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentDidUpdate(prevProps: ThemeProviderProps, prevState: State): void;
     componentWillUnmount(): void;
     /**
      * Replaces the former react-helmet usage: keep a single

package/dist/types/common/themeProvider/themeVariablesContext.d.ts

@@ -1,8 +1,8 @@
 /**
  * The nearest ThemeProvider's resolved variables, for content that renders outside its DOM
  * subtree. Theme variables reach a component by CSS inheritance, which a portal breaks: a
- * `BodyEnd` child lands wherever `#bodyEnd` happens to be, so it picks up whatever provider
- * wraps *that* node rather than the one it was written under.
+ * `BodyEnd` child lands wherever the portal target is, so it picks up whatever provider wraps
+ * *that* node rather than the one it was written under.
  *
  * Deliberately its own module rather than a member of `themeProvider.tsx`: BodyEnd needs the
  * context and nothing else, and importing the component for it would pull the whole

package/dist/types/common/toast/index.d.ts

@@ -1,3 +1,2 @@
-export { default } from './toastProvider.js';
 export { showToast } from './toastService.js';
-export type { ToastProviderProps, ToastContextConfig, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';
+export type { ToastContextConfig, ToastLabels, ToastOptions, ToastType, ToastPosition, ToastSlots, } from './toast.types.js';

package/dist/types/common/toast/toast.types.d.ts

@@ -19,17 +19,17 @@ export interface ToastContextConfig {
     /** Pause the auto-dismiss timer while the toast is hovered or focused. */
     pauseOnHover?: boolean;
     /**
-     * Overrides the text a toast renders of its own. Set on `ToastProvider` for
-     * the whole app, or per toast through `showToast` options.
+     * Overrides the text a toast renders of its own. Set in `AhroweProvider`'s
+     * `toast` for the whole app, or per toast through `showToast` options.
      */
     labels?: ToastLabels;
 }
-export interface ToastOptions extends ToastContextConfig {
+export interface ToastOptions extends Omit<ToastContextConfig, 'allowStacking'> {
     type?: ToastType;
     classNames?: SlotClassNames<ToastSlots>;
     styles?: SlotStyles<ToastSlots>;
 }
-export interface ToastProviderProps extends ToastContextConfig {
+export interface ToastHostProps extends ToastContextConfig {
     children: ReactNode;
 }
 export interface ToastItem extends Pick<ToastOptions, 'labels'> {

package/dist/types/common/toast/toastHost.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ToastHostProps } from './toast.types.js';
+declare function ToastHost({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, labels, }: ToastHostProps): React.JSX.Element;
+export default ToastHost;

package/dist/types/common/toast/toastService.d.ts

@@ -2,6 +2,6 @@ import { ReactNode } from 'react';
 import { ToastOptions } from './toast.types.js';
 type ShowToastFn = (content: ReactNode, options?: ToastOptions) => void;
 export declare function _registerToastHandler(fn: ShowToastFn): void;
-export declare function _unregisterToastHandler(): void;
+export declare function _unregisterToastHandler(fn: ShowToastFn): void;
 export declare function showToast(content: ReactNode, options?: ToastOptions): void;
 export {};

package/dist/types/common/utils/day.d.ts

@@ -14,3 +14,11 @@ export declare function formatDay({ year, month, day }: DayParts): string;
 export declare function dateToDay(date: Date): string;
 /** The first moment of a `'YYYY-MM-DD'` day in the browser's time zone. An Invalid Date for anything else. */
 export declare function dayToDate(day: string): Date;
+/** The `'HH:MM'` of `date` in the browser's time zone, the value a TimeInput holds; `''` for an Invalid Date. */
+export declare function dateToTime(date: Date): string;
+/**
+ * The moment a `'YYYY-MM-DD'` day and an `'HH:MM'` time stand for in the browser's time zone,
+ * DatePicker's and TimeInput's values together. A time the clock skips that day resolves forwards
+ * (02:30 becomes 03:30), a repeated one to its first occurrence. An Invalid Date for anything else.
+ */
+export declare function dayTimeToDate(day: string, time: string): Date;

package/dist/types/common/virtualList/useColumns.d.ts

@@ -19,6 +19,8 @@ interface UseColumnsArgs<T> {
     containerHeight: number;
     /** Re-measure `fit` columns when the container width settles (e.g. after a route transition). */
     containerWidth: number;
+    /** Re-measure `fit` columns when rows replace the spinner under the same `items`. */
+    isLoading: boolean;
 }
 export interface UseColumnsResult<T> {
     hasColumns: boolean;
@@ -48,5 +50,5 @@ export interface UseColumnsResult<T> {
  * `fit`-column width measurement that pins one shared px track across the header
  * and every row grid so they stay aligned.
  */
-export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, userWidths, isFrozen, rootRef, startIndex, endIndex, containerHeight, containerWidth, }: UseColumnsArgs<T>): UseColumnsResult<T>;
+export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, userWidths, isFrozen, rootRef, startIndex, endIndex, containerHeight, containerWidth, isLoading, }: UseColumnsArgs<T>): UseColumnsResult<T>;
 export {};

package/dist/types/index.d.ts

@@ -3,6 +3,8 @@ export * from './common/accordion/index.js';
 export * from './common/actionButtons/index.js';
 export { default as ActionIcon } from './common/actionIcon/index.js';
 export * from './common/actionIcon/index.js';
+export { default as AhroweProvider } from './common/ahroweProvider/index.js';
+export * from './common/ahroweProvider/index.js';
 export { default as Alert } from './common/alert/index.js';
 export * from './common/alert/index.js';
 export { default as AnimatedLogo } from './common/animatedLogo/index.js';
@@ -21,6 +23,8 @@ export { default as Button } from './common/button/index.js';
 export * from './common/button/index.js';
 export { default as ButtonGroup } from './common/buttonGroup/index.js';
 export * from './common/buttonGroup/index.js';
+export { default as Calendar } from './common/calendar/index.js';
+export * from './common/calendar/index.js';
 export { default as Card } from './common/card/index.js';
 export * from './common/card/index.js';
 export { default as Carousel } from './common/carousel/index.js';
@@ -142,7 +146,6 @@ export { default as Timeline } from './common/timeline/index.js';
 export * from './common/timeline/index.js';
 export { default as Timer } from './common/timer/index.js';
 export * from './common/timer/index.js';
-export { default as ToastProvider } from './common/toast/index.js';
 export * from './common/toast/index.js';
 export { default as Tooltip } from './common/tooltip/index.js';
 export * from './common/tooltip/index.js';

package/docs/AhroweProvider.md

@@ -0,0 +1,90 @@
+# AhroweProvider
+
+**When to use:** 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. Nest another one for a section with its own theme or defaults.
+
+**Keywords:** setup, getting started, install, bootstrap, app shell, dark mode, notifications
+
+**Import:** `import { AhroweProvider } from '@ahrowe/ui'`  
+**Types:** `import type { AhroweProviderProps } from '@ahrowe/ui'`
+
+```tsx
+import '@ahrowe/ui/style.css';
+import { AhroweProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
+
+// Keep `themes` stable, here at module scope: a new array on every render reads as a theme change.
+const THEMES = [defaultTheme, lightTheme];
+
+function Root() {
+  const { currentThemeId } = useTheme();
+
+  return (
+    <AhroweProvider
+      themes={THEMES}
+      currentThemeId={currentThemeId}
+      defaultProps={{ Input: { alwaysFloatLabel: true } }}
+      toast={{ position: 'bottom-right', duration: 3000 }}
+    >
+      <App />
+    </AhroweProvider>
+  );
+}
+```
+
+Every prop is optional. `<AhroweProvider><App /></AhroweProvider>` applies `defaultTheme` and shows toasts with their built-in settings.
+
+**Key props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `themes` | `Theme[]` | `[defaultTheme]` | The themes to choose from. See [ThemeProvider.md](ThemeProvider.md) |
+| `currentThemeId` | `string` | the first theme without a `baseThemeId` | The `id` of the theme to apply |
+| `defaultProps` | `ComponentDefaults` | | Default props per component. See [ConfigProvider.md](ConfigProvider.md) |
+| `presentation` | `Presentation` | | How every sheet-capable component presents. See [ConfigProvider.md](ConfigProvider.md) |
+| `toast` | `ToastContextConfig` | | Settings for every toast `showToast` shows. See [Toast.md](Toast.md) |
+| `scrollbars` | `boolean` | `true` | Styles every scrollbar inside the app in the theme's colours. See **Scrollbars** |
+
+## What it renders
+
+The theme's wrapper `div`. Inside it, in a `display: contents` element that styles the scrollbars (unless `scrollbars={false}`), come an empty `<template>`, your app and, after it, the element everything portalled renders into. That is why no `<div id="bodyEnd" />` is needed. Portalled panels stay inside the theme's wrapper and come after the app, so they paint above it. Each one gets the font and colours of the theme it was written under, a nested one included.
+
+On the server, and while hydrating, nothing is portalled: the server has nowhere to put it. Panels appear on the render right after hydration.
+
+## Nesting
+
+A nested `AhroweProvider` applies its `themes`, `currentThemeId`, `defaultProps` and `presentation` to its section. Its `defaultProps` merge with the outer ones per component, the same as nested `ConfigProvider`s. Toasts, scrollbars and the portal element stay with the outermost provider, so a nested `toast` or `scrollbars` is ignored, with a warning.
+
+Only a provider inside another `AhroweProvider` counts as nested. Put the outer one at the root first: one placed around a section of an app that has none renders the portal element inside that section, where an `overflow: hidden` or a `transform` around it clips every panel.
+
+`ThemeProvider` and `ConfigProvider` still work on their own, for a section that needs only one of the two.
+
+## Scrollbars
+
+Every scrollbar inside the provider, portalled panels included, is thin, with a rounded thumb in the theme's `--background-accent-light`. The page's own scrollbar, when the window itself scrolls, gets the same thumb colour: it belongs to `<html>`, outside the provider, so the provider hands the colour up in `--ahrowe-page-scrollbar-thumb`. A browser without `scrollbar-color` keeps its own page scrollbar.
+
+None of this outweighs a rule of yours. Every one of these rules has zero specificity, so any scrollbar rule on an element, on `<html>` or on `:root` wins. `scrollbars={false}` turns all of it off; `ScrollbarProvider` then styles one region at a time.
+
+## Migrating from separate providers
+
+```tsx
+// Before
+<ThemeProvider themes={THEMES} currentThemeId={currentThemeId}>
+  <ConfigProvider defaultProps={defaults}>
+    <ToastProvider position="bottom-right">
+      <App />
+    </ToastProvider>
+  </ConfigProvider>
+  <div id="bodyEnd" />
+</ThemeProvider>
+
+// After
+<AhroweProvider
+  themes={THEMES}
+  currentThemeId={currentThemeId}
+  defaultProps={defaults}
+  toast={{ position: 'bottom-right' }}
+>
+  <App />
+</AhroweProvider>
+```
+
+Delete the `<div id="bodyEnd" />`, including one in `index.html`: inside `AhroweProvider` nothing renders into it. Delete a `ScrollbarProvider` around the app too, or, if the app had none, pass `scrollbars={false}` to keep the browser's scrollbars. `ToastProvider` was removed in 0.41, and its props are the keys of `toast`.

package/docs/BodyEnd.md

@@ -1,19 +1,12 @@
 # BodyEnd
 
-**When to use:** Renders children via a React portal into a `#bodyEnd` DOM node. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.
+**When to use:** Renders children through a React portal, to the end of the app. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.
 
 **Keywords:** teleport
 
 **Import:** `import { BodyEnd } from '@ahrowe/ui'`
 
-**Setup required:** Add `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider` (usually as the last child) so portalled content inherits the theme's CSS variables.
-
-```tsx
-<ThemeProvider>
-  <App />
-  <div id="bodyEnd"></div>
-</ThemeProvider>
-```
+**Setup:** none inside [AhroweProvider](AhroweProvider.md), which renders the element BodyEnd portals into. Without it, BodyEnd looks for an element with `id="bodyEnd"`: put `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider`, as the last child, so portalled content inherits the theme.
 
 ```tsx
 import { BodyEnd } from '@ahrowe/ui';
@@ -27,9 +20,9 @@ import { BodyEnd } from '@ahrowe/ui';
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `children` | `ReactNode` | Content rendered into `#bodyEnd` |
+| `children` | `ReactNode` | Content rendered at the end of the app |
 
-**Note:** Returns `null` silently if `#bodyEnd` doesn't exist in the DOM.
+**Note:** Outside `AhroweProvider` and without a `#bodyEnd`, it renders nothing and logs an error in development.
 
-**Theming crosses the portal.** Children keep the variables of the nearest `ThemeProvider` they were *written* under, not the one that happens to wrap `#bodyEnd`. BodyEnd applies them through a `display: contents` wrapper, which generates no box — positioning, stacking and clipping are unchanged — while custom properties still inherit. Variables that theme leaves unset fall through to whatever wraps `#bodyEnd`, the same cascade the children would have seen rendered in place. With no `ThemeProvider` above, no wrapper is added at all.
+**Theming crosses the portal.** Children keep the variables of the nearest `ThemeProvider` they were *written* under, not the one that happens to wrap the element it portals into. BodyEnd applies them through a `display: contents` wrapper, which generates no box — positioning, stacking and clipping are unchanged — while custom properties still inherit. Variables that theme leaves unset fall through to whatever wraps that element, the same cascade the children would have seen rendered in place. With no `ThemeProvider` above, no wrapper is added at all.
 

package/docs/Breadcrumb.md

@@ -80,8 +80,6 @@ function Example() {
 />
 ```
 
-**Requires:** `<div id="bodyEnd"></div>` in your HTML when `maxItems` is used and the trail actually collapses (the hidden-items menu is a `Popover`, which renders via portal).
-
 **BreadcrumbItem:**
 
 | Field | Type | Description |

package/docs/CLAUDE.md

@@ -9,26 +9,29 @@ enums and slot names. Do not infer props from a component's name.
 
 ## Rules for every component
 
-- **`ThemeProvider` is required.** It injects the CSS variables every component paints with;
-  without it they render unstyled. Wrap the app once. Two themes ship, `defaultTheme` (dark) and
-  `lightTheme`; a custom theme is `{ id, variables: { '--primary-color': '#6200ea', … } }` passed
-  through `themes`, selected with `currentThemeId`. `useTheme()` switches at runtime. The variable
-  list is in ThemeProvider.md.
-- **Portals need a host.** Modal, Tooltip, Popover, Toast and Menu render into `<div id="bodyEnd" />`.
-  Put it inside `ThemeProvider`, once.
+- **`AhroweProvider` is required.** Wrap the app in it once (AhroweProvider.md). It injects the
+  CSS variables every component paints with, so without it they render unstyled; it renders the
+  element Modal, Tooltip, Popover, Toast and Menu portal into; and it shows toasts. Two themes
+  ship, `defaultTheme` (dark) and `lightTheme`; a custom theme is
+  `{ id, variables: { '--primary-color': '#6200ea', … } }` passed through `themes`, selected with
+  `currentThemeId`. `useTheme()` switches at runtime. The variable list is in ThemeProvider.md.
+  It already is a `ThemeProvider`, a `ConfigProvider`, a `ScrollbarProvider` and the toast host,
+  so do not add those or a `<div id="bodyEnd" />` beside it. A section with its own theme or defaults nests another one.
 - **Form components** (Input, NumberInput, Dropdown, MultiSelect, InputDropdown, Checkbox, Switch,
   RadioGroup, DatePicker, TimeInput, OtpInput, IconPicker) take `formValidator`, which then owns
   the value: `new FormValidator('', [Validators.required()])`. Whole forms use
   `useFormValidatorGroup`. See FormValidator.md and FormValidatorGroup.md.
-- **Days and times are strings**, never a `Date`: DatePicker holds `'YYYY-MM-DD'`, TimeInput
-  `'HH:MM'`. `dateToDay` and `dayToDate` convert in the browser's time zone; never use
-  `toISOString().slice(0, 10)`, which gives the UTC day. DatePicker.md shows how to turn a day
-  into a moment in a given time zone.
+- **Days and times are strings**, never a `Date`: DatePicker and Calendar's `date` hold
+  `'YYYY-MM-DD'`, TimeInput `'HH:MM'`. Calendar events are moments, so they stay `Date`s.
+  `dateToDay` and `dayToDate` convert a day in the browser's time zone, `dayTimeToDate(day, time)`
+  and `dateToTime` a day and a time together. Never use `toISOString().slice(0, 10)`, which gives
+  the UTC day. DatePicker.md shows how to turn a day into a moment in a given time zone.
 - **Styling.** `className` and `style` hit the root element; `classNames.<slot>` and `styles.<slot>`
   hit named inner elements. Slot names are on each doc's **Slots** line. Every native attribute of
   the root element passes through (`id`, `aria-*`, `data-*`, `on*`).
 - **Text a component renders itself** (close buttons, empty messages, page labels) is set with its
-  `labels` prop. App-wide defaults for any prop go through `ConfigProvider` (ConfigProvider.md).
+  `labels` prop. App-wide defaults for any prop go through `AhroweProvider`'s `defaultProps`
+  (ConfigProvider.md).
 - **Variants are enums**, not strings: `ButtonStyleType.Primary`, `ButtonSize.Small`. Each doc lists
   them under **Enums**.
 - **`icon` props** take a FontAwesome `IconDefinition` or any React element.
@@ -49,15 +52,17 @@ enums and slot names. Do not infer props from a component's name.
 | Accordion.md | Accordion | Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand |
 | ActionButtons.md | ActionButtons | Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers |
 | ActionIcon.md | ActionIcon | Clickable icon button without a label — toolbar actions, table row actions, icon-only controls |
+| AhroweProvider.md | 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.md | Alert, AlertStyleType | A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices |
 | AnimatedLogo.md | 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.md | AnimatedText, AnimatedTextVariant, AnimatedTextUnit | Decorative text entrance or emphasis effect, for hero headlines, empty-state messages, "premium"/"new" callouts, loading/decoding states |
 | Avatar.md | Avatar, AvatarGroup | User or entity image — profile pictures, comment authors, member lists |
 | Badge.md | Badge, BadgeStyleType, BadgePosition | Small count or status indicator — unread counts, notification dots, "new" markers |
-| BodyEnd.md | BodyEnd | Renders children via a React portal into a `#bodyEnd` DOM node |
+| BodyEnd.md | BodyEnd | Renders children through a React portal, to the end of the app |
 | Breadcrumb.md | 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.md | Button, ButtonStyleType, ButtonSize, ButtonType | Primary interactive action trigger |
 | ButtonGroup.md | ButtonGroup, ButtonGroupOrientation | Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners |
+| Calendar.md | Calendar, CalendarView | Showing and editing your own events over time, in month, week, day and agenda views: bookings, shifts, appointments, a team schedule |
 | Card.md | Card, CardStyleType, CardHeader, CardMedia, CardContent, CardActions | Surface container for grouping related content — list items, profile cards, dashboard tiles, product listings |
 | Carousel.md | 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.md | Checkbox | Boolean toggle input — settings, multi-select lists, accept terms, feature flags |
@@ -67,7 +72,7 @@ enums and slot names. Do not infer props from a component's name.
 | ConfigProvider.md | ConfigProvider | Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance |
 | ConfirmModal.md | ConfirmModal | Confirmation dialog before destructive or irreversible actions — delete, archive, send, overwrite |
 | CopyButton.md | CopyButton | Icon-only button that copies a value to the clipboard: an invoice number, an ID in a table row, an API key or share link inside an `Input` |
-| DatePicker.md | DatePicker, dateToDay, dayToDate | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
+| DatePicker.md | DatePicker, dateToDay, dayToDate, dateToTime, dayTimeToDate | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
 | Divider.md | Divider, DividerTextPosition, DividerOrientation | A rule that separates sections of content — horizontal by default, filling the width of its parent |
 | Drawer.md | Drawer | Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content |
 | DropZone.md | DropZone, DropZoneReturnType, DropZoneStatus | Drag-and-drop file upload area, optionally click-to-open the native picker |
@@ -116,12 +121,12 @@ enums and slot names. Do not infer props from a component's name.
 | Switch.md | Switch | Sliding boolean toggle — settings panels, feature flags, preference lists |
 | TabHeader.md | TabHeader | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |
 | Textarea.md | Textarea | Multiline text input — comments, descriptions, notes, code snippets, long-form content |
-| ThemeProvider.md | ThemeProvider | Required wrapper for the entire component library |
+| ThemeProvider.md | ThemeProvider | Applies a theme to its subtree, injecting its CSS custom properties as inline styles so every component inside can use them |
 | Tilt.md | Tilt, TiltGroup | Wrap content that should tilt toward the cursor in 3D |
 | TimeInput.md | TimeInput | Time-of-day selection — appointment times, opening hours, shift starts, reminders |
 | Timeline.md | Timeline, TimelineAlignment, TimelineItemStatus | A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs |
 | Timer.md | Timer | A countdown timer with a depleting ring, add/remove-time and pause/cancel controls, and an imperative ref API |
-| Toast.md | ToastProvider, showToast | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
+| Toast.md | showToast | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
 | Tooltip.md | Tooltip | Contextual help, info icons, field explanations, error pointers |
 | Tree.md | Tree, flattenTree | A hierarchical list the user can expand, collapse and pick from: categories, nested locations, folder structures, org charts |
 | VirtualList.md | VirtualList | Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM |