@altinn/altinn-components 0.5.2 → 0.6.1

package/README.md

@@ -19,7 +19,7 @@ Tested with Node.js 20.x <
 
 ## Requirements
 
-React `>=18`in your project. 
+React `>=18`in your project and [@navikt/aksel-icons](https://www.npmjs.com/package/@navikt/aksel-icons) `>= 7.2.1` as a peer dependency.
 
 ## Usage
 Wrap your application in RootProvider to enable shared context across all components. Here’s a basic setup:
@@ -44,9 +44,21 @@ import { Avatar, type AvatarVariant } from '@altinn/components';
 ```
 and import the css file in your application once:
 ```ts
-import '@altinn/altinn-components/lib/css/global.css';
+import '@altinn/altinn-components/lib/css/index.css';
 ```
 for correct `font-family` and minimal collection of resets.
 
+Using `nextjs`?
+
+You probably need to transpile the package. Add the following to your `next.config.js`:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@altinn/components'],
+}
+module.exports = nextConfig
+```
+
 ## Documentation
 The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)

package/dist/components/Attachment/AttachmentLink.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../Icon';
+export interface AttachmentLinkProps {
+    /** Link url */
+    href: string;
+    /** Label (filename) */
+    label: string;
+    /** Icon */
+    icon?: IconName;
+}
+export declare const AttachmentLink: ({ icon, href, label }: AttachmentLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Attachment/AttachmentList.d.ts

@@ -0,0 +1,7 @@
+import { TypographySize } from '../Typography';
+import { AttachmentLinkProps } from './AttachmentLink';
+export interface AttachmentListProps {
+    items: AttachmentLinkProps[];
+    size?: TypographySize;
+}
+export declare const AttachmentList: ({ size, items }: AttachmentListProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,27 @@
+export type AvatarType = 'company' | 'person' | 'custom';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Props for the Avatar component.
+ */
+export interface AvatarProps {
+    /** The name to display in the avatar. */
+    name: string;
+    /** The type of avatar. */
+    type?: AvatarType;
+    /** The size of the avatar. */
+    size?: AvatarSize;
+    /** Additional class names to apply to the avatar. */
+    className?: string;
+    /** URL of the image to display in the avatar. */
+    imageUrl?: string;
+    /** Alt text for the image. */
+    imageUrlAlt?: string;
+    /** Whether to display an outline around the avatar. */
+    outline?: boolean;
+    /** Custom label to display inside the avatar. */
+    customLabel?: string;
+}
+/**
+ * Avatar component to display user or company avatars with various customization options.
+ */
+export declare const Avatar: ({ type, size, name, outline, imageUrl, imageUrlAlt, customLabel, className, }: AvatarProps) => JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,20 @@
+import { AvatarProps, AvatarSize, AvatarType } from '.';
+/**
+ * Props for the AvatarGroup components.
+ */
+export interface AvatarGroupProps {
+    /** Array of avatars to display in the group, each specified by AvatarProps. */
+    items?: AvatarProps[];
+    /** Maximum number of avatars to show in the group. Remaining avatars are summarized in a "+X" label. */
+    maxItemsCount?: number;
+    /** Default avatar type to apply if not specified in individual items. This affects the styling. */
+    defaultType?: AvatarType;
+    /** Size of all avatars in the group (e.g., 'sm', 'md', 'lg'). */
+    size?: AvatarSize;
+    /** Additional CSS class for styling the avatar group container. */
+    className?: string;
+}
+/**
+ * Avatar group component for displaying multiple avatars as a group.
+ */
+export declare const AvatarGroup: ({ items, maxItemsCount, defaultType, size, className, }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/color.d.ts

@@ -0,0 +1,4 @@
+export declare function fromStringToColor(name: string, profile: 'light' | 'dark'): {
+    backgroundColor: string;
+    foregroundColor: string;
+};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+export interface BadgeProps {
+    label?: string | number;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Badge: ({ label, color, size, className, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Bookmarks/BookmarksList.d.ts

@@ -0,0 +1,7 @@
+import { ListSpacing } from '../';
+import { BookmarksListItemProps } from './BookmarksListItem';
+export interface BookmarksListProps {
+    items: BookmarksListItemProps[];
+    spacing: ListSpacing;
+}
+export declare const BookmarksList: ({ items, spacing }: BookmarksListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Bookmarks/BookmarksListItem.d.ts

@@ -0,0 +1,21 @@
+import { ElementType } from 'react';
+import { ListItemSize } from '..';
+import { QueryItemProps } from './QueryLabel';
+export interface BookmarksListItemProps {
+    id: string;
+    /** Element type to render */
+    as?: ElementType;
+    /** ELement link */
+    href?: string;
+    /** Optional onClick */
+    onClick?(): void;
+    /** Size of list item */
+    size?: ListItemSize;
+    /** Optional title */
+    title?: string;
+    /** Optional description */
+    description?: string;
+    /** Query params */
+    params?: QueryItemProps[];
+}
+export declare const BookmarksListItem: ({ size, title, description, params, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Bookmarks/QueryLabel.d.ts

@@ -0,0 +1,11 @@
+export type QueryItemType = 'search' | 'filter';
+export interface QueryItemProps {
+    type?: QueryItemType;
+    value?: string;
+    label?: string;
+}
+export declare const QueryItem: ({ type, label }: QueryItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface QueryLabelProps {
+    params?: QueryItemProps[];
+}
+export declare const QueryLabel: ({ params }: QueryLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Bookmarks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BookmarksList';
+export * from './BookmarksListItem';
+export * from './QueryLabel';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import { IconName } from '../Icon';
+import { ButtonBaseProps } from './ButtonBase';
+export interface ButtonProps extends Partial<ButtonBaseProps> {
+    icon?: IconName;
+    reverse?: boolean;
+    loading?: boolean;
+}
+export declare const Button: ({ variant, color, size, reverse, selected, icon, href, children, className, loading, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonBase.d.ts

@@ -0,0 +1,20 @@
+import { ElementType, ReactNode } from 'react';
+export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'custom';
+export type ButtonColor = 'primary' | 'secondary';
+export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    as?: ElementType;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    selected?: boolean;
+    disabled?: boolean;
+    href?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ButtonBase: ({ as, color, className, children, disabled, size, selected, variant, tabIndex, ...rest }: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import { IconName } from '../Icon';
+import { ButtonSize } from './ButtonBase';
+export interface ButtonIconProps {
+    icon: IconName;
+    size: ButtonSize;
+}
+export declare const ButtonIcon: ({ size, icon }: ButtonIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonLabel.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ButtonSize } from './ButtonBase';
+export interface ButtonLabelProps {
+    size: ButtonSize;
+    className?: string;
+    children: ReactNode;
+}
+export declare const ButtonLabel: ({ className, size, children }: ButtonLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ComboButton.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler } from 'react';
+import { IconName } from '../Icon';
+import { ButtonBaseProps } from './ButtonBase';
+export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
+    icon: IconName;
+    onIconClick?: MouseEventHandler<HTMLButtonElement>;
+    onLabelClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+}
+export declare const ComboButton: ({ variant, color, size, selected, icon, children, className, onLabelClick, onIconClick, }: ComboButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/IconButton.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+import { IconName } from '../Icon';
+import { ButtonColor, ButtonSize, ButtonVariant } from './ButtonBase';
+interface IconButtonProps {
+    icon: IconName;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    iconSize?: ButtonSize;
+    variant?: ButtonVariant;
+    className?: string;
+    onClick?: MouseEventHandler;
+}
+export declare const IconButton: ({ variant, color, size, icon, iconSize, className, onClick, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { DropdownPlacement, MenuItemProps, MenuItemGroups } from '../';
+export interface ContextMenuProps {
+    id: string;
+    items: MenuItemProps[];
+    placement?: DropdownPlacement;
+    groups?: MenuItemGroups;
+}
+export declare const ContextMenu: ({ id, placement, groups, items }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu/ContextMenuBase.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { DropdownPlacement } from '../';
+export interface ContextMenuBaseProps {
+    placement: DropdownPlacement;
+    expanded: boolean;
+    onToggle?: () => void;
+    children?: ReactNode;
+}
+export declare const ContextMenuBase: ({ placement, expanded, onToggle, children, }: ContextMenuBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Datepicker/index.d.ts

@@ -0,0 +1 @@
+export * from './Datepicker';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,54 @@
+import { DialogActivityLogProps } from './DialogActivityLog';
+import { DialogAttachmentsProps } from './DialogAttachments';
+import { DialogSeenByProps } from './DialogSeenBy';
+import { ContextMenuProps } from '../ContextMenu/';
+import { ReactNode } from 'react';
+import { DialogActionButtonProps } from './DialogActions.tsx';
+import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
+import { DialogHistoryProps } from './DialogHistory';
+import { DialogBackButtonProps } from './DialogNav';
+import { DialogStatusProps } from './DialogStatus';
+export interface DialogProps {
+    /** Dialog id */
+    id: string;
+    /** Title */
+    title: string;
+    /** Back button */
+    backButton?: DialogBackButtonProps;
+    /** Context menu */
+    menu?: ContextMenuProps;
+    /** Dialog status */
+    status?: DialogStatusProps;
+    /** Updated date time */
+    updatedAt?: string;
+    /** Updated label */
+    updatedAtLabel?: string;
+    /** Due date */
+    dueAt?: string;
+    /** Due at label */
+    dueAtLabel?: string;
+    /** Sender */
+    sender?: DialogSenderProps;
+    /** Recipient  */
+    recipient?: DialogRecipientProps;
+    /** Summary */
+    summary?: string;
+    /** Body (should be an output markdown/html rendered to React / HTML) */
+    body?: ReactNode;
+    /** List of action (buttons) */
+    actions?: DialogActionButtonProps[];
+    /** Dialog attachments */
+    attachments?: DialogAttachmentsProps;
+    /** Dialog is seen by the end user or others */
+    seenBy?: DialogSeenByProps;
+    /** Activity Log */
+    activityLog?: DialogActivityLogProps;
+    /** More information about the dialog, process, etc. */
+    additionalInfo?: string;
+    /** History */
+    history?: DialogHistoryProps;
+}
+/**
+ * Full representation of a dialog, including attachments, actions and history,
+ */
+export declare const Dialog: ({ backButton, menu, updatedAt, updatedAtLabel, dueAt, dueAtLabel, status, title, sender, recipient, summary, body, actions, attachments, history, seenBy, activityLog, additionalInfo, }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogActions.d.ts

@@ -0,0 +1,16 @@
+import { MouseEventHandler } from 'react';
+export type DialogButtonPriority = 'primary' | 'secondary' | 'tertiary';
+export interface DialogActionButtonProps {
+    id: string;
+    priority: DialogButtonPriority;
+    label?: string;
+    onClick?: MouseEventHandler;
+    loading?: boolean;
+}
+export interface DialogActionsProps {
+    /** List of actions */
+    items: DialogActionButtonProps[];
+    /** How many actions to display before turning into a ComboButton */
+    maxItems?: number;
+}
+export declare const DialogActions: ({ items, maxItems }: DialogActionsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogActivityLog.d.ts

@@ -0,0 +1,10 @@
+import { ElementType, MouseEventHandler } from 'react';
+import { MetaItemSize } from '../Meta';
+export interface DialogActivityLogProps {
+    size?: MetaItemSize;
+    label?: string;
+    as?: ElementType;
+    onClick?: MouseEventHandler;
+    href?: string;
+}
+export declare const DialogActivityLog: ({ size, label, ...rest }: DialogActivityLogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogArticleBase.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface ArticleBaseProps {
+    children?: ReactNode;
+}
+export declare const DialogArticleBase: ({ children }: ArticleBaseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/DialogAttachments.d.ts

@@ -0,0 +1,6 @@
+import { AttachmentLinkProps } from '../Attachment';
+export interface DialogAttachmentsProps {
+    title?: string;
+    items?: AttachmentLinkProps[];
+}
+export declare const DialogAttachments: ({ title, items }: DialogAttachmentsProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogBase.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface DialogBaseProps {
+    children?: ReactNode;
+}
+export declare const DialogBase: ({ children }: DialogBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogBodyBase.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface DialogBodyProps {
+    children?: ReactNode;
+}
+export declare const DialogBodyBase: ({ children }: DialogBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogBorder.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { DialogListItemSize } from './DialogListItemBase';
+export interface DialogBorderProps {
+    seen?: boolean;
+    size?: DialogListItemSize;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const DialogBorder: ({ seen, size, className, children }: DialogBorderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface DialogContentProps {
+    updatedAt?: string;
+    updatedAtLabel?: string;
+    summary?: string;
+    body?: ReactNode;
+}
+/** Main textual content of a dialog, including summary, body and a timestamp */
+export declare const DialogContent: ({ updatedAt, updatedAtLabel, summary, body }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogFooter.d.ts

@@ -0,0 +1,4 @@
+export interface DialogFooterProps {
+    additionalInfo?: string;
+}
+export declare const DialogFooter: ({ additionalInfo }: DialogFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogGroup.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface DialogGroupProps {
+    title?: string;
+    children?: ReactNode;
+}
+export declare const DialogGroup: ({ title, children }: DialogGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeader.d.ts

@@ -0,0 +1,10 @@
+import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
+import { DialogListItemVariant } from './DialogListItemBase.tsx';
+export interface DialogHeaderProps {
+    title: string;
+    seen: boolean;
+    variant: DialogListItemVariant;
+    sender?: DialogSenderProps;
+    recipient?: DialogRecipientProps;
+}
+export declare const DialogHeader: ({ title, sender, recipient, seen, variant }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeaderBase.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface DialogHeaderBaseProps {
+    children?: ReactNode;
+}
+export declare const DialogHeaderBase: ({ children }: DialogHeaderBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogHeadings.d.ts

@@ -0,0 +1,24 @@
+export type DialogSenderType = 'company' | 'person';
+export type DialogRecipientType = 'company' | 'person';
+export interface DialogSenderProps {
+    type?: DialogSenderType;
+    name: string;
+    imageUrl?: string;
+}
+export interface DialogRecipientProps {
+    type?: DialogRecipientType;
+    name: string;
+}
+type DialogHeadingsSize = 'sm' | 'xs' | 'sm' | 'lg' | 'xl';
+export interface DialogHeadingsProps {
+    size: DialogHeadingsSize;
+    /** Group sender and recipient avatars */
+    grouped?: boolean;
+    /** Sender */
+    sender?: DialogSenderProps;
+    /** Recipient */
+    recipient?: DialogRecipientProps;
+}
+/** Dialog headings for sender and recipient. Should present an avatar for the sender. */
+export declare const DialogHeadings: ({ grouped, size, sender, recipient, }: DialogHeadingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dialog/DialogHistory.d.ts

@@ -0,0 +1,6 @@
+import { HistoryItemProps } from '../History/';
+export interface DialogHistoryProps {
+    title?: string;
+    items?: HistoryItemProps[];
+}
+export declare const DialogHistory: ({ title, items }: DialogHistoryProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogList.d.ts

@@ -0,0 +1,7 @@
+import { DialogGroupProps } from './DialogGroup';
+import { DialogListItemProps } from './DialogListItem';
+export interface DialogListProps {
+    items: DialogListItemProps[];
+    groups?: Record<string, DialogGroupProps>;
+}
+export declare const DialogList: ({ items, groups }: DialogListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.d.ts

@@ -0,0 +1,59 @@
+import { ElementType } from 'react';
+import { DialogRecipientProps, DialogSenderProps } from './DialogHeadings';
+import { DialogSelectProps } from './DialogSelect';
+import { DialogStatusProps } from './DialogStatus';
+import { DialogTouchedByActor } from './DialogTouchedBy';
+import { DialogListItemSize, DialogListItemVariant } from './DialogListItemBase';
+import { DialogSeenByProps } from './DialogSeenBy';
+export type DialogListItemProps = {
+    /** Dialog title */
+    title: string;
+    /** Render as */
+    as?: ElementType;
+    /** Size */
+    size?: DialogListItemSize;
+    /** Variant */
+    variant?: DialogListItemVariant;
+    /** Link */
+    href?: string;
+    /** Select: Use to support batch operations */
+    select?: DialogSelectProps;
+    /** Dialog is selected */
+    selected?: boolean;
+    /** Dialog status */
+    status?: DialogStatusProps;
+    /** Dialog sender */
+    sender?: DialogSenderProps;
+    /** Dialog Recipient  */
+    recipient?: DialogRecipientProps;
+    /** Group view, show avatar for recipient */
+    grouped?: boolean;
+    /** Dialog summary */
+    summary?: string;
+    /** Updated datetime */
+    updatedAt?: string;
+    /** Updated at label */
+    updatedAtLabel?: string;
+    /** Dialog due date */
+    dueAt?: string;
+    /** Dialog due date label */
+    dueAtLabel?: string;
+    /** Dialog has been seen */
+    seen?: boolean;
+    /** Dialog is seen by the user */
+    seenBy?: DialogSeenByProps;
+    /** List of users that have touched the dialog */
+    touchedBy?: DialogTouchedByActor[];
+    /** Number of attachments */
+    attachmentsCount?: number;
+    /** OnClick handler */
+    onClick?: () => void;
+    /** Group id */
+    groupId?: string;
+};
+/**
+ * Represents a dialog in list view, displaying information such as the title,
+ * summary, sender, and receiver.
+ * to mark the item as checked/unchecked and can visually indicate if it is unread.
+ */
+export declare const DialogListItem: ({ as, size, variant, href, onClick, select, selected, status, sender, recipient, grouped, updatedAt, updatedAtLabel, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItemBase.d.ts

@@ -0,0 +1,28 @@
+import { ElementType, ReactNode } from 'react';
+import { DialogSelectProps } from './DialogSelect';
+export type DialogListItemVariant = 'neutral' | 'draft' | 'bin' | 'archive';
+export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogListItemBaseProps = {
+    /** Render as */
+    as?: ElementType;
+    /** Size */
+    size?: DialogListItemSize;
+    /** Link */
+    href?: string;
+    /** Select? Use to support batch operations */
+    select?: DialogSelectProps;
+    /** Dialog is selected */
+    selected?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Variant */
+    variant?: DialogListItemVariant;
+    /** OnClick handler */
+    onClick?: () => void;
+};
+/**
+ * Represents a dialog in list view, displaying information such as the title,
+ * summary, sender, and receiver.
+ * to mark the item as checked/unchecked and can visually indicate if it is unread.
+ */
+export declare const DialogListItemBase: ({ as, size, href, select, selected, children, onClick, }: DialogListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogMetadata.d.ts

@@ -0,0 +1,22 @@
+import { DialogSeenByProps } from './DialogSeenBy';
+import { DialogStatusProps } from './DialogStatus';
+export type DialogMetadataProps = {
+    /** Dialog status */
+    status?: DialogStatusProps;
+    /** Updated datetime */
+    updatedAt?: string;
+    /** Updated label */
+    updatedAtLabel?: string;
+    /** Due date */
+    dueAt?: string;
+    /** Due date label */
+    dueAtLabel?: string;
+    /** Who have seen the dialog after latest update */
+    seenBy?: DialogSeenByProps;
+    /** Number of attachments */
+    attachmentsCount?: number;
+};
+/**
+ * Metadata for a dialog in list view.
+ */
+export declare const DialogMetadata: ({ status, updatedAt, updatedAtLabel, dueAt, dueAtLabel, seenBy, attachmentsCount, }: DialogMetadataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogNav.d.ts

@@ -0,0 +1,21 @@
+import { ElementType } from 'react';
+import { ContextMenuProps } from '../ContextMenu';
+import { DialogStatusProps } from './DialogStatus';
+import { DialogTouchedByActor } from './DialogTouchedBy';
+export interface DialogBackButtonProps {
+    as?: ElementType;
+    href?: string;
+    label?: string;
+}
+export interface DialogNavProps {
+    status?: DialogStatusProps;
+    dueAt?: string;
+    dueAtLabel?: string;
+    touchedBy?: DialogTouchedByActor[];
+    backButton?: DialogBackButtonProps;
+    menu?: ContextMenuProps;
+}
+/**
+ * Dialog navigation bar with Back button and possibly a context menu.
+ */
+export declare const DialogNav: ({ backButton, status, dueAt, dueAtLabel, touchedBy, menu, }: DialogNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogSectionBase.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface DialogSectionBaseProps {
+    title?: string;
+    children?: ReactNode;
+}
+export declare const DialogSectionBase: ({ title, children }: DialogSectionBaseProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/DialogSeenBy.d.ts

@@ -0,0 +1,19 @@
+import { ElementType, MouseEventHandler } from 'react';
+import { MetaItemSize } from '../Meta';
+export interface DialogSeenByProps {
+    size?: MetaItemSize;
+    /** Dialog has been seen by current end user */
+    seenByEndUser?: boolean;
+    /** Dialog has been seen by other people */
+    seenByOthersCount?: number;
+    /** A label explaining that the dialog have been seen and by whom. */
+    label: string;
+    /** Render element as a link or button to display more informastion */
+    as?: ElementType;
+    onClick?: MouseEventHandler;
+    href?: string;
+}
+/**
+ * Dialog seen by. Used to indicate if the dialog has been seen by end user or other users.
+ */
+export declare const DialogSeenBy: ({ size, label, seenByEndUser, seenByOthersCount, ...rest }: DialogSeenByProps) => import("react/jsx-runtime").JSX.Element;