@nxgt/material 3.56.0 → 3.58.0

package/dist/lib/components/ui/layout/app-shell/use-keep-shapes-inside.d.ts

@@ -1,17 +1,7 @@
-import { Box } from './keep-shapes-inside.js';
+import { bandBoxes } from './band-boxes.js';
+import { checker } from './keep-inside-checker.js';
 import { ClearMode } from './shapes-clear-content.js';
-/** The band's strips: a sticky one (the app bar) is measured where it rests, above the first strip that scrolls. */
-export declare function bandBoxes(column: Element, layer: Box): Box[];
-/**
- * Marks the scenes `data-checked`, and `data-settled` one frame later: the fade
- * of a dropped glyph starts then, so a glyph the first pass drops is never seen,
- * not even for the length of the fade. A new mark replaces the pending frame;
- * `stop` cancels it.
- */
-export declare function checker(scenes: () => Element[]): {
-    mark(): void;
-    stop(): void;
-};
+export { bandBoxes, checker };
 /**
  * Keeps the discrete shapes of a preset (`.mo > *`: the motif and illustrated
  * families) whole and clear of the chrome: after layout, and whenever the

package/dist/lib/components/ui/layout/app-shell/watch-content.d.ts

@@ -1,23 +1,7 @@
+import { collectContent, collectOccupied, scrollsInside } from './collect-content.js';
 import { Box } from './keep-shapes-inside.js';
 import { ClearMode } from './shapes-clear-content.js';
-/** Whether the region scrolls by itself (a contained shell), not the page. */
-export declare function scrollsInside(region: Element): boolean;
-/**
- * The boxes of the text (its glyph runs), the controls and the surfaces (cards, tables, lists: whole) of the region, in the content's own coordinates.
- * Both walks stop at `MAX_CONTENT_BOXES`: text past it is not collected.
- */
-export declare function collectOccupied(region: Element, anchored?: boolean): Box[];
-/**
- * The occupied boxes of a region, split: the surfaces (cards, lists, tables)
- * apart from the text, controls and marked blocks, and the bands inside the
- * region (an `EntityHeader`, the content header), which only a control-like
- * glyph keeps clear of whole.
- */
-export declare function collectContent(region: Element, anchored?: boolean): {
-    solid: Box[];
-    surfaces: Box[];
-    bands: Box[];
-};
+export { collectContent, collectOccupied, scrollsInside };
 /** A shape unit as the pass measured it: what to hide, whether the layer's edge or band already hides it, its box and its margin. */
 export interface WatchedUnit {
     /** The elements that carry `data-hidden`. */

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

@@ -0,0 +1,25 @@
+import { ReactNode, Ref } from 'react';
+import { AuthCardNoticeTone } from './auth-card.js';
+/** The banner above the card, and the row with the brand and the toolbar. */
+export declare function AuthCardBar({ banner, brand, toolbar, clear, }: {
+    banner?: ReactNode;
+    brand?: ReactNode;
+    toolbar?: ReactNode;
+    /** `data-keep-clear-box` of the boxes the backdrop's shapes stay clear of. */
+    clear: '' | undefined;
+}): import("react").JSX.Element;
+/** The card: the page's `h1`, its description, the notice and the form. */
+export declare function AuthCardPanel({ title, description, notice, noticeTone, focusTitle, headingRef, clear, children, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    notice?: ReactNode;
+    noticeTone: AuthCardNoticeTone;
+    focusTitle: boolean;
+    headingRef: Ref<HTMLHeadingElement>;
+    clear: '' | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Under the card: links to the terms, to help. */
+export declare function AuthCardFooter({ footer }: {
+    footer?: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/doc/partials/doc-header-parts.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type DocHeaderCrumb = {
+    title: ReactNode;
+    href?: string;
+};
+/** The breadcrumb above a page's title. */
+export declare function DocHeaderCrumbs({ crumbs }: {
+    crumbs?: DocHeaderCrumb[];
+}): import("react").JSX.Element | null;
+/** The line under the title: when the page was updated, where to edit it, and the copy actions. */
+export declare function DocHeaderMeta({ title, editHref, updatedAt, copyPage, copyMarkdown, markdown, }: {
+    title: ReactNode;
+    editHref?: string;
+    updatedAt?: ReactNode | Date;
+    copyPage: boolean;
+    copyMarkdown: boolean;
+    markdown?: string;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/layout/doc/partials/doc-header.d.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
-export type DocHeaderCrumb = {
-    title: ReactNode;
-    href?: string;
-};
+import { DocHeaderCrumb } from './doc-header-parts.js';
+export type { DocHeaderCrumb };
 export type DocHeaderProps = {
     title: ReactNode;
     description?: ReactNode;

package/dist/lib/components/ui/layout/doc/partials/doc-nav-parts.d.ts

@@ -0,0 +1,11 @@
+import { DocNavItem } from '../types.js';
+/** An entry's row: a link tile when it has an `href`, a plain tile otherwise. */
+export declare function DocNavTile({ item, active, }: {
+    item: DocNavItem;
+    active: boolean;
+}): import("react").JSX.Element;
+/** The button that folds or unfolds an entry's children. */
+export declare function DocNavToggle({ id, collapsed, }: {
+    id: string;
+    collapsed: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/doc/use-doc-effects.d.ts

@@ -0,0 +1,23 @@
+import { DocNavItem, DocPagerLink, DocTocItem } from './types.js';
+/** The chrome actions the doc's effects drive. */
+export type DocEffectActions = {
+    setSearchOpen: (open: boolean) => void;
+    setSidebarOpen: (open: boolean) => void;
+    setActiveHeadingId: (id: string) => void;
+};
+/** The previous and next pages: the ones given, else the neighbours of `pathname` in the nav. */
+export declare function useDocPager(items: DocNavItem[], pathname: string, previous?: DocPagerLink | null, next?: DocPagerLink | null): {
+    previous?: DocPagerLink;
+    next?: DocPagerLink;
+};
+/** The shortcuts (search, close, previous and next page), the desktop sidebar reset, the heading spy and the scroll on a new page. */
+export declare function useDocEffects({ actions, pager, navigate, pathname, toc, }: {
+    actions: DocEffectActions;
+    pager: {
+        previous?: DocPagerLink;
+        next?: DocPagerLink;
+    };
+    navigate: (href: string) => void;
+    pathname: string;
+    toc: DocTocItem[];
+}): void;

package/dist/lib/components/ui/layout/index.d.ts

@@ -18,5 +18,6 @@ export * from './sidebar/index.js';
 export * from './skip-link/index.js';
 export * from './stepper/index.js';
 export * from './steps/index.js';
+export * from './sticky-action-bar/index.js';
 export * from './thread-layout/index.js';
 export * from './toc/index.js';

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-item-content.d.ts

@@ -0,0 +1,7 @@
+import { MenuItemShellProps } from './sidebar-menu-item.types.js';
+/**
+ * The icon and the label of an entry. The label names the entry, so the icon
+ * beside it is decorative (`aria-hidden`) and the link's name is the label
+ * alone, not "Icon users Identities".
+ */
+export declare function MenuItemContent({ icon, active, children, badge, badgeLabel, ...aria }: MenuItemShellProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-item.d.ts

@@ -1,48 +1,3 @@
-import { ComponentProps, ReactNode } from 'react';
-import { LinkComponent, LinkComponentProps } from '../../primitives/link/link-component.js';
-import { SidebarMenuItemBadge } from './sidebar-menu-item-badge.js';
-/**
- * What the link of a `SidebarMenuItem` receives: the anchor's props plus the
- * `href`. It is the neutral {@link LinkComponentProps} contract: spread every
- * prop (the tooltip's handlers, `data-state`, ...) and forward `ref`. A link
- * that forwards only a table's `DataTableLinkProps` is not enough here.
- */
-export type SidebarLinkProps = LinkComponentProps;
-export type SidebarLinkComponent = LinkComponent;
-type SidebarMenuItemOwnProps = {
-    icon?: ReactNode;
-    active?: boolean;
-    /**
-     * Shown on hover and focus, to the right of the entry. An entry that shows
-     * its label, collapsed (under the icon) or expanded, has none unless one
-     * is passed: the label is already on screen. An icon-only entry defaults
-     * to its `aria-label`.
-     */
-    tooltip?: ReactNode;
-    /**
-     * A badge on the entry. `true`: a dot. A number: a count, "99+" past 99.
-     * `0`, `false` or nothing: none. A string or a node shows as it is. On the
-     * collapsed rail it sits on the icon's top-right corner; expanded it ends
-     * the row. It is hidden from assistive technology and read in the entry's
-     * name instead (see `badgeLabel`).
-     */
-    badge?: SidebarMenuItemBadge;
-    /**
-     * The text the badge adds to the entry's accessible name ("Bulletins, 2
-     * new"), already translated. Defaults to a translated "{count} new" for a
-     * count, "new activity" for a dot and the text of a string badge; a node
-     * has none by default, so give one.
-     */
-    badgeLabel?: string;
-};
-export type SidebarMenuItemProps = SidebarMenuItemOwnProps & ((ComponentProps<'button'> & {
-    href?: undefined;
-    linkComponent?: undefined;
-}) | (Omit<ComponentProps<'a'>, 'href'> & {
-    /** Renders a real link instead of a `<button>`. */
-    href: string;
-    /** The link element; a plain `<a>` by default. */
-    linkComponent?: SidebarLinkComponent;
-}));
+import { SidebarMenuItemProps } from './sidebar-menu-item.types.js';
+export type { SidebarLinkComponent, SidebarLinkProps, SidebarMenuItemProps, } from './sidebar-menu-item.types.js';
 export declare function SidebarMenuItem(props: SidebarMenuItemProps): import("react").JSX.Element;
-export {};

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-item.types.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from 'react';
+import { LinkComponent, LinkComponentProps } from '../../primitives/link/link-component.js';
+import { SidebarMenuItemBadge } from './sidebar-menu-item-badge.js';
+/**
+ * What the link of a `SidebarMenuItem` receives: the anchor's props plus the
+ * `href`. It is the neutral {@link LinkComponentProps} contract: spread every
+ * prop (the tooltip's handlers, `data-state`, ...) and forward `ref`. A link
+ * that forwards only a table's `DataTableLinkProps` is not enough here.
+ */
+export type SidebarLinkProps = LinkComponentProps;
+export type SidebarLinkComponent = LinkComponent;
+export type SidebarMenuItemOwnProps = {
+    icon?: ReactNode;
+    active?: boolean;
+    /**
+     * Shown on hover and focus, to the right of the entry. An entry that shows
+     * its label, collapsed (under the icon) or expanded, has none unless one
+     * is passed: the label is already on screen. An icon-only entry defaults
+     * to its `aria-label`.
+     */
+    tooltip?: ReactNode;
+    /**
+     * A badge on the entry. `true`: a dot. A number: a count, "99+" past 99.
+     * `0`, `false` or nothing: none. A string or a node shows as it is. On the
+     * collapsed rail it sits on the icon's top-right corner; expanded it ends
+     * the row. It is hidden from assistive technology and read in the entry's
+     * name instead (see `badgeLabel`).
+     */
+    badge?: SidebarMenuItemBadge;
+    /**
+     * The text the badge adds to the entry's accessible name ("Bulletins, 2
+     * new"), already translated. Defaults to a translated "{count} new" for a
+     * count, "new activity" for a dot and the text of a string badge; a node
+     * has none by default, so give one.
+     */
+    badgeLabel?: string;
+};
+export type SidebarMenuItemProps = SidebarMenuItemOwnProps & ((ComponentProps<'button'> & {
+    href?: undefined;
+    linkComponent?: undefined;
+}) | (Omit<ComponentProps<'a'>, 'href'> & {
+    /** Renders a real link instead of a `<button>`. */
+    href: string;
+    /** The link element; a plain `<a>` by default. */
+    linkComponent?: SidebarLinkComponent;
+}));
+export type MenuItemShellProps = SidebarMenuItemOwnProps & {
+    className?: string;
+    children?: ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    badge?: SidebarMenuItemBadge;
+    badgeLabel?: string;
+};

package/dist/lib/components/ui/layout/sticky-action-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './sticky-action-bar.js';

package/dist/lib/components/ui/layout/sticky-action-bar/keyboard-inset.d.ts

@@ -0,0 +1,17 @@
+export type ViewportReading = {
+    /** `window.innerHeight`: the layout viewport. */
+    innerHeight: number;
+    /** `visualViewport.height`. */
+    height: number;
+    /** `visualViewport.offsetTop`. */
+    offsetTop: number;
+    /** `visualViewport.scale`: a pinch-zoom is not a keyboard. */
+    scale: number;
+};
+/**
+ * How many pixels of the layout viewport's bottom the on-screen keyboard
+ * covers: the layout viewport minus the visual one. `0` when the browser
+ * resizes the layout itself (`interactive-widget=resizes-content`), when the
+ * gap is too small to be a keyboard, and while the page is pinch-zoomed.
+ */
+export declare function keyboardInset({ innerHeight, height, offsetTop, scale, }: ViewportReading): number;

package/dist/lib/components/ui/layout/sticky-action-bar/sticky-action-bar.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+export type StickyActionBarProps = ComponentProps<'div'> & {
+    /**
+     * `true` (default): below `md` the bar sticks to the bottom of the scroll
+     * box, lifted above the on-screen keyboard and clear of the safe areas;
+     * from `md` it is an inline row at the end of the content. `false`: inline
+     * everywhere.
+     */
+    sticky?: boolean;
+};
+/**
+ * The bar that holds a page's main decision (approve / send back). The last
+ * child is the primary action: it takes the room on a phone, the earlier ones
+ * keep their size. Give it one filled Button; a second one warns in development.
+ * Name it with `aria-label` and it is a `group` landmark.
+ */
+export declare function StickyActionBar({ sticky, className, children, ref, ...props }: StickyActionBarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sticky-action-bar/use-keyboard-inset.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Keeps `--nxgt-keyboard-inset` on `ref`'s element, and `data-keyboard` while
+ * the on-screen keyboard is open, from the visual viewport. The element is
+ * written to directly, not through state: a keyboard animates through many
+ * resize events and the bar must not re-render with each.
+ */
+export declare function useKeyboardInset(ref: RefObject<HTMLElement | null>): void;

package/dist/lib/components/ui/layout/toc/toc-list.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { LinkComponent } from '../../primitives/link/link-component.js';
+import { TocItem, TocLinkComponent } from './toc.js';
+export declare function DefaultLink({ href, className, onClick, children, }: {
+    href: string;
+    className?: string;
+    onClick?: () => void;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The list of links to a page's headings, the current one marked. */
+export declare function TocList({ items, current, onSelect, Link, }: {
+    items: TocItem[];
+    current?: string;
+    onSelect?: (id: string) => void;
+    Link: TocLinkComponent | LinkComponent;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/compare-slider/partials/compare-slider-handle.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+type Props = {
+    /** The handle's place, 0…100. */
+    current: number;
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+/** The guide line and the slider handle drawn over the two layers. */
+export declare function CompareSliderHandle({ current, onKeyDown }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/compare-slider/use-compare-slider.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEvent, PointerEvent } from 'react';
+type Options = {
+    position?: number;
+    defaultPosition: number;
+    onPositionChange?: (position: number) => void;
+};
+/**
+ * The handle's place (controlled or not), its pointer drag and arrow keys.
+ * The place reaches the markup as the `--compare-at` custom property.
+ */
+export declare function useCompareSlider({ position, defaultPosition, onPositionChange, }: Options): {
+    rootRef: import('react').RefObject<HTMLDivElement | null>;
+    current: number;
+    onKeyDown: (event: KeyboardEvent) => void;
+    rootHandlers: {
+        onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: () => void;
+        onPointerCancel: () => void;
+    };
+};
+export {};

package/dist/lib/components/ui/media/file-list/file-list-field.d.ts

@@ -8,5 +8,5 @@ export type FileListFieldProps = Omit<MultipleUploadProps, 'mode' | 'value'> & {
     required?: boolean;
     empty?: ReactNode;
 };
-export declare function FileListField({ label, helperText, error, disabled, accept, className, name, required, empty, value, ...rest }: FileListFieldProps): import("react").JSX.Element;
+export declare function FileListField(props: FileListFieldProps): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/media/file-list/partials/file-list-dropzone.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { useFileDragDrop } from '../../upload/network-upload-field/use-file-drag-drop.js';
+type Props = {
+    /** The field's hidden file input, opened on click or Enter / Space. */
+    inputRef: RefObject<HTMLInputElement | null>;
+    disabled: boolean;
+    invalid?: boolean;
+    dragActive: boolean;
+    dragHandlers: ReturnType<typeof useFileDragDrop>['dragHandlers'];
+};
+/** The drop zone under the list. */
+export declare function FileListDropzone({ inputRef, disabled, invalid, dragActive, dragHandlers, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/file-list/partials/file-list-input.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+type Props = {
+    id: string;
+    ref: Ref<HTMLInputElement>;
+    accept?: string;
+    disabled: boolean;
+    onFiles: (files: File[]) => void;
+};
+/** The field's hidden multi-file input, opened by the drop zone. */
+export declare function FileListInput({ id, ref, accept, disabled, onFiles }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/file-list/partials/file-list-items.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { NetworkUploadDisplayItem } from '../../upload/network-upload-field/network-upload-item.js';
+type Props = {
+    items: NetworkUploadDisplayItem[];
+    accept?: string;
+    disabled?: boolean;
+    empty?: ReactNode;
+    onReplace: (item: NetworkUploadDisplayItem, file: File) => void;
+    onRetry: (item: NetworkUploadDisplayItem) => void;
+    onRemove: (item: NetworkUploadDisplayItem) => void;
+};
+/** The field's rows, or its empty message. */
+export declare function FileListItems({ items, empty, ...row }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/file-list/partials/file-list-row-actions.d.ts

@@ -0,0 +1,12 @@
+import { NetworkUploadDisplayItem } from '../../upload/network-upload-field/network-upload-item.js';
+type Props = {
+    item: NetworkUploadDisplayItem;
+    accept?: string;
+    disabled?: boolean;
+    onReplace: (item: NetworkUploadDisplayItem, file: File) => void;
+    onRetry: (item: NetworkUploadDisplayItem) => void;
+    onRemove: (item: NetworkUploadDisplayItem) => void;
+};
+/** A row's trailing buttons: retry, download, replace (with its hidden input) and remove. */
+export declare function FileListRowActions({ item, accept, disabled, onReplace, onRetry, onRemove, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/file-list/use-file-list-field.d.ts

@@ -0,0 +1,33 @@
+import { FileListFieldProps } from './file-list-field.js';
+/** The ids, the accessible group and the upload state behind a file list field. */
+export declare function useFileListField({ required, value, className: _className, empty: _empty, ...props }: FileListFieldProps): {
+    inputId: string;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    helperId: string;
+    group: {
+        labelId: string;
+        groupProps: {
+            role: "group";
+            'aria-labelledby': string | undefined;
+            'aria-describedby': string | undefined;
+        };
+        hint: import("react").JSX.Element;
+    };
+    upload: {
+        displayItems: import('../upload/network-upload-field/network-upload-item.js').NetworkUploadDisplayItem[];
+        showEmptyZone: boolean;
+        atCapacity: boolean;
+        zoneDisabled: boolean;
+        isDragActive: boolean;
+        dragHandlers: {
+            onDragEnter: (event: import('react').DragEvent) => void;
+            onDragOver: (event: import('react').DragEvent) => void;
+            onDragLeave: (event: import('react').DragEvent) => void;
+            onDrop: (event: import('react').DragEvent) => void;
+        };
+        handleFilesSelected: (files: File[]) => void;
+        handleItemReplace: (item: import('../upload/network-upload-field/network-upload-item.js').NetworkUploadDisplayItem, file: File) => void;
+        handleItemRetry: (item: import('../upload/network-upload-field/network-upload-item.js').NetworkUploadDisplayItem) => void;
+        handleItemRemove: (item: import('../upload/network-upload-field/network-upload-item.js').NetworkUploadDisplayItem) => void;
+    };
+};

package/dist/lib/components/ui/media/galleries/partials/gallery-chrome-toolbar.d.ts

@@ -1,8 +1,4 @@
-/**
- * The viewer is always on black (or over the picture), in either theme: the
- * theme's tonal colours were dark on black in light mode, so its buttons are
- * light on a translucent black scrim.
- */
-export declare const VIEWER_BUTTON = "bg-black/45 text-white backdrop-blur-sm hover:bg-black/60 focus:bg-black/60 active:bg-black/70 [&_svg]:stroke-white [&_svg]:data-[slot=icon]:text-white";
+import { VIEWER_BUTTON } from './gallery-viewer-button.js';
+export { VIEWER_BUTTON };
 /** The lightbox's top row: the status, zoom, download, repeat and close. */
 export declare function GalleryChromeToolbar(): import("react").JSX.Element;

package/dist/lib/components/ui/media/galleries/partials/gallery-chrome-zoom.d.ts

@@ -0,0 +1,2 @@
+/** The lightbox's zoom out and zoom in buttons. */
+export declare function GalleryChromeZoom(): import("react").JSX.Element;

package/dist/lib/components/ui/media/galleries/partials/gallery-featured-arrows.d.ts

@@ -0,0 +1,2 @@
+/** The previous and next arrows laid over the featured frame. */
+export declare function GalleryFeaturedArrows(): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { GalleryShape } from '../gallery-shape-names.js';
+import { GalleryItem } from '../types.js';
+import { GalleryMorph } from '../use-gallery-view-transition.js';
+type Props = {
+    item: GalleryItem;
+    index: number;
+    shape: GalleryShape | undefined;
+    /** The tile wears the shared View Transition name. */
+    named: boolean;
+    /** The tile is the current one. */
+    current: boolean;
+    selectOnly: boolean;
+    morph: GalleryMorph;
+};
+/** A tile's picture: the morph name, the shaped frame and the media. */
+export declare function GalleryTileMedia({ item, index, shape, named, current, selectOnly, morph, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/galleries/partials/gallery-viewer-button.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The viewer is always on black (or over the picture), in either theme: the
+ * theme's tonal colours were dark on black in light mode, so its buttons are
+ * light on a translucent black scrim.
+ */
+export declare const VIEWER_BUTTON = "bg-black/45 text-white backdrop-blur-sm hover:bg-black/60 focus:bg-black/60 active:bg-black/70 [&_svg]:stroke-white [&_svg]:data-[slot=icon]:text-white";

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

@@ -0,0 +1,18 @@
+import { GalleryItem } from './types.js';
+/** The moves between items and the download of the current one. */
+export declare function useGalleryNavigation(items: GalleryItem[], state: {
+    currentIndex: number;
+}, sliceActions: {
+    next: (arg: {
+        length: number;
+    }) => void;
+    prev: (arg: {
+        length: number;
+    }) => void;
+    setIndex: (index: number) => void;
+}): {
+    next: () => void;
+    prev: () => void;
+    select: (index: number) => void;
+    downloadCurrent: () => void;
+};

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

@@ -0,0 +1,15 @@
+import { GalleryProps } from './types.js';
+/**
+ * Keeps the chrome state and the props in step: a controlled index or open
+ * flag drives the slice, an index past the end is pulled back, and the
+ * `on*Change` callbacks fire for every change but the first render.
+ */
+export declare function useGallerySync(props: GalleryProps, state: {
+    currentIndex: number;
+    lightboxOpen: boolean;
+    selectedIds: string[];
+}, sliceActions: {
+    setIndex: (index: number) => void;
+    openLightbox: () => void;
+    closeLightbox: () => void;
+}): void;

package/dist/lib/components/ui/media/image-cropper/partials/image-cropper-actions.d.ts

@@ -0,0 +1,12 @@
+import { ButtonVariant } from '../../../actions/button/button.js';
+type Props = {
+    error: string | null;
+    cancelVariant: ButtonVariant;
+    onCancel?: () => void;
+    canApply: boolean;
+    saving: boolean;
+    onApply: () => void;
+};
+/** The error line and the Cancel / Apply buttons. */
+export declare function ImageCropperActions({ error, cancelVariant, onCancel, canApply, saving, onApply, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/image-cropper/partials/image-cropper-controls.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    zoom: number;
+    onZoomChange: (zoom: number) => void;
+    onRotate: (delta: number) => void;
+};
+/** The zoom slider and the two rotate buttons under the crop frame. */
+export declare function ImageCropperControls({ zoom, onZoomChange, onRotate }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/image-cropper/partials/image-cropper-stage.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { ImageCropShape } from '../types.js';
+import { useImageCropper } from '../use-image-cropper.js';
+type Props = {
+    frameRef: RefObject<HTMLDivElement | null>;
+    src: string;
+    cropShape: ImageCropShape;
+    state: ReturnType<typeof useImageCropper>;
+};
+/** The crop frame: the react-easy-crop surface and the free-aspect resize handles. */
+export declare function ImageCropperStage({ frameRef, src, cropShape, state }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/image-cropper/use-image-cropper.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { Area, Point } from 'react-easy-crop';
+import { CropSize } from './crop-resize-handles.js';
+import { ImageCropAspectId, ImageCropResult } from './types.js';
+type Options = {
+    src: string;
+    aspect?: number;
+    fileName?: string;
+    onCrop: (result: ImageCropResult) => void;
+    frameRef: RefObject<HTMLDivElement | null>;
+};
+/** The cropper's crop, zoom, rotation and aspect state, and the apply step. */
+export declare function useImageCropper({ src, aspect: aspectProp, fileName, onCrop, frameRef, }: Options): {
+    crop: Point;
+    setCrop: import('react').Dispatch<import('react').SetStateAction<Point>>;
+    zoom: number;
+    setZoom: import('react').Dispatch<import('react').SetStateAction<number>>;
+    rotation: number;
+    setRotation: import('react').Dispatch<import('react').SetStateAction<number>>;
+    aspectId: ImageCropAspectId;
+    setAspectId: import('react').Dispatch<import('react').SetStateAction<ImageCropAspectId>>;
+    cropSize: CropSize | null;
+    setCropSize: import('react').Dispatch<import('react').SetStateAction<CropSize | null>>;
+    area: Area | null;
+    setArea: import('react').Dispatch<import('react').SetStateAction<Area | null>>;
+    isSaving: boolean;
+    error: string | null;
+    frameSize: CropSize | null;
+    isFree: boolean;
+    aspect: number;
+    keepCropSize: (next: CropSize) => void;
+    apply: () => Promise<void>;
+};
+export {};