@ngrr/ds 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Attachment/AttachmentCard/AttachmentCard.d.ts +21 -0
- package/dist/components/atoms/Attachment/AttachmentCard/index.d.ts +2 -0
- package/dist/components/atoms/Attachment/AttachmentChip/AttachmentChip.d.ts +27 -0
- package/dist/components/atoms/Attachment/AttachmentChip/index.d.ts +2 -0
- package/dist/components/atoms/Attachment/AttachmentField/AttachmentField.d.ts +20 -0
- package/dist/components/atoms/Attachment/AttachmentField/index.d.ts +2 -0
- package/dist/components/atoms/Attachment/FileRow/FileRow.d.ts +18 -0
- package/dist/components/atoms/Attachment/FileRow/index.d.ts +2 -0
- package/dist/components/atoms/Attachment/FileThumbnail/FileThumbnail.d.ts +14 -0
- package/dist/components/atoms/Attachment/FileThumbnail/index.d.ts +2 -0
- package/dist/components/atoms/Attachment/index.d.ts +10 -0
- package/dist/components/atoms/Avatar/Avatar.d.ts +74 -0
- package/dist/components/atoms/Avatar/index.d.ts +2 -0
- package/dist/components/atoms/Badge/Badge.d.ts +40 -0
- package/dist/components/atoms/Badge/index.d.ts +2 -0
- package/dist/components/atoms/Button/Button.d.ts +158 -0
- package/dist/components/atoms/Button/ToggleButton.d.ts +17 -0
- package/dist/components/atoms/Button/VerticalButton.d.ts +90 -0
- package/dist/components/atoms/Button/index.d.ts +6 -0
- package/dist/components/atoms/ButtonGroup/ButtonGroup.d.ts +17 -0
- package/dist/components/atoms/ButtonGroup/ButtonGroupVertical.d.ts +17 -0
- package/dist/components/atoms/ButtonGroup/SplitButton/SplitButton.d.ts +37 -0
- package/dist/components/atoms/ButtonGroup/SplitButton/index.d.ts +2 -0
- package/dist/components/atoms/ButtonGroup/index.d.ts +6 -0
- package/dist/components/atoms/Checkbox/Checkbox.d.ts +47 -0
- package/dist/components/atoms/Checkbox/index.d.ts +2 -0
- package/dist/components/atoms/Chip/Chip.d.ts +83 -0
- package/dist/components/atoms/Chip/index.d.ts +2 -0
- package/dist/components/atoms/Combobox/Combobox.d.ts +39 -0
- package/dist/components/atoms/Combobox/index.d.ts +2 -0
- package/dist/components/atoms/CustomViewTab/CustomViewTab.d.ts +31 -0
- package/dist/components/atoms/CustomViewTab/index.d.ts +2 -0
- package/dist/components/atoms/DataListCell/DataListCell.d.ts +21 -0
- package/dist/components/atoms/DataListCell/index.d.ts +2 -0
- package/dist/components/atoms/DataTableCell/DataTableCell.d.ts +17 -0
- package/dist/components/atoms/DataTableCell/index.d.ts +2 -0
- package/dist/components/atoms/DataTableHeaderCell/DataTableHeaderCell.d.ts +33 -0
- package/dist/components/atoms/DataTableHeaderCell/index.d.ts +2 -0
- package/dist/components/atoms/DateTimePicker/DateTimePicker.d.ts +48 -0
- package/dist/components/atoms/DateTimePicker/index.d.ts +2 -0
- package/dist/components/atoms/LoadingBar/LoadingBar.d.ts +20 -0
- package/dist/components/atoms/LoadingBar/index.d.ts +2 -0
- package/dist/components/atoms/MenuCell/MenuCell.d.ts +46 -0
- package/dist/components/atoms/MenuCell/index.d.ts +2 -0
- package/dist/components/atoms/NumberInput/NumberInput.d.ts +41 -0
- package/dist/components/atoms/NumberInput/index.d.ts +2 -0
- package/dist/components/atoms/OTPInput/OTPInput.d.ts +42 -0
- package/dist/components/atoms/OTPInput/index.d.ts +2 -0
- package/dist/components/atoms/Pagination/PageSelector.d.ts +13 -0
- package/dist/components/atoms/Pagination/Pagination.d.ts +30 -0
- package/dist/components/atoms/Pagination/index.d.ts +4 -0
- package/dist/components/atoms/PasswordInput/PasswordInput.d.ts +46 -0
- package/dist/components/atoms/PasswordInput/PasswordRequirement.d.ts +9 -0
- package/dist/components/atoms/PasswordInput/index.d.ts +4 -0
- package/dist/components/atoms/PhoneInput/PhoneInput.d.ts +33 -0
- package/dist/components/atoms/PhoneInput/index.d.ts +2 -0
- package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +16 -0
- package/dist/components/atoms/ProgressBar/index.d.ts +2 -0
- package/dist/components/atoms/ProgressRing/ProgressRing.d.ts +29 -0
- package/dist/components/atoms/ProgressRing/index.d.ts +2 -0
- package/dist/components/atoms/Radio/Radio.d.ts +46 -0
- package/dist/components/atoms/Radio/index.d.ts +2 -0
- package/dist/components/atoms/SearchBar/SearchBar.d.ts +28 -0
- package/dist/components/atoms/SearchBar/index.d.ts +2 -0
- package/dist/components/atoms/SectionHeader/SectionHeader.d.ts +12 -0
- package/dist/components/atoms/SectionHeader/index.d.ts +2 -0
- package/dist/components/atoms/SegmentControl/SegmentControl.d.ts +22 -0
- package/dist/components/atoms/SegmentControl/SegmentControlSelector.d.ts +19 -0
- package/dist/components/atoms/SegmentControl/index.d.ts +2 -0
- package/dist/components/atoms/Select/Select.d.ts +31 -0
- package/dist/components/atoms/Select/index.d.ts +2 -0
- package/dist/components/atoms/Separator/Separator.d.ts +20 -0
- package/dist/components/atoms/Separator/index.d.ts +2 -0
- package/dist/components/atoms/Shortcut/Shortcut.d.ts +69 -0
- package/dist/components/atoms/Shortcut/index.d.ts +2 -0
- package/dist/components/atoms/SkeletonLoading/SkeletonLoading.d.ts +7 -0
- package/dist/components/atoms/SkeletonLoading/index.d.ts +2 -0
- package/dist/components/atoms/Stat/Stat.d.ts +16 -0
- package/dist/components/atoms/Stat/index.d.ts +2 -0
- package/dist/components/atoms/Switcher/Switcher.d.ts +46 -0
- package/dist/components/atoms/Switcher/index.d.ts +2 -0
- package/dist/components/atoms/Tab/Tab.d.ts +24 -0
- package/dist/components/atoms/Tab/index.d.ts +2 -0
- package/dist/components/atoms/Tag/Tag.d.ts +50 -0
- package/dist/components/atoms/Tag/index.d.ts +2 -0
- package/dist/components/atoms/TextArea/TextArea.d.ts +27 -0
- package/dist/components/atoms/TextArea/index.d.ts +2 -0
- package/dist/components/atoms/TextInput/TextInput.d.ts +41 -0
- package/dist/components/atoms/TextInput/index.d.ts +2 -0
- package/dist/components/atoms/UploadArea/UploadArea.d.ts +20 -0
- package/dist/components/atoms/UploadArea/index.d.ts +2 -0
- package/dist/components/atoms/_dev/PlaceholderIcon.d.ts +12 -0
- package/dist/components/molecules/Accordion/Accordion.d.ts +17 -0
- package/dist/components/molecules/Accordion/index.d.ts +2 -0
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts +22 -0
- package/dist/components/molecules/Breadcrumbs/BreadcrumbsController.d.ts +23 -0
- package/dist/components/molecules/Breadcrumbs/index.d.ts +4 -0
- package/dist/components/molecules/BulkActionBar/BulkActionBar.d.ts +34 -0
- package/dist/components/molecules/BulkActionBar/index.d.ts +2 -0
- package/dist/components/molecules/Callout/Callout.d.ts +28 -0
- package/dist/components/molecules/Callout/index.d.ts +2 -0
- package/dist/components/molecules/CheckboxField/CheckboxField.d.ts +26 -0
- package/dist/components/molecules/CheckboxField/index.d.ts +2 -0
- package/dist/components/molecules/ChipField/ChipField.d.ts +27 -0
- package/dist/components/molecules/ChipField/index.d.ts +2 -0
- package/dist/components/molecules/ChoiceList/ChoiceList.d.ts +39 -0
- package/dist/components/molecules/ChoiceList/index.d.ts +2 -0
- package/dist/components/molecules/EmptyState/EmptyState.d.ts +52 -0
- package/dist/components/molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/molecules/HorizontalInput/HorizontalInput.d.ts +22 -0
- package/dist/components/molecules/HorizontalInput/index.d.ts +2 -0
- package/dist/components/molecules/MultiChoice/MultiChoice.d.ts +27 -0
- package/dist/components/molecules/MultiChoice/index.d.ts +2 -0
- package/dist/components/molecules/PopoverWrapper/PopoverWrapper.d.ts +23 -0
- package/dist/components/molecules/PopoverWrapper/index.d.ts +2 -0
- package/dist/components/molecules/RichTextEditor/RichTextEditor.d.ts +35 -0
- package/dist/components/molecules/RichTextEditor/index.d.ts +2 -0
- package/dist/components/molecules/SidebarMenuSelector/SidebarMenuSelector.d.ts +25 -0
- package/dist/components/molecules/SidebarMenuSelector/index.d.ts +2 -0
- package/dist/components/molecules/SingleChoice/SingleChoice.d.ts +28 -0
- package/dist/components/molecules/SingleChoice/index.d.ts +2 -0
- package/dist/components/molecules/Slider/Slider.d.ts +33 -0
- package/dist/components/molecules/Slider/index.d.ts +2 -0
- package/dist/components/molecules/Toast/Toast.d.ts +29 -0
- package/dist/components/molecules/Toast/index.d.ts +2 -0
- package/dist/components/molecules/Toolbar/Toolbar.d.ts +13 -0
- package/dist/components/molecules/Toolbar/index.d.ts +2 -0
- package/dist/components/molecules/Tooltip/Tooltip.d.ts +22 -0
- package/dist/components/molecules/Tooltip/index.d.ts +2 -0
- package/dist/components/organisms/AlertDialog/AlertDialog.d.ts +26 -0
- package/dist/components/organisms/AlertDialog/index.d.ts +2 -0
- package/dist/components/organisms/AppShell/AppShell.d.ts +21 -0
- package/dist/components/organisms/AppShell/index.d.ts +2 -0
- package/dist/components/organisms/Card/Card.d.ts +22 -0
- package/dist/components/organisms/Card/index.d.ts +2 -0
- package/dist/components/organisms/Charts/Charts.d.ts +112 -0
- package/dist/components/organisms/Charts/index.d.ts +2 -0
- package/dist/components/organisms/DataTable/DataTable.d.ts +27 -0
- package/dist/components/organisms/DataTable/index.d.ts +2 -0
- package/dist/components/organisms/Drawer/Drawer.d.ts +43 -0
- package/dist/components/organisms/Drawer/index.d.ts +2 -0
- package/dist/components/organisms/Modal/Modal.d.ts +34 -0
- package/dist/components/organisms/Modal/index.d.ts +2 -0
- package/dist/components/organisms/Navbar/Navbar.d.ts +23 -0
- package/dist/components/organisms/Navbar/index.d.ts +2 -0
- package/dist/components/organisms/PopoverMenu/PopoverMenu.d.ts +33 -0
- package/dist/components/organisms/PopoverMenu/index.d.ts +2 -0
- package/dist/components/organisms/Sidebar/Sidebar.d.ts +39 -0
- package/dist/components/organisms/Sidebar/index.d.ts +2 -0
- package/dist/docs/ThemeToggle.d.ts +4 -0
- package/dist/ds-nagarro.es.js +6109 -6007
- package/dist/ds-nagarro.umd.js +84 -74
- package/dist/index.d.ts +153 -0
- package/dist/style.css +1 -1
- package/dist/types/common.d.ts +83 -0
- package/package.json +2 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PlaceholderIcon — DEV / STORYBOOK USE ONLY.
|
|
3
|
+
*
|
|
4
|
+
* A 16 × 16 diamond SVG that mirrors the `aa_iconPlaceholder` frame used in
|
|
5
|
+
* the Figma component library. Use this icon exclusively inside *.stories.tsx
|
|
6
|
+
* files so that stories remain icon-library-agnostic.
|
|
7
|
+
*
|
|
8
|
+
* ⚠️ NOT exported from `src/index.ts`.
|
|
9
|
+
*/
|
|
10
|
+
export declare function PlaceholderIcon({ size }: {
|
|
11
|
+
size?: number;
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type AccordionDisclosure = 'left' | 'right';
|
|
3
|
+
export interface AccordionProps {
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
disclosure?: AccordionDisclosure;
|
|
7
|
+
bordered?: boolean;
|
|
8
|
+
expanded?: boolean;
|
|
9
|
+
defaultExpanded?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
className?: string;
|
|
13
|
+
contentClassName?: string;
|
|
14
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare function Accordion({ title, description, disclosure, bordered, expanded, defaultExpanded, disabled, children, className, contentClassName, onExpandedChange, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default Accordion;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface BreadcrumbItem {
|
|
3
|
+
id?: string;
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
href?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
ariaLabel?: string;
|
|
8
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, item: BreadcrumbItem, index: number) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface BreadcrumbsProps {
|
|
11
|
+
items: BreadcrumbItem[];
|
|
12
|
+
maxVisibleItems?: number;
|
|
13
|
+
showEllipsis?: boolean;
|
|
14
|
+
ellipsisLabel?: string;
|
|
15
|
+
ellipsisAriaLabel?: string;
|
|
16
|
+
separator?: React.ReactNode;
|
|
17
|
+
className?: string;
|
|
18
|
+
'aria-label'?: string;
|
|
19
|
+
onItemClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>, item: BreadcrumbItem, index: number) => void;
|
|
20
|
+
}
|
|
21
|
+
export declare function Breadcrumbs({ items, maxVisibleItems, showEllipsis, ellipsisLabel, ellipsisAriaLabel, separator, className, 'aria-label': ariaLabel, onItemClick, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export default Breadcrumbs;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type BreadcrumbControllerItemVariant = 'previous' | 'current' | 'ellipsis';
|
|
3
|
+
export interface BreadcrumbControllerItem {
|
|
4
|
+
id?: string;
|
|
5
|
+
label?: React.ReactNode;
|
|
6
|
+
variant?: BreadcrumbControllerItemVariant;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
showDisclosure?: boolean;
|
|
9
|
+
ariaLabel?: string;
|
|
10
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>, item: BreadcrumbControllerItem, index: number) => void;
|
|
11
|
+
}
|
|
12
|
+
export interface BreadcrumbsControllerProps {
|
|
13
|
+
items: BreadcrumbControllerItem[];
|
|
14
|
+
maxVisibleItems?: number;
|
|
15
|
+
showEllipsis?: boolean;
|
|
16
|
+
ellipsisLabel?: string;
|
|
17
|
+
ellipsisAriaLabel?: string;
|
|
18
|
+
className?: string;
|
|
19
|
+
'aria-label'?: string;
|
|
20
|
+
onItemClick?: (event: React.MouseEvent<HTMLButtonElement>, item: BreadcrumbControllerItem, index: number) => void;
|
|
21
|
+
}
|
|
22
|
+
export declare function BreadcrumbsController({ items, maxVisibleItems, showEllipsis, ellipsisLabel, ellipsisAriaLabel, className, 'aria-label': ariaLabel, onItemClick, }: BreadcrumbsControllerProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default BreadcrumbsController;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { Breadcrumbs } from './Breadcrumbs';
|
|
2
|
+
export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs';
|
|
3
|
+
export { BreadcrumbsController } from './BreadcrumbsController';
|
|
4
|
+
export type { BreadcrumbsControllerProps, BreadcrumbControllerItem, BreadcrumbControllerItemVariant, } from './BreadcrumbsController';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface BulkAction {
|
|
3
|
+
/** Button label text. Build count-aware labels in the consumer (e.g. "Delete 4"). */
|
|
4
|
+
label: string;
|
|
5
|
+
/** Leading icon — 16×16 Lucide element. */
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
/** Click handler. */
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
/** When true, shows a ChevronDown trailing icon and sets aria-haspopup="menu". */
|
|
10
|
+
hasDropdown?: boolean;
|
|
11
|
+
/** Applies destructive (red) color treatment. */
|
|
12
|
+
destructive?: boolean;
|
|
13
|
+
/** Disables this specific action. */
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/** Required when `icon` is provided and `label` is ambiguous for screen readers. */
|
|
16
|
+
'aria-label'?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface BulkActionBarProps {
|
|
19
|
+
/** Number of currently selected items. */
|
|
20
|
+
selectedCount: number;
|
|
21
|
+
/**
|
|
22
|
+
* Called when the count/selection button is clicked.
|
|
23
|
+
* Use to open a selection summary, filter, or context menu.
|
|
24
|
+
*/
|
|
25
|
+
onCountClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
26
|
+
/** Called when the × dismiss button is clicked — should clear the selection. */
|
|
27
|
+
onDismiss: React.MouseEventHandler<HTMLButtonElement>;
|
|
28
|
+
/** Contextual action buttons rendered in the right section. */
|
|
29
|
+
actions: BulkAction[];
|
|
30
|
+
/** Additional CSS class on the root element. */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
export declare function BulkActionBar({ selectedCount, onCountClick, onDismiss, actions, className, }: BulkActionBarProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export default BulkActionBar;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type CalloutSeverity = 'default' | 'success' | 'warning' | 'error';
|
|
3
|
+
export interface CalloutProps {
|
|
4
|
+
/** Semantic meaning and visual treatment of the callout. */
|
|
5
|
+
severity?: CalloutSeverity;
|
|
6
|
+
/** Short, outcome-first heading. */
|
|
7
|
+
title: string;
|
|
8
|
+
/** Optional supporting text. */
|
|
9
|
+
description?: string;
|
|
10
|
+
/** Optional custom icon to override severity default. */
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
/** Optional area rendered between header and footer for richer context. */
|
|
13
|
+
content?: React.ReactNode;
|
|
14
|
+
/** Optional controls rendered in the bottom-right area. */
|
|
15
|
+
actions?: React.ReactNode;
|
|
16
|
+
/** Optional supporting control/label area rendered bottom-left. */
|
|
17
|
+
supporting?: React.ReactNode;
|
|
18
|
+
/** Whether to show a dismiss control in the header. */
|
|
19
|
+
dismissible?: boolean;
|
|
20
|
+
/** Accessible label for the dismiss control. */
|
|
21
|
+
dismissLabel?: string;
|
|
22
|
+
/** Called when dismiss control is clicked. */
|
|
23
|
+
onDismiss?: () => void;
|
|
24
|
+
/** Additional CSS class names. */
|
|
25
|
+
className?: string;
|
|
26
|
+
}
|
|
27
|
+
export declare function Callout({ severity, title, description, icon, content, actions, supporting, dismissible, dismissLabel, onDismiss, className, }: CalloutProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export default Callout;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CheckboxProps } from '../../atoms/Checkbox';
|
|
3
|
+
/**
|
|
4
|
+
* CheckboxField is the form-field wrapper layer for a single checkbox input.
|
|
5
|
+
* It provides shared input anatomy (field label + helper/error text) and
|
|
6
|
+
* composes the Checkbox atom for the interactive control row.
|
|
7
|
+
*/
|
|
8
|
+
export interface CheckboxFieldProps {
|
|
9
|
+
id?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
checkboxLabel?: string;
|
|
12
|
+
checked?: boolean;
|
|
13
|
+
defaultChecked?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
helperText?: string;
|
|
16
|
+
helperIcon?: React.ReactNode;
|
|
17
|
+
error?: boolean;
|
|
18
|
+
errorMessage?: string;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
className?: string;
|
|
21
|
+
checkboxProps?: Partial<CheckboxProps>;
|
|
22
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
23
|
+
'aria-label'?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare function CheckboxField({ id, label, checkboxLabel, checked, defaultChecked, disabled, helperText, helperIcon, error, errorMessage, required, className, checkboxProps, onCheckedChange, 'aria-label': ariaLabel, }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export default CheckboxField;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ChipProps, ChipSize } from '../../atoms/Chip';
|
|
3
|
+
export interface ChipFieldOption {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
chipProps?: Partial<ChipProps>;
|
|
8
|
+
}
|
|
9
|
+
export interface ChipFieldProps {
|
|
10
|
+
id?: string;
|
|
11
|
+
label?: string;
|
|
12
|
+
options?: ChipFieldOption[];
|
|
13
|
+
value?: string[];
|
|
14
|
+
defaultValue?: string[];
|
|
15
|
+
helperText?: string;
|
|
16
|
+
helperIcon?: React.ReactNode;
|
|
17
|
+
error?: boolean;
|
|
18
|
+
errorMessage?: string;
|
|
19
|
+
required?: boolean;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
size?: ChipSize;
|
|
22
|
+
className?: string;
|
|
23
|
+
onValueChange?: (value: string[]) => void;
|
|
24
|
+
'aria-label'?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function ChipField({ id, label, options, value, defaultValue, helperText, helperIcon, error, errorMessage, required, disabled, size, className, onValueChange, 'aria-label': ariaLabel, }: ChipFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export default ChipField;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { CheckboxProps } from '../../atoms/Checkbox';
|
|
2
|
+
import { MenuCellProps, MenuCellVariant } from '../../atoms/MenuCell';
|
|
3
|
+
import { RadioProps } from '../../atoms/Radio';
|
|
4
|
+
export type ChoiceListItemKind = 'menu-cell' | 'checkbox-cell' | 'radio-cell';
|
|
5
|
+
export interface ChoiceListMenuItem {
|
|
6
|
+
id: string;
|
|
7
|
+
kind: 'menu-cell';
|
|
8
|
+
variant?: MenuCellVariant;
|
|
9
|
+
props?: Partial<MenuCellProps>;
|
|
10
|
+
}
|
|
11
|
+
export interface ChoiceListCheckboxItem {
|
|
12
|
+
id: string;
|
|
13
|
+
kind: 'checkbox-cell';
|
|
14
|
+
props?: Partial<CheckboxProps>;
|
|
15
|
+
}
|
|
16
|
+
export interface ChoiceListRadioItem {
|
|
17
|
+
id: string;
|
|
18
|
+
kind: 'radio-cell';
|
|
19
|
+
props?: Partial<RadioProps>;
|
|
20
|
+
}
|
|
21
|
+
export type ChoiceListItem = ChoiceListMenuItem | ChoiceListCheckboxItem | ChoiceListRadioItem;
|
|
22
|
+
export interface ChoiceListSection {
|
|
23
|
+
id: string;
|
|
24
|
+
title: string;
|
|
25
|
+
items: ChoiceListItem[];
|
|
26
|
+
}
|
|
27
|
+
export interface ChoiceListProps {
|
|
28
|
+
title?: string;
|
|
29
|
+
description?: string;
|
|
30
|
+
sections: ChoiceListSection[];
|
|
31
|
+
showHeader?: boolean;
|
|
32
|
+
showSectionHeaders?: boolean;
|
|
33
|
+
className?: string;
|
|
34
|
+
sectionClassName?: string;
|
|
35
|
+
enableMenuKeyboardNavigation?: boolean;
|
|
36
|
+
onMenuEscape?: () => void;
|
|
37
|
+
}
|
|
38
|
+
export declare function ChoiceList({ title, description, sections, showHeader, showSectionHeaders, className, sectionClassName, enableMenuKeyboardNavigation, onMenuEscape, }: ChoiceListProps): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export default ChoiceList;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type EmptyStateSize = 'default' | 'small';
|
|
3
|
+
export interface EmptyStateProps {
|
|
4
|
+
/** Visual size variant. Figma: Default (large) and Small. */
|
|
5
|
+
size?: EmptyStateSize;
|
|
6
|
+
/** Optional root class name. */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Enables/disables the media block. */
|
|
9
|
+
hasPicture?: boolean;
|
|
10
|
+
/** Optional custom media content for the picture area. */
|
|
11
|
+
picture?: React.ReactNode;
|
|
12
|
+
/** Enables/disables the title text. */
|
|
13
|
+
hasTitle?: boolean;
|
|
14
|
+
/** Main heading copy. */
|
|
15
|
+
title?: string;
|
|
16
|
+
/** Enables/disables the subtitle text. */
|
|
17
|
+
hasSubtitle?: boolean;
|
|
18
|
+
/** Supporting copy under the title. */
|
|
19
|
+
subtitle?: string;
|
|
20
|
+
/** Enables/disables the full actions section. */
|
|
21
|
+
hasActions?: boolean;
|
|
22
|
+
/** Enables/disables the primary CTA. */
|
|
23
|
+
showMainCta?: boolean;
|
|
24
|
+
/** Primary CTA label. */
|
|
25
|
+
mainCtaLabel?: string;
|
|
26
|
+
/** Primary CTA click handler. */
|
|
27
|
+
onMainCtaClick?: () => void;
|
|
28
|
+
/** Enables/disables the secondary action. */
|
|
29
|
+
showSecondaryOption?: boolean;
|
|
30
|
+
/** Secondary action label. */
|
|
31
|
+
secondaryOptionLabel?: string;
|
|
32
|
+
/** Secondary action click handler. */
|
|
33
|
+
onSecondaryOptionClick?: () => void;
|
|
34
|
+
/** Enables/disables the tertiary action. */
|
|
35
|
+
showTertiaryOption?: boolean;
|
|
36
|
+
/** Tertiary action label. */
|
|
37
|
+
tertiaryOptionLabel?: string;
|
|
38
|
+
/** Tertiary action click handler. */
|
|
39
|
+
onTertiaryOptionClick?: () => void;
|
|
40
|
+
/** Enables/disables the link-style action. */
|
|
41
|
+
showLink?: boolean;
|
|
42
|
+
/** Link action label. */
|
|
43
|
+
linkLabel?: string;
|
|
44
|
+
/** Link action click handler. */
|
|
45
|
+
onLinkClick?: () => void;
|
|
46
|
+
/** Enables/disables helper text under actions. */
|
|
47
|
+
showHelpText?: boolean;
|
|
48
|
+
/** Helper copy rendered under actions. */
|
|
49
|
+
helpText?: string;
|
|
50
|
+
}
|
|
51
|
+
export declare function EmptyState({ size, className, hasPicture, picture, hasTitle, title, hasSubtitle, subtitle, hasActions, showMainCta, mainCtaLabel, onMainCtaClick, showSecondaryOption, secondaryOptionLabel, onSecondaryOptionClick, showTertiaryOption, tertiaryOptionLabel, onTertiaryOptionClick, showLink, linkLabel, onLinkClick, showHelpText, helpText, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
export default EmptyState;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface HorizontalInputProps {
|
|
3
|
+
/** Label text shown in the left column. */
|
|
4
|
+
label: string;
|
|
5
|
+
/** Optional help/description text shown under the label. */
|
|
6
|
+
description?: string;
|
|
7
|
+
/** Controls whether description text is rendered. */
|
|
8
|
+
showDescription?: boolean;
|
|
9
|
+
/** Renders the optional leading icon in the label row. */
|
|
10
|
+
showIcon?: boolean;
|
|
11
|
+
/** Optional custom icon for the label row when showIcon=true. */
|
|
12
|
+
iconSlot?: React.ReactNode;
|
|
13
|
+
/** Error styles for label and description. */
|
|
14
|
+
error?: boolean;
|
|
15
|
+
/** Left-column width to align multiple horizontal rows. */
|
|
16
|
+
labelWidth?: string;
|
|
17
|
+
/** Content slot for any existing input control. */
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare function HorizontalInput({ label, description, showDescription, showIcon, iconSlot, error, labelWidth, children, className, }: HorizontalInputProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export default HorizontalInput;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CheckboxProps } from '../../atoms/Checkbox';
|
|
3
|
+
export interface MultiChoiceOption {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
description?: string;
|
|
9
|
+
descriptionRight?: string;
|
|
10
|
+
checkboxProps?: Partial<CheckboxProps>;
|
|
11
|
+
}
|
|
12
|
+
export interface MultiChoiceProps {
|
|
13
|
+
id?: string;
|
|
14
|
+
label?: string;
|
|
15
|
+
options?: MultiChoiceOption[];
|
|
16
|
+
helperText?: string;
|
|
17
|
+
helperIcon?: React.ReactNode;
|
|
18
|
+
error?: boolean;
|
|
19
|
+
errorMessage?: string;
|
|
20
|
+
required?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
onOptionChange?: (optionId: string, checked: boolean) => void;
|
|
24
|
+
'aria-label'?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function MultiChoice({ id, label, options, helperText, helperIcon, error, errorMessage, required, disabled, className, onOptionChange, 'aria-label': ariaLabel, }: MultiChoiceProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export default MultiChoice;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type PopoverWrapperRole = 'menu' | 'dialog' | 'listbox' | 'group';
|
|
3
|
+
export type PopoverWrapperContentPadding = 'none' | 'small';
|
|
4
|
+
export interface PopoverWrapperProps {
|
|
5
|
+
header?: React.ReactNode;
|
|
6
|
+
segment?: React.ReactNode;
|
|
7
|
+
search?: React.ReactNode;
|
|
8
|
+
content: React.ReactNode;
|
|
9
|
+
bottomBar?: React.ReactNode;
|
|
10
|
+
role?: PopoverWrapperRole;
|
|
11
|
+
width?: number | string;
|
|
12
|
+
contentPadding?: PopoverWrapperContentPadding;
|
|
13
|
+
className?: string;
|
|
14
|
+
contentClassName?: string;
|
|
15
|
+
anchorRef?: React.RefObject<HTMLElement | null>;
|
|
16
|
+
offset?: number;
|
|
17
|
+
viewportMargin?: number;
|
|
18
|
+
matchAnchorWidth?: boolean;
|
|
19
|
+
minWidth?: number;
|
|
20
|
+
'aria-label'?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function PopoverWrapper({ header, segment, search, content, bottomBar, role, width, contentPadding, className, contentClassName, anchorRef, offset, viewportMargin, matchAnchorWidth, minWidth, 'aria-label': ariaLabel, }: PopoverWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export default PopoverWrapper;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export interface RichTextEditorAttachment {
|
|
2
|
+
id: string;
|
|
3
|
+
fileName: string;
|
|
4
|
+
fileSize: string;
|
|
5
|
+
}
|
|
6
|
+
export interface RichTextEditorProps {
|
|
7
|
+
id?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
value?: string;
|
|
11
|
+
defaultValue?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
readOnly?: boolean;
|
|
14
|
+
error?: boolean;
|
|
15
|
+
helperText?: string;
|
|
16
|
+
errorMessage?: string;
|
|
17
|
+
maxLength?: number;
|
|
18
|
+
attachments?: RichTextEditorAttachment[];
|
|
19
|
+
footerChecked?: boolean;
|
|
20
|
+
footerLabel?: string;
|
|
21
|
+
showFooter?: boolean;
|
|
22
|
+
cancelLabel?: string;
|
|
23
|
+
confirmLabel?: string;
|
|
24
|
+
onChange?: (html: string) => void;
|
|
25
|
+
onFooterCheckedChange?: (checked: boolean) => void;
|
|
26
|
+
onCancel?: () => void;
|
|
27
|
+
onConfirm?: () => void;
|
|
28
|
+
onAttachmentRemove?: (attachmentId: string) => void;
|
|
29
|
+
onAddAttachment?: () => void;
|
|
30
|
+
className?: string;
|
|
31
|
+
'aria-label'?: string;
|
|
32
|
+
'aria-labelledby'?: string;
|
|
33
|
+
}
|
|
34
|
+
export declare function RichTextEditor({ id, label, placeholder, value, defaultValue, disabled, readOnly, error, helperText, errorMessage, maxLength, attachments, footerChecked, footerLabel, showFooter, cancelLabel, confirmLabel, onChange, onFooterCheckedChange, onCancel, onConfirm, onAttachmentRemove, onAddAttachment, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export default RichTextEditor;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { AvatarProps } from '../../atoms/Avatar';
|
|
3
|
+
import { BadgeVariant } from '../../atoms/Badge';
|
|
4
|
+
export type SidebarMenuSelectorVariant = 'full' | 'icon';
|
|
5
|
+
export interface SidebarMenuSelectorProps {
|
|
6
|
+
variant?: SidebarMenuSelectorVariant;
|
|
7
|
+
label?: string;
|
|
8
|
+
showIcon?: boolean;
|
|
9
|
+
icon?: React.ReactNode;
|
|
10
|
+
showAvatar?: boolean;
|
|
11
|
+
avatarProps?: AvatarProps;
|
|
12
|
+
showBadge?: boolean;
|
|
13
|
+
badgeCount?: number;
|
|
14
|
+
badgeVariant?: BadgeVariant;
|
|
15
|
+
showDisclosure?: boolean;
|
|
16
|
+
showRightButton?: boolean;
|
|
17
|
+
rightButton?: React.ReactNode;
|
|
18
|
+
selected?: boolean;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
21
|
+
className?: string;
|
|
22
|
+
'aria-label'?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare function SidebarMenuSelector({ variant, label, showIcon, icon, showAvatar, avatarProps, showBadge, badgeCount, badgeVariant, showDisclosure, showRightButton, rightButton, selected, disabled, onClick, className, 'aria-label': ariaLabel, }: SidebarMenuSelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export default SidebarMenuSelector;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { RadioProps } from '../../atoms/Radio';
|
|
3
|
+
export interface SingleChoiceOption {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
description?: string;
|
|
8
|
+
descriptionRight?: string;
|
|
9
|
+
radioProps?: Partial<RadioProps>;
|
|
10
|
+
}
|
|
11
|
+
export interface SingleChoiceProps {
|
|
12
|
+
id?: string;
|
|
13
|
+
label?: string;
|
|
14
|
+
options?: SingleChoiceOption[];
|
|
15
|
+
value?: string;
|
|
16
|
+
defaultValue?: string;
|
|
17
|
+
helperText?: string;
|
|
18
|
+
helperIcon?: React.ReactNode;
|
|
19
|
+
error?: boolean;
|
|
20
|
+
errorMessage?: string;
|
|
21
|
+
required?: boolean;
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
className?: string;
|
|
24
|
+
onValueChange?: (value: string) => void;
|
|
25
|
+
'aria-label'?: string;
|
|
26
|
+
}
|
|
27
|
+
export declare function SingleChoice({ id, label, options, value, defaultValue, helperText, helperIcon, error, errorMessage, required, disabled, className, onValueChange, 'aria-label': ariaLabel, }: SingleChoiceProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export default SingleChoice;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export type SliderMode = 'single' | 'range';
|
|
2
|
+
export type SliderRangeValue = [number, number];
|
|
3
|
+
export interface SliderProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
mode?: SliderMode;
|
|
6
|
+
stack?: 'horizontal' | 'vertical';
|
|
7
|
+
showInput?: boolean;
|
|
8
|
+
value?: number;
|
|
9
|
+
defaultValue?: number;
|
|
10
|
+
rangeValue?: SliderRangeValue;
|
|
11
|
+
defaultRangeValue?: SliderRangeValue;
|
|
12
|
+
min?: number;
|
|
13
|
+
max?: number;
|
|
14
|
+
step?: number;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
showValue?: boolean;
|
|
17
|
+
showMinMax?: boolean;
|
|
18
|
+
minLabel?: string;
|
|
19
|
+
maxLabel?: string;
|
|
20
|
+
minInputLabel?: string;
|
|
21
|
+
maxInputLabel?: string;
|
|
22
|
+
className?: string;
|
|
23
|
+
onValueChange?: (value: number) => void;
|
|
24
|
+
onRangeChange?: (value: SliderRangeValue) => void;
|
|
25
|
+
valueFormatter?: (value: number) => string;
|
|
26
|
+
minHandleAriaLabel?: string;
|
|
27
|
+
maxHandleAriaLabel?: string;
|
|
28
|
+
'aria-label'?: string;
|
|
29
|
+
'aria-labelledby'?: string;
|
|
30
|
+
'aria-valuetext'?: string;
|
|
31
|
+
}
|
|
32
|
+
export declare function Slider({ id, mode, stack, showInput, value, defaultValue, rangeValue, defaultRangeValue, min, max, step, disabled, showValue, showMinMax, minLabel, maxLabel, minInputLabel, maxInputLabel, className, onValueChange, onRangeChange, valueFormatter, minHandleAriaLabel, maxHandleAriaLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValueText, }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export default Slider;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ToastSeverity = 'default' | 'success' | 'warning' | 'error';
|
|
3
|
+
export type ToastVariant = 'inline' | 'rich';
|
|
4
|
+
export interface ToastProps {
|
|
5
|
+
/** Visual density and content structure. */
|
|
6
|
+
variant?: ToastVariant;
|
|
7
|
+
/** Semantic meaning of the notification. */
|
|
8
|
+
severity?: ToastSeverity;
|
|
9
|
+
/** Short, outcome-first heading. */
|
|
10
|
+
title: string;
|
|
11
|
+
/** Optional supporting text. */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** Optional CTA label rendered as a secondary small button. */
|
|
14
|
+
actionLabel?: string;
|
|
15
|
+
/** Called when the CTA is clicked. */
|
|
16
|
+
onAction?: () => void;
|
|
17
|
+
/** Whether to show dismiss control. */
|
|
18
|
+
dismissible?: boolean;
|
|
19
|
+
/** Accessible label for the dismiss control. */
|
|
20
|
+
dismissLabel?: string;
|
|
21
|
+
/** Called when the dismiss control is clicked. */
|
|
22
|
+
onDismiss?: () => void;
|
|
23
|
+
/** Optional custom leading icon. */
|
|
24
|
+
icon?: React.ReactNode;
|
|
25
|
+
/** Additional CSS class names. */
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
export declare function Toast({ variant, severity, title, description, actionLabel, onAction, dismissible, dismissLabel, onDismiss, icon, className, }: ToastProps): import("react/jsx-runtime").JSX.Element | null;
|
|
29
|
+
export default Toast;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ToolbarSize = 'lg' | 'md' | 'sm';
|
|
3
|
+
export type ToolbarVariant = 'default' | 'filter-bar';
|
|
4
|
+
export interface ToolbarProps {
|
|
5
|
+
size?: ToolbarSize;
|
|
6
|
+
variant?: ToolbarVariant;
|
|
7
|
+
leftActions?: React.ReactNode;
|
|
8
|
+
rightActions?: React.ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare function Toolbar({ size, variant, leftActions, rightActions, className, 'aria-label': ariaLabel, }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default Toolbar;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type TooltipPlacement = 'top' | 'bottom';
|
|
3
|
+
export interface TooltipProps {
|
|
4
|
+
/** Tooltip text content. Keep it to one short sentence. */
|
|
5
|
+
content: string;
|
|
6
|
+
/** The trigger element. Should be keyboard focusable when interactive. */
|
|
7
|
+
children: React.ReactElement;
|
|
8
|
+
/** Tooltip placement relative to trigger. */
|
|
9
|
+
placement?: TooltipPlacement;
|
|
10
|
+
/** Delay before showing tooltip on hover/focus. */
|
|
11
|
+
delay?: number;
|
|
12
|
+
/** Controlled open state. */
|
|
13
|
+
open?: boolean;
|
|
14
|
+
/** Uncontrolled open state default. */
|
|
15
|
+
defaultOpen?: boolean;
|
|
16
|
+
/** Disable tooltip behavior. */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
className?: string;
|
|
19
|
+
id?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare function Tooltip({ content, children, placement, delay, open, defaultOpen, disabled, className, id, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export default Tooltip;
|