@nxgt/material 3.56.0 → 3.58.0

package/dist/lib/components/ui/display/recovery-codes/partials/use-recovery-codes-actions.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent } from 'react';
+import { RecoveryCodesCopyResult, RecoveryCodesLabels } from '../types.js';
+/**
+ * The state and the handlers of the copy, download and print buttons: the
+ * copy's status and its message, a refusal that stays until the next action,
+ * and the print that is undone on unmount.
+ */
+export declare function useRecoveryCodesActions({ codes, labels, fileName, fileHeading, fileNote, onCopy, }: {
+    codes: readonly string[];
+    labels: RecoveryCodesLabels;
+    fileName: string;
+    fileHeading: string;
+    fileNote?: string;
+    onCopy?: (result: RecoveryCodesCopyResult) => void;
+}): {
+    status: import('../../../actions/copy-button/use-copy-status.js').CopyStatus;
+    refused: boolean;
+    message: string;
+    copyCodes: () => Promise<void>;
+    print: (event: MouseEvent<HTMLButtonElement>) => void;
+    download: () => void;
+};

package/dist/lib/components/ui/display/recovery-codes-status/partials/recovery-codes-status-plain.d.ts

@@ -0,0 +1,13 @@
+import { useVerificationLabels } from '../../../fields/verification-code/use-verification-labels.js';
+import { RecoveryCodesStatusLabels } from '../types.js';
+/**
+ * The way to a new set without a code (`requireCode` off): a plain button
+ * that a lock disables, with the lock's note read by the button.
+ */
+export declare function RecoveryCodesStatusPlain({ labels, overrides, locked, pending, onRegenerate, }: {
+    labels: RecoveryCodesStatusLabels;
+    overrides: Parameters<typeof useVerificationLabels>[0];
+    locked: boolean | undefined;
+    pending: boolean | undefined;
+    onRegenerate: () => unknown;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/alert-dialog/alert-dialog-actions.d.ts

@@ -0,0 +1,6 @@
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+import { ButtonProps } from '../../actions/button/button.js';
+declare function AlertDialogAction({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Action> & Partial<Pick<ButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Cancel> & Partial<Pick<ButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
+export { AlertDialogAction, AlertDialogCancel };

package/dist/lib/components/ui/feedback/alert-dialog/alert-dialog.d.ts

@@ -1,6 +1,6 @@
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
-import { ButtonProps } from '../../actions/button/button.js';
+import { AlertDialogAction, AlertDialogCancel } from './alert-dialog-actions.js';
 declare function AlertDialog({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Root>): import("react").JSX.Element;
 declare function AlertDialogTrigger({ children, asChild, ...props }: ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react").JSX.Element;
 declare function AlertDialogPortal({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react").JSX.Element;
@@ -10,6 +10,4 @@ declare function AlertDialogHeader({ className, ...props }: ComponentProps<'div'
 declare function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>): import("react").JSX.Element;
 declare function AlertDialogDescription({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Description>): import("react").JSX.Element;
-declare function AlertDialogAction({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Action> & Partial<Pick<ButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
-declare function AlertDialogCancel({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Cancel> & Partial<Pick<ButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogPrimitive, AlertDialogTitle, AlertDialogTrigger, };

package/dist/lib/components/ui/feedback/confirm-dialog/use-confirm-action.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent } from 'react';
+/**
+ * A confirm dialog's action: `handleConfirm` runs `onConfirm` with the
+ * buttons busy, closes on success, and on a throw keeps the dialog open with
+ * the error's message. A reopened dialog starts without the old error.
+ */
+export declare function useConfirmAction({ open, onOpenChange, onConfirm, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void | Promise<void>;
+}): {
+    pending: boolean;
+    error: string | null;
+    handleOpenChange: (value: boolean) => void;
+    handleConfirm: (event: MouseEvent<HTMLButtonElement>) => Promise<void>;
+};

package/dist/lib/components/ui/feedback/confirmation-dialog/use-confirmation-form.d.ts

@@ -0,0 +1,18 @@
+import { default as z } from 'zod';
+import { ConfirmationDialogProps } from './confirmation-dialog.js';
+type InferFormValues<T> = T extends z.ZodObject<any> ? z.infer<T> : never;
+/** The form of a confirmation dialog: the schema's resolver and defaults. */
+export declare function useConfirmationForm<T>(formOptions: ConfirmationDialogProps<T>['formOptions']): import('react-hook-form').UseFormReturn<InferFormValues<T>, any, InferFormValues<T>>;
+/**
+ * `open` + `onOpenChange` make a dialog controlled; without `open` it keeps
+ * its own state (`defaultOpen`), and `onOpenChange` only observes.
+ */
+export declare function useDialogOpen({ open, defaultOpen, onOpenChange, }: {
+    open?: boolean;
+    defaultOpen: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): {
+    isOpen: boolean;
+    handleOpenChange: (value: boolean) => void;
+};
+export {};

package/dist/lib/components/ui/feedback/countdown-timer/countdown-ring.d.ts

@@ -0,0 +1,7 @@
+import { CountdownTone } from './countdown-timer.utils.js';
+/** The ring that empties as the time runs out; decoration, the clock carries the time. */
+export declare function CountdownRing({ tone, fraction, size, }: {
+    tone: CountdownTone;
+    fraction: number;
+    size: 'sm' | 'md';
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/countdown-timer/countdown-timer.d.ts

@@ -12,6 +12,14 @@ export type CountdownTimerProps = {
     criticalAt?: number;
     /** Its name; "Time remaining" by default. */
     label?: string;
+    /**
+     * What the warning and critical tones say beside the clock, with a clock
+     * icon, so low time is not shown by colour alone. By default "Little time
+     * left" in the warning tone and "Almost out of time" in the critical one; a
+     * string replaces both; `false` hides the icon and the words (the
+     * announcement then speaks the time only).
+     */
+    warningText?: string | false;
     size?: 'sm' | 'md';
 } & Omit<ComponentProps<'div'>, 'children'>;
 /**
@@ -20,4 +28,4 @@ export type CountdownTimerProps = {
  * assistive tech hears it only when it crosses a threshold and when the time
  * is up, never every second.
  */
-export declare function CountdownTimer({ duration, paused, onExpire, warningAt, criticalAt, label, size, className, ...props }: CountdownTimerProps): import("react").JSX.Element;
+export declare function CountdownTimer({ duration, paused, onExpire, warningAt, criticalAt, label, warningText, size, className, ...props }: CountdownTimerProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/notification-row/partials/notification-row-body.d.ts

@@ -0,0 +1,10 @@
+import { NotificationRowProps } from '../types.js';
+type Props = Pick<NotificationRowProps, 'title' | 'description' | 'createdAt' | 'now' | 'category' | 'href' | 'linkComponent' | 'onOpen' | 'onMarkRead' | 'onDismiss' | 'actions'> & {
+    /** The row's name for assistive tech, for the quick actions. */
+    name: string;
+    unread: boolean;
+    compact: boolean;
+};
+/** The text column of a notification: title and time, description, tag, actions. */
+export declare function NotificationRowBody({ title, name, description, createdAt, now, unread, category, compact, href, linkComponent, onOpen, onMarkRead, onDismiss, actions, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/feedback/notification-row/partials/notification-row-dot.d.ts

@@ -0,0 +1,2 @@
+/** The unread dot, with its screen-reader text. */
+export declare function NotificationRowDot(): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/notification-row/partials/notification-row-open.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { NotificationRowProps } from '../types.js';
+export declare function NotificationRowOpen({ href, onOpen, linkComponent, children, }: Pick<NotificationRowProps, 'href' | 'onOpen' | 'linkComponent'> & {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/notifications/notifications-model.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { LinkComponent } from '../../primitives/link/link-component.js';
+import { NotificationItem, NotificationsChromeState, NotificationsDensity, NotificationsProps } from './types.js';
+export type NotificationsModel = {
+    items: NotificationItem[];
+    visible: NotificationItem[];
+    unread: number;
+    state: NotificationsChromeState;
+    variant: NonNullable<NotificationsProps['variant']>;
+    label?: NotificationsProps['label'];
+    triggerIcon?: ReactNode;
+    emptyIcon?: ReactNode;
+    setOpen: (open: boolean) => void;
+    setFilter: (filter: NotificationsChromeState['filter']) => void;
+    setQuery: (query: string) => void;
+    setCategory: (category: string | null) => void;
+    categories: string[];
+    onRead?: (id: string) => void;
+    onReadAll?: () => void;
+    onDismiss?: (id: string) => void;
+    onItemClick?: (item: NotificationItem) => void;
+    openItem: (item: NotificationItem) => void;
+    density: NotificationsDensity;
+    groupByDay: boolean;
+    /** The reference time, or `null` until mounted when none was given. */
+    now: number | null;
+    loading: boolean;
+    hasMore: boolean;
+    onLoadMore?: () => void;
+    loadingMore: boolean;
+    searchable: boolean;
+    footer?: ReactNode;
+    fullScreenOnMobile: boolean;
+    linkComponent?: LinkComponent;
+    error: NotificationsProps['error'];
+    onRetry?: () => unknown;
+};
+/**
+ * The props the model hands on as they are, with their defaults: what the
+ * list, the trigger and the sheet read but the hook does not compute.
+ */
+export declare function viewProps({ variant, label, triggerIcon, emptyIcon, onReadAll, onDismiss, density, groupByDay, loading, loadingMore, searchable, footer, fullScreenOnMobile, linkComponent, error, onRetry, }: NotificationsProps): {
+    variant: import('./types.js').NotificationsVariant;
+    label: ReactNode;
+    triggerIcon: ReactNode;
+    emptyIcon: ReactNode;
+    onReadAll: (() => void) | undefined;
+    onDismiss: ((id: string) => void) | undefined;
+    density: import('../index.js').NotificationRowDensity;
+    groupByDay: boolean;
+    loading: boolean;
+    loadingMore: boolean;
+    searchable: boolean;
+    footer: ReactNode;
+    fullScreenOnMobile: boolean;
+    linkComponent: LinkComponent | undefined;
+    error: ReactNode;
+    onRetry: (() => unknown) | undefined;
+};

package/dist/lib/components/ui/feedback/notifications/use-notifications-chrome.d.ts

@@ -0,0 +1,17 @@
+import { NotificationsProps } from './types.js';
+/**
+ * The chrome state (open, filter, query, category) of the notifications:
+ * the controlled `filter`, `category` and `open` props win over it.
+ */
+export declare function useNotificationsChrome({ filter, defaultFilter, category, defaultCategory, open, defaultOpen, onOpenChange, }: NotificationsProps): {
+    state: import('./types.js').NotificationsChromeState;
+    actions: {
+        setOpen: (payload: boolean) => void;
+        toggleOpen: (noArgument?: void | undefined) => void;
+        setFilter: (payload: import('./types.js').NotificationFilter) => void;
+        setQuery: (payload: string) => void;
+        setCategory: (payload: string | null) => void;
+    };
+    isOpen: boolean;
+    setOpen: (next: boolean) => void;
+};

package/dist/lib/components/ui/feedback/notifications/use-notifications.d.ts

@@ -1,38 +1,4 @@
-import { ReactNode } from 'react';
-import { LinkComponent } from '../../primitives/link/link-component.js';
-import { NotificationItem, NotificationsChromeState, NotificationsDensity, NotificationsProps } from './types.js';
-export type NotificationsModel = {
-    items: NotificationItem[];
-    visible: NotificationItem[];
-    unread: number;
-    state: NotificationsChromeState;
-    variant: NonNullable<NotificationsProps['variant']>;
-    label?: NotificationsProps['label'];
-    triggerIcon?: ReactNode;
-    emptyIcon?: ReactNode;
-    setOpen: (open: boolean) => void;
-    setFilter: (filter: NotificationsChromeState['filter']) => void;
-    setQuery: (query: string) => void;
-    setCategory: (category: string | null) => void;
-    categories: string[];
-    onRead?: (id: string) => void;
-    onReadAll?: () => void;
-    onDismiss?: (id: string) => void;
-    onItemClick?: (item: NotificationItem) => void;
-    openItem: (item: NotificationItem) => void;
-    density: NotificationsDensity;
-    groupByDay: boolean;
-    /** The reference time, or `null` until mounted when none was given. */
-    now: number | null;
-    loading: boolean;
-    hasMore: boolean;
-    onLoadMore?: () => void;
-    loadingMore: boolean;
-    searchable: boolean;
-    footer?: ReactNode;
-    fullScreenOnMobile: boolean;
-    linkComponent?: LinkComponent;
-    error: NotificationsProps['error'];
-    onRetry?: () => unknown;
-};
-export declare function useNotifications({ items, count, variant, filter, defaultFilter, category, defaultCategory, open, defaultOpen, onOpenChange, onRead, onReadAll, onDismiss, onItemClick, toastOnArrival, label, triggerIcon, emptyIcon, density, groupByDay, now, loading, hasMore, onLoadMore, loadingMore, searchable, footer, fullScreenOnMobile, linkComponent, error, onRetry, }: NotificationsProps): NotificationsModel;
+import { NotificationsModel } from './notifications-model.js';
+import { NotificationsProps } from './types.js';
+export type { NotificationsModel } from './notifications-model.js';
+export declare function useNotifications(props: NotificationsProps): NotificationsModel;

package/dist/lib/components/ui/feedback/spinner/spinner-variants.d.ts

@@ -0,0 +1,5 @@
+/** The spinner's four shapes and eight tones; the look lives in classes. */
+export declare const variants: (props?: ({
+    variant?: "1" | "2" | "3" | "4" | null | undefined;
+    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | "light" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/ui/feedback/spinner/spinner.d.ts

@@ -1,9 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
+import { variants } from './spinner-variants.js';
 export type SpinnerProps = {} & ComponentProps<'div'> & VariantProps<typeof variants>;
-declare const variants: (props?: ({
-    variant?: "1" | "2" | "3" | "4" | null | undefined;
-    color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | "light" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare function Spinner({ variant, color, className, ...props }: SpinnerProps): import("react").JSX.Element;
-export {};

package/dist/lib/components/ui/feedback/state-frame/state-frame-text.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { StateHeadingLevel } from './state-frame.js';
+/** The title and the description of a state, beside or under its media. */
+export declare function StateFrameText({ title, description, headingLevel, inline, compact, }: {
+    title?: ReactNode;
+    description?: ReactNode;
+    headingLevel?: StateHeadingLevel;
+    inline: boolean;
+    compact: boolean;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/feedback/state-frame/use-state-media.d.ts

@@ -0,0 +1,14 @@
+import { StateKind } from '@nxgt/material-core/states';
+import { ReactNode } from 'react';
+import { StateFrameSize, StateIllustrationProp } from './state-frame.js';
+/**
+ * A state's media: the `illustration` (a node, a scene id, `true` for the
+ * kind's scene, `false` for none), else the `icon` in a tinted well, else
+ * the built-in icon (compact) or illustration (default size).
+ */
+export declare function useStateMedia({ kind, size, illustration, icon, }: {
+    kind: StateKind;
+    size: StateFrameSize;
+    illustration?: StateIllustrationProp;
+    icon?: ReactNode;
+}): ReactNode;

package/dist/lib/components/ui/feedback/step-dots/step-dot.d.ts

@@ -0,0 +1,13 @@
+export type StepDotState = 'upcoming' | 'done' | 'correct' | 'incorrect' | 'flagged';
+/**
+ * One step of a `StepDots` row: its mark, named by its number and state as
+ * text for assistive tech; a button that jumps to it with `onSelect`.
+ */
+export declare function StepDot({ index, count, state, current: isCurrent, segments, onSelect, }: {
+    index: number;
+    count: number;
+    state: StepDotState;
+    current: boolean;
+    segments: boolean;
+    onSelect?: (index: number) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/step-dots/step-dots.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
-export type StepDotState = 'upcoming' | 'done' | 'correct' | 'incorrect' | 'flagged';
+import { StepDotState } from './step-dot.js';
+export type { StepDotState } from './step-dot.js';
 export type StepDotsProps = {
     /** How many steps. */
     count: number;

package/dist/lib/components/ui/feedback/step-up-dialog/describe-by.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { StepUpDialogLabels, StepUpDialogProps } from './types.js';
+/** The line under the title; a node `destination` is set into the translated sentence. */
+export declare function describeBy(via: StepUpDialogProps['via'], destination: StepUpDialogProps['destination'], labels: StepUpDialogLabels): ReactNode;

package/dist/lib/components/ui/feedback/step-up-dialog/use-step-up-view.d.ts

@@ -0,0 +1,34 @@
+import { SyntheticEvent } from 'react';
+import { StepUpDialogProps } from './types.js';
+type Input = Pick<StepUpDialogProps, 'open' | 'via' | 'destination' | 'requestError' | 'onRetry' | 'confirmedLabel'> & {
+    confirming: boolean;
+    labelOverrides: StepUpDialogProps['labels'];
+    /** The rest of the dialog's props: the code field's. */
+    code: Omit<StepUpDialogProps, keyof Input | 'labels' | 'onCancel' | 'cancelVariant' | 'title' | 'description' | 'icons'>;
+};
+/**
+ * What a `StepUpDialog` wires between its parts: the labels, the form id,
+ * the focus (title, field, "Retry"), the retry and the line under the title.
+ */
+export declare function useStepUpView({ open, via, destination, requestError, onRetry, confirming, confirmedLabel, labelOverrides, code, }: Input): {
+    labels: import('./types.js').StepUpDialogLabels;
+    verification: import('../../fields/index.js').VerificationCodeLabels;
+    formId: string;
+    fieldShown: boolean;
+    held: boolean;
+    titleRef: import('react').RefObject<HTMLHeadingElement | null>;
+    by: import('react').ReactNode;
+    onOpenAutoFocus: (event: Event | SyntheticEvent) => void;
+    statusText: string | number | bigint | boolean | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined>;
+    retry: {
+        onRetry: (() => void) | undefined;
+        retryLabel: string;
+        retrying: boolean;
+        settled: number;
+        retryRef: import('react').RefObject<HTMLButtonElement | null>;
+        onRetryBlur: (event: {
+            relatedTarget: EventTarget | null;
+        }) => void;
+    };
+};
+export {};

package/dist/lib/components/ui/fields/attributes/attribute-form/attribute-options-form-fields.d.ts

@@ -0,0 +1,7 @@
+import { Control } from 'react-hook-form';
+import { TFormValues } from './types.js';
+/** The options of a (multi) select attribute, typed freely, with its separator. */
+export declare function AttributeOptionsFormFields({ control, options, }: {
+    control: Control<TFormValues>;
+    options?: string[] | null;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/attributes/attributes-list/attribute-tile.d.ts

@@ -0,0 +1,11 @@
+import { Attribute } from '../models/attribute.js';
+type AttributeTileProps = {
+    attribute: Attribute;
+    /** Given, the tile has an edit button. */
+    onEdit?: (attribute: Attribute) => void;
+    disabled?: boolean;
+    editLabel: string;
+};
+/** One attribute of the list: its type's icon, its name and its type. */
+export declare function AttributeTile({ attribute, onEdit, disabled, editLabel, }: AttributeTileProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/attributes/partials/editor-rows.d.ts

@@ -0,0 +1,15 @@
+import { Attribute } from '../models/attribute.js';
+import { AttributeText } from '../use-attribute-text.js';
+import { AttributesEditorState } from '../use-attributes-editor.js';
+type EditorRowsProps = {
+    text: AttributeText;
+    editor: AttributesEditorState;
+    items: Attribute[];
+    hintId: string;
+    phone: boolean;
+    reorderable: boolean;
+    disabled?: boolean;
+};
+/** The editor's rows in their current order, or the note shown when none. */
+export declare function EditorRows({ text, editor, items, hintId, phone, reorderable, disabled, }: EditorRowsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/contacts/partials/contact-groups.d.ts

@@ -0,0 +1,20 @@
+import { HeadingLevel } from '../../inline-editor/editor-header.js';
+import { groupContacts } from '../logic/primary.js';
+import { Contact } from '../models.js';
+import { ContactText } from '../use-contact-text.js';
+import { ContactsEditorState } from '../use-contacts-editor.js';
+type ContactGroupsProps = {
+    text: ContactText;
+    editor: ContactsEditorState;
+    items: Contact[];
+    groups: ReturnType<typeof groupContacts>;
+    positions: ReadonlyMap<number, number>;
+    variant: 'list' | 'cards';
+    headingLevel?: HeadingLevel;
+    /** A phone shows summary rows that open the sheet. */
+    phone: boolean;
+    disabled?: boolean;
+};
+/** The contacts of each type: full rows, or on a phone summary rows. */
+export declare function ContactGroups({ text, editor, items, groups, positions, variant, headingLevel, phone, disabled, }: ContactGroupsProps): import("react").JSX.Element[];
+export {};

package/dist/lib/components/ui/fields/contacts/partials/contact-tile.d.ts

@@ -0,0 +1,13 @@
+import { Contact } from '../models.js';
+type ContactTileProps = {
+    contact: Contact;
+    /** The contact type's translated name. */
+    typeName: string;
+    /** Given, the tile has an edit button. */
+    onEdit?: () => void;
+    disabled?: boolean;
+    editLabel: string;
+};
+/** One contact of the read-only list: its type's icon, its label and its value. */
+export declare function ContactTile({ contact, typeName, onEdit, disabled, editLabel, }: ContactTileProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/contacts/partials/dialog-actions.d.ts

@@ -0,0 +1,14 @@
+import { ButtonVariant } from '../../../actions/button/button.js';
+type DialogActionsProps = {
+    /** An existing contact is edited: Remove shows when `onDelete` is given. */
+    isEdit: boolean;
+    onDelete?: () => void;
+    onCancel: () => void;
+    onSave: () => void;
+    canSave: boolean;
+    disabled?: boolean;
+    cancelVariant: ButtonVariant;
+};
+/** The Remove, Cancel and Save buttons of the contact dialog. */
+export declare function DialogActions({ isEdit, onDelete, onCancel, onSave, canSave, disabled, cancelVariant, }: DialogActionsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/contacts/partials/dialog-fields.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Contact, ContactType } from '../models.js';
+type DialogFieldsProps = {
+    draft: Contact;
+    setDraft: Dispatch<SetStateAction<Contact>>;
+    options: {
+        label: string;
+        value: ContactType;
+    }[];
+    disabled?: boolean;
+};
+/** The type, value and label inputs of the contact dialog. */
+export declare function DialogFields({ draft, setDraft, options, disabled, }: DialogFieldsProps): import("react").JSX.Element;
+export {};