@nxgt/material 3.79.1 → 3.81.0

package/dist/lib/components/ui/layout/settings-layout/settings-layout.types.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, ReactNode } from 'react';
+export interface SettingsSection {
+    /** The value kept in the URL (`?section=notifications`). */
+    id: string;
+    /** The section's name, in the list and as the heading of its page. */
+    title: ReactNode;
+    /** One line under the title, in the list and on the page. */
+    description?: ReactNode;
+    /** A decorative icon in a tinted well, in the list. */
+    icon?: ReactNode;
+    /** The list's group heading; sections with the same `group` sit together, in the order they first appear. */
+    group?: string;
+    /** Words the search also matches, besides a string `title`, `description` and `group`. */
+    keywords?: string;
+    disabled?: boolean;
+    /** The section's page: `ListTile` rows, forms, anything. Only the selected section renders. */
+    content: ReactNode;
+}
+export interface SettingsLayoutProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
+    sections: SettingsSection[];
+    /** The list's heading and the name of its navigation landmark; the translated "Settings" by default. */
+    title?: ReactNode;
+    /** The search param holding the selected section, `'section'` by default. */
+    param?: string;
+    /** The search param holding the phone's view (list or page), `'view'` by default. */
+    viewParam?: string;
+    /** A search field over the sections, above the list. */
+    search?: boolean;
+    /** What the one-pane phone layout follows: the window (default) or the layout's own width. */
+    breakpoint?: 'viewport' | 'container';
+    /** The list pane's width in px (default 320). */
+    listWidth?: number;
+}

package/dist/lib/components/ui/layout/settings-layout/settings-layout.utils.d.ts

@@ -0,0 +1,13 @@
+import { SettingsSection } from './settings-layout.types.js';
+export type SettingsGroup = {
+    label?: string;
+    sections: SettingsSection[];
+};
+/** The sections by `group`, in the order each group first appears; ungrouped ones keep their place. */
+export declare function groupSections(sections: SettingsSection[]): SettingsGroup[];
+/** The sections whose words (title, description, group, keywords) contain the query, every word of it. */
+export declare function filterSections(sections: SettingsSection[], query: string): SettingsSection[];
+/** The section the page shows: the one in the URL, else the first usable one. */
+export declare function currentSection(sections: SettingsSection[], id: string | null): SettingsSection | undefined;
+/** A link to a section that keeps the other search params and opens the page on a phone. */
+export declare function sectionHref(params: URLSearchParams, param: string, viewParam: string, id: string): string;

package/dist/lib/components/ui/layout/thread-layout/thread-layout-classes.d.ts

@@ -0,0 +1,17 @@
+/** How wide the centred column is; `'form'` is a sign-up form, `'wide'` a table of options. */
+export type ThreadLayoutWidth = 'form' | 'reading' | 'wide';
+/** Where the stepper sits: above the column, or in a rail beside it from `xl` (1280px). */
+export type ThreadLayoutStepperPlacement = 'top' | 'side';
+/** The column's max width, one token per name. Literal strings, so Tailwind finds every class. */
+export declare const WIDTH_CLASSES: Record<ThreadLayoutWidth, string>;
+/** The same widths widened by the 16rem rail and its 1rem gap, from `xl`. */
+export declare const WIDTH_WITH_RAIL_CLASSES: Record<ThreadLayoutWidth, string>;
+/**
+ * Literal classes, so Tailwind finds them: the room a bottom navigation bar
+ * and a docked media bar take (`--nxgt-bottom-chrome`, with the app-shell's
+ * fallback), or the home bar when larger.
+ */
+/** Sticks the footer above the bottom chrome. */
+export declare const FOOTER_STICKY = "sticky bottom-[max(var(--nxgt-bottom-chrome,calc(var(--nxgt-nav-bar,0px)+var(--nxgt-media-dock,0px))),env(safe-area-inset-bottom))]";
+/** Keeps the end of the content clear of the footer's stuck position. */
+export declare const PAD_BOTTOM_FOR_CHROME = "pb-[calc(0.5rem+max(var(--nxgt-bottom-chrome,calc(var(--nxgt-nav-bar,0px)+var(--nxgt-media-dock,0px))),env(safe-area-inset-bottom)))] lg:pb-[calc(1rem+max(var(--nxgt-bottom-chrome,calc(var(--nxgt-nav-bar,0px)+var(--nxgt-media-dock,0px))),env(safe-area-inset-bottom)))]";

package/dist/lib/components/ui/layout/thread-layout/thread-layout-parts.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement, ThreadLayoutWidth } from './thread-layout-classes.js';
+/** The centred column: the stepper (named when placed) above or beside the content. */
+export declare function ThreadLayoutColumn({ width, stepper, stepperPlacement, children, }: {
+    width?: ThreadLayoutWidth;
+    stepper?: ReactNode | ((placement: ThreadLayoutStepperPlacement) => ReactNode);
+    stepperPlacement?: ThreadLayoutStepperPlacement;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The sticky action bar in the grid's last row (`below`: its row, 2 or 3). */
+export declare function ThreadLayoutFooter({ below, children, }: {
+    below: 2 | 3;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/thread-layout/thread-layout-stepper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement } from './thread-layout-classes.js';
+/**
+ * The named landmark around a `ThreadLayout`'s stepper: above the column, or a
+ * sticky rail beside it from `xl`. One element, placed by CSS only, so the
+ * server and the client render the same markup.
+ */
+export declare function ThreadLayoutStepper({ placement, children, }: {
+    placement: ThreadLayoutStepperPlacement;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/thread-layout/thread-layout.d.ts

@@ -1,9 +1,36 @@
 import { ComponentProps, ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement, ThreadLayoutWidth } from './thread-layout-classes.js';
+export type { ThreadLayoutStepperPlacement, ThreadLayoutWidth, } from './thread-layout-classes.js';
 export type ThreadLayoutProps = {
     /** Rendered above the content, full width. Typically a back button or title. */
     header?: ReactNode;
-    /** Rendered directly above the content, inside the centered column. */
-    stepper?: ReactNode;
+    /**
+     * The wizard's steps. With `stepperPlacement` unset: rendered directly
+     * above the content, inside the centered column, as given. With a placement
+     * it sits in a `nav` named "Progress" (above the column, or a rail beside
+     * it), and may be a function, called once with the placement, so the
+     * caller picks the `Stepper`'s orientation.
+     */
+    stepper?: ReactNode | ((placement: ThreadLayoutStepperPlacement) => ReactNode);
+    /**
+     * The column's width: `'form'` (32rem), `'reading'` (48rem) or `'wide'`
+     * (72rem), centred, and its content stretched to fill it. Unset keeps the
+     * 14-of-16-column track and children centred at their own width.
+     */
+    width?: ThreadLayoutWidth;
+    /**
+     * A sticky action bar under the column (Back / Next, Save): it stays in
+     * view while the content scrolls and keeps clear of a bottom navigation
+     * bar (`--nxgt-bottom-chrome`) and the phone's home bar.
+     */
+    footer?: ReactNode;
+    /**
+     * With a `stepper`: `'top'` keeps it above the column; `'side'` puts it in
+     * a rail beside the column from 1280px and above it below (one element
+     * placed by CSS, so the function gets `'side'` in both ranges: pass a
+     * vertical `Stepper`). Unset leaves the stepper as it was.
+     */
+    stepperPlacement?: ThreadLayoutStepperPlacement;
 } & ComponentProps<'div'>;
 /**
  * A single centered column over the app background, for focused flows a user
@@ -15,4 +42,4 @@ export type ThreadLayoutProps = {
  * app-local; a flow like this one wants the chrome out of the way anyway, so
  * the `header` slot takes whatever the caller wants there instead.
  */
-export declare function ThreadLayout({ children, header, stepper, className, ...props }: ThreadLayoutProps): import("react").JSX.Element;
+export declare function ThreadLayout({ children, header, stepper, width, footer, stepperPlacement, className, ...props }: ThreadLayoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/index.d.ts

@@ -0,0 +1,5 @@
+export type { TopNavItemProps } from './partials/top-nav-item.js';
+export { TopNavItem } from './partials/top-nav-item.js';
+export type { TopNavMenuProps } from './partials/top-nav-menu.js';
+export { TopNavMenu } from './partials/top-nav-menu.js';
+export * from './top-nav.js';

package/dist/lib/components/ui/layout/top-nav/partials/top-nav-item.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type TopNavItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    /** An icon before the label. Optional: the bar reads fine with labels alone. */
+    icon?: IconProps['name'];
+    /** The visible label, already translated. */
+    children: ReactNode;
+    /** Whether this is the current destination: `aria-current="page"` and a tint. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; ends the pill and is read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** The icon, label and badge a pill shows; shared by a link and a trigger. */
+export declare function TopNavEntryContent({ icon, children, badge, badgeLabel, }: Pick<TopNavItemProps, 'icon' | 'children' | 'badge' | 'badgeLabel'>): import("react").JSX.Element;
+/** One destination of the top bar: a pill, `aria-current="page"` when active. */
+export declare function TopNavItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: TopNavItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/partials/top-nav-menu.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent, MenuItem } from '../../app-shell/types.js';
+export type TopNavMenuProps = {
+    /** The trigger's visible label, already translated. */
+    label: ReactNode;
+    icon?: IconProps['name'];
+    /** The links of the dropdown. */
+    items: MenuItem[];
+    /** The `url` of the current link, if it is one of `items`: it gets `aria-current="page"` and its trigger reads as active. */
+    current?: string;
+    badge?: number | boolean | ReactNode;
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/**
+ * An entry that opens a dropdown of links: a trigger (a button, with
+ * `aria-expanded`) and a card under it. Arrow keys, Escape and focus return
+ * follow Radix's navigation menu.
+ */
+export declare function TopNavMenu({ label, icon, items, current, badge, badgeLabel, linkComponent, className, }: TopNavMenuProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/top-nav.classes.d.ts

@@ -0,0 +1,10 @@
+/** The list of destinations: a row of pills, never wider than its place. */
+export declare const TOP_NAV_LIST = "flex min-w-0 items-center gap-1";
+/** One destination or trigger: a 48px pill, the whole pill tinted when current (Expressive). */
+export declare const TOP_NAV_ENTRY = "nxgt-plain-link group relative flex h-12 shrink-0 items-center gap-2 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground data-[state=open]:bg-accent/60 focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight]";
+/** The tint behind the pill: the bar's indicator, which grows from the middle. */
+export declare const TOP_NAV_ROW = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight]";
+/** The dropdown: a rounded card under its trigger, fading and sliding in unless motion is reduced. */
+export declare const TOP_NAV_MENU = "absolute start-0 top-full z-50 mt-2 flex w-64 flex-col gap-1 rounded-[28px] bg-card p-2 text-card-foreground shadow-xl ring-1 ring-border/60 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 motion-reduce:animate-none";
+/** One link of a dropdown: a 48px row, rounder than the pills' corner radius of the card. */
+export declare const TOP_NAV_MENU_LINK = "nxgt-plain-link group relative flex h-12 shrink-0 items-center gap-2 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground data-[state=open]:bg-accent/60 focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight] w-full rounded-2xl";

package/dist/lib/components/ui/layout/top-nav/top-nav.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { TopNavItem } from './partials/top-nav-item.js';
+import { TopNavMenu } from './partials/top-nav-menu.js';
+export type TopNavProps = {
+    /**
+     * The destinations, in order. An entry with `children` opens a dropdown of
+     * its child links; the others are links. `footer`, `group` and `display`
+     * are not used.
+     */
+    items?: MenuItem[];
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /** Hand-made entries (`TopNav.Item`, `TopNav.Menu`), after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * The top navigation (Material 3 Expressive): a `nav` of destinations as 48px
+ * pills in a row, the current one tinted with `aria-current="page"`. An entry
+ * with `children` is a trigger that opens a dropdown of its child links; when
+ * the current page is one of them, the trigger reads as active. Badges are
+ * read in the link's name. Built on Radix's navigation menu: arrow keys move
+ * along the bar, Escape closes a dropdown and returns focus to its trigger.
+ *
+ * Needs a React Router context to read the location. `ActivityLayout`'s
+ * `navigation="top"` draws it in the app header from 768px.
+ */
+export declare function TopNav({ items, linkComponent, label, children, className, }: TopNavProps): import("react").JSX.Element;
+export declare namespace TopNav {
+    var Item: typeof TopNavItem;
+    var Menu: typeof TopNavMenu;
+}

package/dist/lib/components/ui/layout/top-nav/top-nav.utils.d.ts

@@ -0,0 +1,10 @@
+import { MenuItem } from '../app-shell/types.js';
+/**
+ * The `url` of the most specific entry (a child counts) covering `pathname`,
+ * and the `url` of the top-level entry that holds it: that entry's trigger
+ * reads as active while the child carries `aria-current`.
+ */
+export declare function findTopNavActive(pathname: string, items: MenuItem[]): {
+    current?: string;
+    parent?: string;
+};

package/dist/lib/components/ui/media/galleries/gallery.d.ts

@@ -1,3 +1,3 @@
 import { GalleryProps } from './types.js';
 export type { GalleryItem, GalleryProps } from './types.js';
-export declare function Gallery({ className, ...props }: GalleryProps): import("react").JSX.Element;
+export declare function Gallery(props: GalleryProps): import("react").JSX.Element;

package/dist/lib/components/ui/media/galleries/lightbox-gallery.d.ts

@@ -1,6 +1,6 @@
 import { GalleryItem, GalleryProps } from './types.js';
 export type LightboxGalleryItem = GalleryItem;
-export type LightboxGalleryProps = Pick<GalleryProps, 'items' | 'className' | 'onDelete' | 'open' | 'onOpenChange' | 'trigger' | 'defaultIndex'> & {
+export type LightboxGalleryProps = Pick<GalleryProps, 'items' | 'className' | 'aria-label' | 'aria-labelledby' | 'onDelete' | 'open' | 'onOpenChange' | 'trigger' | 'defaultIndex'> & {
     startIndex?: number;
 };
 export declare function LightboxGallery({ startIndex, defaultIndex, ...props }: LightboxGalleryProps): import("react").JSX.Element;

package/dist/lib/components/ui/media/galleries/mini-gallery.d.ts

@@ -1,4 +1,4 @@
 import { GalleryItem, GalleryProps } from './types.js';
 export type MiniGalleryItem = GalleryItem;
-export type MiniGalleryProps = Pick<GalleryProps, 'items' | 'className' | 'onDelete' | 'maxItems'>;
+export type MiniGalleryProps = Pick<GalleryProps, 'items' | 'className' | 'aria-label' | 'aria-labelledby' | 'onDelete' | 'maxItems'>;
 export declare function MiniGallery(props: MiniGalleryProps): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/dialog/dialog-parts.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function DialogFooter({ className, stackOnPhone, ...props }: ComponentProps<'div'> & {
     /**
-     * Phones: the actions stack, full width, the main one at the bottom (the
+     * Phones: the actions stack, full width, the last-written (main) one on top (the
      * default). `false` keeps one row, the first action on the left and the
      * last on the right, for two short actions such as Cancel and Confirm.
      */

package/dist/lib/components/ui/overlays/sheet/sheet-parts.d.ts

@@ -1,6 +1,11 @@
 import { Dialog as SheetPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
 declare function SheetHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * Full-width actions in a column, in the same phone order as `DialogFooter`:
+ * write them in reading order (secondary first, main last) and the main one
+ * is on top, the secondary below it.
+ */
 declare function SheetFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>): import("react").JSX.Element;
 declare function SheetDescription({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/choice-card-group/choice-card-balance.d.ts

@@ -0,0 +1,4 @@
+/** The columns drawn when `fit` columns fit, for `count` cards. */
+export declare function balancedColumns(count: number, fit: number): number;
+/** One column below two cards' width, then the balanced count at each width that fits more. */
+export declare function balancedGridClasses(count: number, columns: 1 | 2 | 3 | 4): string[];

package/dist/lib/components/ui/selection/choice-card-group/choice-card-group.d.ts

@@ -7,6 +7,8 @@ export type { ChoiceCardGroupProps, ChoiceCardOption };
  * Space toggles). Enter does nothing, so it never submits a form. A disabled
  * option, or any unchosen one once `max` is reached, stays focusable and
  * says why. The cards sit in up to `columns` columns, each at least 13.5rem wide
- * (one on a phone); `orientation="vertical"` makes it one. The `ref` reaches the card that holds the tab stop.
+ * (one on a phone), and balanced: the last row is never one orphan card when a
+ * nearby count avoids it (4 cards in room for 3 sit 2+2); `balance={false}`
+ * fills every column that fits. `orientation="vertical"` makes it one. The `ref` reaches the card that holds the tab stop.
  */
 export declare function ChoiceCardGroup(props: ChoiceCardGroupProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/choice-card-group/choice-card-group.types.d.ts

@@ -15,5 +15,12 @@ export type ChoiceCardGroupProps = ChoiceGroupBase & ChoiceSelection & {
      * Default 2. `orientation="vertical"` makes it one.
      */
     columns?: 1 | 2 | 3 | 4;
+    /**
+     * Balance the rows: when the cards would leave one alone on the last row
+     * (4 cards in room for 3), draw fewer columns instead (2+2). Default
+     * `true`; `false` fills every column that fits, as before. CSS only,
+     * from the group's own width.
+     */
+    balance?: boolean;
     density?: 'comfortable' | 'compact';
 };

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-body.d.ts

@@ -1,4 +1,8 @@
-/** The listbox: its keys, its rows (or the empty state). */
+/**
+ * The list: its keys, its rows (or the empty state). A row holds buttons of
+ * its own, so it is a list item, not an option; the focus moves from row to
+ * row (a roving tab stop) and the keys act only when a row itself has it.
+ */
 export declare function SortableListBody({ emptyTitle }: {
     emptyTitle: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-row-parts.d.ts

@@ -1,7 +1,8 @@
 import { SortableListLabels } from '../sortable-list-context.js';
 import { SortableListDragActivator, SortableListItem } from '../types.js';
 /** The row's start mark: a lock, the drag handle, or an empty slot. */
-export declare function SortableListGrip({ locked, canDrag, activator, labels, }: {
+export declare function SortableListGrip({ locked, canDrag, activator, labels, itemLabel, }: {
+    itemLabel?: string;
     locked?: boolean;
     canDrag: boolean;
     activator: SortableListDragActivator;

package/dist/lib/components/ui/selection/sortable-list/partials/sortable-list-row-props.d.ts

@@ -10,19 +10,22 @@ type RowProps = {
     focused: boolean;
     grabbed: boolean;
     setFocused: (value: string | null) => void;
+    /** The row that holds the list's one tab stop. */
+    tabbable: boolean;
 };
-/** The option semantics of a row, over the props the sortable hands it. */
-export declare function sortableRowProps({ domProps, id, style, dragging, item, disabled, focused, grabbed, setFocused, }: RowProps): {
+/** The list item semantics of a row, over the props the sortable hands it. */
+export declare function sortableRowProps({ domProps, id, style, dragging, item, disabled, focused, grabbed, setFocused, tabbable, }: RowProps): {
     readonly 'aria-roledescription': undefined;
     readonly 'aria-describedby': undefined;
     readonly 'aria-pressed': undefined;
     readonly id: string;
     readonly style: CSSProperties | undefined;
-    readonly role: "option";
-    readonly 'aria-selected': boolean;
+    readonly role: "listitem";
+    readonly 'aria-selected': undefined;
     readonly 'aria-disabled': true | undefined;
     readonly 'data-grabbed': true | undefined;
-    readonly tabIndex: -1;
+    readonly 'data-disabled': true | undefined;
+    readonly tabIndex: 0 | -1;
     readonly onFocus: () => void;
     readonly ref: (node: HTMLDivElement | null) => void;
     readonly title?: string | undefined;

package/dist/lib/components/ui/selection/sortable-list/partials/use-owed-focus.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A key moved the cursor, the order or the rows: the focus is still owed to
+ * the list's tab stop once React has committed (a reorder re-inserts the row
+ * and the browser drops its focus to the body). `arm` records the debt for
+ * that key's commit only.
+ */
+export declare function useOwedFocus(focusedValue: string | null | undefined, ids: string[]): {
+    listRef: import('react').RefObject<HTMLDivElement | null>;
+    arm: (commandType: string) => void;
+};

package/dist/lib/components/ui/selection/sortable-list/sortable-list-context.d.ts

@@ -28,3 +28,5 @@ export type SortableListContextValue = {
 export declare const SortableListProvider: import('react').Provider<SortableListContextValue | null>;
 export declare function useSortableListContext(): SortableListContextValue;
 export declare function sortableOptionId(uid: string, index: number): string;
+/** The id of the hidden "This field is required." hint that describes the list. */
+export declare function sortableRequiredId(uid: string): string;

package/dist/lib/components/ui/selection/sortable-list/sortable-list.keyboard.d.ts

@@ -20,7 +20,7 @@ type KeyEventLike = {
     preventDefault: () => void;
 };
 /**
- * The listbox's keys. Arrows move the cursor, Home / End jump; Ctrl/⌘ +
+ * The list's keys. Arrows move the cursor, Home / End jump; Ctrl/⌘ +
  * arrow moves the row at once. Space or Enter picks a row up: then arrows
  * move it, Space or Enter drops it, Escape puts it back. Delete removes it
  * when the list is `removable`.

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-context.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
 import { EventChipVariant } from '../../display/event-chip/event-chip.classes.js';
+import { TemplateContext } from './template.types.js';
 import { CalendarEvent, EventCalendarRenderEvent, EventCalendarSlot, EventCalendarView } from './types.js';
 import { EventCalendarModel } from './use-event-calendar.js';
 export type EventCalendarContextValue = EventCalendarModel & {
     /** The events as stored, true instants; `events` is what is drawn (the zone's wall clock). */
     sourceEvents?: CalendarEvent[];
+    /** Set in `mode="template"`: the lanes, and the lane of each event. */
+    template?: TemplateContext;
     dragLabel: string;
     searchable: boolean;
     /** The views the switcher offers. */

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-shell.d.ts

@@ -0,0 +1,15 @@
+import { TemplateContext } from './template.types.js';
+import { CalendarEvent, EventCalendarProps } from './types.js';
+/** What only the template mode passes down to the shared calendar. */
+export type EventCalendarShellProps = EventCalendarProps & {
+    template?: TemplateContext;
+    /** Hides the events it rejects (the template's lane), on top of the search. */
+    visible?: (event: CalendarEvent) => boolean;
+};
+/**
+ * A month / week / workweek / day / agenda calendar: drag to move, the bottom
+ * edge to resize, click or drag across empty slots to create, a now line, a
+ * mini-month side panel and a phone layout of its own. Events are props; the
+ * chrome (search, focus, the last move's direction) lives in a slice.
+ */
+export declare function EventCalendarShell({ template, visible, onEventClick, onSlotClick, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, ...options }: EventCalendarShellProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-template.d.ts

@@ -0,0 +1,9 @@
+import { EventCalendarTemplateProps } from './template.types.js';
+/**
+ * `<EventCalendar mode="template">`: the recurring week. It runs the dated
+ * calendar on a fixed reference week and keeps the dates out of sight (see
+ * `event-calendar.template.ts`): the column headers are weekday names, the
+ * toolbar has no date navigation, nothing is today, and what comes out of
+ * `onSlotClick`, `onChange` and `onEventsChange` is weekday and time.
+ */
+export declare function TemplateEventCalendar(props: EventCalendarTemplateProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.d.ts

@@ -1,9 +1,13 @@
+import { EventCalendarTemplateProps } from './template.types.js';
 import { EventCalendarProps } from './types.js';
 export type { EventCalendarProps } from './types.js';
 /**
  * A month / week / workweek / day / agenda calendar: drag to move, the bottom
  * edge to resize, click or drag across empty slots to create, a now line, a
- * mini-month side panel and a phone layout of its own. Events are props; the
- * chrome (search, focus, the last move's direction) lives in a slice.
+ * mini-month side panel and a phone layout of its own.
+ *
+ * With `mode="template"` it is a recurring week instead: columns named by
+ * weekday, no dates, events keyed by weekday and time, and optional `lanes`
+ * (A / B) for two alternating weeks. See `EventCalendarTemplateProps`.
  */
-export declare function EventCalendar({ onEventClick, onSlotClick, className, renderEvent, toolbar, searchable, views, phoneView, sidebar, eventVariant, scrollToHour, ...options }: EventCalendarProps): import("react").JSX.Element;
+export declare function EventCalendar(props: EventCalendarProps | EventCalendarTemplateProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/event-calendar.template.d.ts

@@ -0,0 +1,41 @@
+import { Locale } from 'date-fns';
+import { EventCalendarTemplateEvent, EventCalendarTemplateSlot, TemplateContext } from './template.types.js';
+import { CalendarEvent, EventCalendarSlot } from './types.js';
+/**
+ * The template week is drawn on a fixed reference week, Monday 2001-01-01 to
+ * Sunday 2001-01-07: the dated grid, drag and resize work on it unchanged, and
+ * only the weekday and the time ever leave the calendar.
+ */
+export declare const REFERENCE_MONDAY = "2001-01-01";
+/** A moment outside the reference week: no column is "today", no now line. */
+export declare const TEMPLATE_NOW: Date;
+/** The reference week's days, Monday first (`count` 5: Monday to Friday). */
+export declare function referenceDays(count?: number): Date[];
+export declare function parseClock(time: string): number;
+export declare function formatClock(minutes: number): string;
+/** The template event as a dated one on the reference week. */
+export declare function toDatedEvent(event: EventCalendarTemplateEvent): CalendarEvent;
+/**
+ * The dated event back as the template event it came from (`base` keeps what
+ * the calendar does not edit, such as the lane).
+ */
+export declare function fromDatedEvent(event: CalendarEvent, base?: EventCalendarTemplateEvent): EventCalendarTemplateEvent;
+/** A slot of the dated grid as weekday and time. */
+export declare function toTemplateSlot(slot: EventCalendarSlot, lane: string | null): EventCalendarTemplateSlot;
+/** Whether a lane filter keeps the event: no lane means every week. */
+export declare function inLane(laneOfEvent: string | undefined, lane: string | null): boolean;
+/** `Monday · 8:00 AM – 9:00 AM`: the popover's range, with no date. */
+export declare function templateRangeLabel(event: CalendarEvent, locale?: Locale): string;
+/**
+ * The title a chip draws: with both weeks showing, an event of a lane says
+ * which (`A · Physics`); otherwise the title as it is.
+ */
+export declare function laneTitle(event: CalendarEvent, template: TemplateContext | undefined): string;
+/** A weekday moved by `days`, wrapped within the visible `count` days (5: Monday to Friday, 7: the week). */
+export declare function wrapWeekday(weekday: number, days: number, count: number): number;
+/**
+ * The dated event moved by `days` and `minutes` inside the template week: the
+ * weekday wraps within the visible days, and the move stops at the day's
+ * edges (00:00 and 24:00) keeping the duration.
+ */
+export declare function moveTemplateEvent(event: CalendarEvent, days: number, minutes: number, count: number): CalendarEvent;

package/dist/lib/components/ui/widgets/event-calendar/index.d.ts

@@ -1,5 +1,6 @@
 export type { EventCalendarProps } from './event-calendar.js';
 export { EventCalendar } from './event-calendar.js';
 export { EventCalendarProvider, useEventCalendarContext, } from './event-calendar-context.js';
+export type { EventCalendarLane, EventCalendarTemplateChange, EventCalendarTemplateEvent, EventCalendarTemplateProps, EventCalendarTemplateSlot, EventCalendarWeekday, } from './template.types.js';
 export type { CalendarEvent, EventCalendarChange, EventCalendarDensity, EventCalendarRenderEvent, EventCalendarResource, EventCalendarSlot, EventCalendarView, } from './types.js';
 export { useEventCalendar } from './use-event-calendar.js';

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-date-nav.d.ts

@@ -0,0 +1,2 @@
+/** Today, the arrows and the period: the dated calendar's navigation. */
+export declare function CalendarDateNav(): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-lane-toggle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The template week's lane switch (`All`, `A`, `B`): which alternating week
+ * shows. An event with no lane shows in every one. Nothing without `lanes`.
+ */
+export declare function CalendarLaneToggle(): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/event-calendar/partials/time-grid-header-template.d.ts

@@ -0,0 +1,7 @@
+/**
+ * One day of a template week's header: the weekday's name and nothing else
+ * (a letter on a phone, the short name from 768px, the full name from 1024px).
+ */
+export declare function TemplateHeaderDay({ day }: {
+    day: Date;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/template.types.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { EventCalendarProps } from './types.js';
+/** ISO weekday: 1 is Monday, 7 is Sunday. */
+export type EventCalendarWeekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/**
+ * An event of a template week: keyed by weekday and wall-clock time instead of
+ * a date. `start` and `end` are `HH:mm` (`end` may be `24:00`, the day's end).
+ */
+export type EventCalendarTemplateEvent = {
+    id: string;
+    title: string;
+    weekday: EventCalendarWeekday;
+    start: string;
+    end: string;
+    /** The alternating week it belongs to (an `EventCalendarLane` id); none: every week. */
+    lane?: string;
+    color?: string;
+    description?: string;
+    disabled?: boolean;
+};
+/** An alternating week of the template (`A`, `B`). */
+export type EventCalendarLane = {
+    id: string;
+    label: string;
+};
+export type EventCalendarTemplateSlot = {
+    weekday: EventCalendarWeekday;
+    start: string;
+    end: string;
+    /** The lane picked in the toolbar, when one is (none while both show). */
+    lane?: string;
+};
+export type EventCalendarTemplateChange = {
+    events: EventCalendarTemplateEvent[];
+    event: EventCalendarTemplateEvent;
+    previous: EventCalendarTemplateEvent;
+};
+/**
+ * `mode="template"`: a recurring week. Day columns are named by weekday only,
+ * there is no date navigation, today marker or now line, and events,
+ * slots and changes are keyed by weekday and time. The month, day and agenda
+ * views do not apply: `view` is `week` (the default) or `workweek`.
+ */
+export type EventCalendarTemplateProps = Pick<EventCalendarProps, 'disabled' | 'className' | 'toolbar' | 'searchable' | 'density' | 'eventVariant' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'scrollToHour'> & {
+    mode: 'template';
+    events?: EventCalendarTemplateEvent[];
+    defaultEvents?: EventCalendarTemplateEvent[];
+    onEventsChange?: (events: EventCalendarTemplateEvent[]) => void;
+    /** After a move, a resize or an edit, with the previous event. */
+    onChange?: (change: EventCalendarTemplateChange) => void;
+    onEventClick?: (event: EventCalendarTemplateEvent) => void;
+    /** A click or a drag across an empty slot: where, as weekday and time. */
+    onSlotClick?: (slot: EventCalendarTemplateSlot) => void;
+    /** `week` (7 days, the default) or `workweek` (Monday to Friday). */
+    view?: 'week' | 'workweek';
+    defaultView?: 'week' | 'workweek';
+    onViewChange?: (view: 'week' | 'workweek') => void;
+    /** The alternating weeks (`[{ id: 'A', label: 'Week A' }, …]`); a toolbar switch picks which shows. */
+    lanes?: EventCalendarLane[];
+    /** The lane shown: an id, or `null` for all. Default (uncontrolled): all. */
+    lane?: string | null;
+    defaultLane?: string | null;
+    onLaneChange?: (lane: string | null) => void;
+    /** Replaces how an event is drawn. */
+    renderEvent?: (event: EventCalendarTemplateEvent) => ReactNode;
+};
+/** What the template mode hands the shared internals through the context. */
+export type TemplateContext = {
+    lanes: EventCalendarLane[];
+    lane: string | null;
+    setLane: (lane: string | null) => void;
+    laneOf: (eventId: string) => string | undefined;
+};