@webority/ui-react 0.88.1 → 0.89.0
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/canvas-kit/kit.css +0 -0
- package/dist/canvas-kit/kit.js +155261 -0
- package/dist/canvas-kit/manifest.json +26177 -0
- package/dist/canvas-kit/release.json +25 -0
- package/dist/components/AppAutocomplete.js +1 -1
- package/dist/components/AppAvatarPicker.js +1 -1
- package/dist/components/AppChipGroup.js +1 -1
- package/dist/components/AppColorField.js +1 -1
- package/dist/components/AppCommandPalette.js +1 -1
- package/dist/components/AppCountrySelect.js +1 -1
- package/dist/components/AppDatePicker.js +1 -1
- package/dist/components/AppDateRangePicker.js +1 -1
- package/dist/components/AppDropZone.js +1 -1
- package/dist/components/AppFileAttachment.js +1 -1
- package/dist/components/AppFilePicker.js +1 -1
- package/dist/components/AppIcon.js +1 -1
- package/dist/components/AppInput.js +1 -1
- package/dist/components/AppLogoPicker.js +1 -1
- package/dist/components/AppMentionInput.js +1 -1
- package/dist/components/AppMeter.js +1 -1
- package/dist/components/AppModal.js +1 -1
- package/dist/components/AppMultiSelect.js +1 -1
- package/dist/components/AppNumberInput.js +1 -1
- package/dist/components/AppOtpInput.js +1 -1
- package/dist/components/AppPhoneNumberInput.js +1 -1
- package/dist/components/AppProgress.js +1 -1
- package/dist/components/AppRadioGroup.js +1 -1
- package/dist/components/AppRating.js +1 -1
- package/dist/components/AppRichText.js +1 -1
- package/dist/components/AppSearch.js +1 -1
- package/dist/components/AppSegmented.js +1 -1
- package/dist/components/AppSelect.js +1 -1
- package/dist/components/AppSidebarMenu.js +1 -1
- package/dist/components/AppSlider.js +1 -1
- package/dist/components/AppSplitView.js +1 -1
- package/dist/components/AppTabs.js +1 -1
- package/dist/components/AppTagInput.js +1 -1
- package/dist/components/AppTextarea.js +1 -1
- package/dist/components/AppTimePicker.js +1 -1
- package/dist/guidance.json +9623 -0
- package/dist/lib/wuiMarker.js +1 -1
- package/dist/types/components/AppAccordion.d.ts +14 -4
- package/dist/types/components/AppActionIcon.d.ts +40 -15
- package/dist/types/components/AppAlert.d.ts +50 -17
- package/dist/types/components/AppAsyncBlock.d.ts +19 -9
- package/dist/types/components/AppAutocomplete.d.ts +36 -0
- package/dist/types/components/AppAvatar.d.ts +48 -12
- package/dist/types/components/AppAvatarGroup.d.ts +14 -4
- package/dist/types/components/AppAvatarPicker.d.ts +50 -19
- package/dist/types/components/AppBadge.d.ts +14 -3
- package/dist/types/components/AppBanner.d.ts +13 -3
- package/dist/types/components/AppBreadcrumbs.d.ts +3 -3
- package/dist/types/components/AppButton.d.ts +72 -20
- package/dist/types/components/AppButtonGroup.d.ts +18 -4
- package/dist/types/components/AppCalendar.d.ts +13 -0
- package/dist/types/components/AppCard.d.ts +60 -21
- package/dist/types/components/AppCarousel.d.ts +56 -14
- package/dist/types/components/AppChart.d.ts +38 -0
- package/dist/types/components/AppChartCard.d.ts +13 -5
- package/dist/types/components/AppCheckbox.d.ts +9 -0
- package/dist/types/components/AppChip.d.ts +29 -10
- package/dist/types/components/AppChipGroup.d.ts +16 -3
- package/dist/types/components/AppChoiceCard.d.ts +55 -14
- package/dist/types/components/AppChoiceChip.d.ts +26 -6
- package/dist/types/components/AppCodeBlock.d.ts +27 -7
- package/dist/types/components/AppColorField.d.ts +36 -8
- package/dist/types/components/AppColumnMenu.d.ts +17 -4
- package/dist/types/components/AppCommandPalette.d.ts +72 -29
- package/dist/types/components/AppCommentThread.d.ts +25 -7
- package/dist/types/components/AppCompareTable.d.ts +9 -4
- package/dist/types/components/AppConfirmDialog.d.ts +54 -15
- package/dist/types/components/AppConsentBanner.d.ts +45 -12
- package/dist/types/components/AppContextMenu.d.ts +23 -10
- package/dist/types/components/AppCopyButton.d.ts +39 -9
- package/dist/types/components/AppCountrySelect.d.ts +50 -1
- package/dist/types/components/AppDashboardCell.d.ts +10 -2
- package/dist/types/components/AppDashboardGrid.d.ts +5 -1
- package/dist/types/components/AppDataTable.d.ts +103 -50
- package/dist/types/components/AppDatePicker.d.ts +32 -0
- package/dist/types/components/AppDateRangePicker.d.ts +31 -0
- package/dist/types/components/AppDescriptions.d.ts +28 -8
- package/dist/types/components/AppDrawer.d.ts +54 -13
- package/dist/types/components/AppDropZone.d.ts +34 -11
- package/dist/types/components/AppDropdown.d.ts +27 -20
- package/dist/types/components/AppDueDate.d.ts +16 -5
- package/dist/types/components/AppEmptyState.d.ts +22 -6
- package/dist/types/components/AppErrorSummary.d.ts +17 -4
- package/dist/types/components/AppFileAttachment.d.ts +30 -14
- package/dist/types/components/AppFilePicker.d.ts +39 -13
- package/dist/types/components/AppFileViewer.d.ts +21 -0
- package/dist/types/components/AppFilterBar.d.ts +23 -8
- package/dist/types/components/AppFloatingDock.d.ts +20 -6
- package/dist/types/components/AppFormActions.d.ts +11 -2
- package/dist/types/components/AppFormRow.d.ts +11 -2
- package/dist/types/components/AppFormSection.d.ts +25 -9
- package/dist/types/components/AppHoverCard.d.ts +25 -8
- package/dist/types/components/AppIcon.d.ts +18 -8
- package/dist/types/components/AppInfoList.d.ts +2 -0
- package/dist/types/components/AppInfoTip.d.ts +17 -4
- package/dist/types/components/AppInlineEdit.d.ts +22 -11
- package/dist/types/components/AppInput.d.ts +81 -2
- package/dist/types/components/AppInputGroup.d.ts +19 -6
- package/dist/types/components/AppKanban.d.ts +51 -23
- package/dist/types/components/AppKbd.d.ts +1 -0
- package/dist/types/components/AppKpiTile.d.ts +61 -31
- package/dist/types/components/AppLightbox.d.ts +12 -6
- package/dist/types/components/AppLink.d.ts +38 -17
- package/dist/types/components/AppLogoPicker.d.ts +88 -23
- package/dist/types/components/AppMarkdown.d.ts +3 -1
- package/dist/types/components/AppMentionInput.d.ts +35 -0
- package/dist/types/components/AppMenubar.d.ts +9 -7
- package/dist/types/components/AppMeter.d.ts +39 -10
- package/dist/types/components/AppMetricStrip.d.ts +11 -2
- package/dist/types/components/AppModal.d.ts +48 -19
- package/dist/types/components/AppMultiSelect.d.ts +44 -0
- package/dist/types/components/AppNavigationMenu.d.ts +6 -3
- package/dist/types/components/AppNotificationCenter.d.ts +23 -8
- package/dist/types/components/AppNumberInput.d.ts +38 -1
- package/dist/types/components/AppOnboardingChecklist.d.ts +27 -8
- package/dist/types/components/AppOtpInput.d.ts +24 -0
- package/dist/types/components/AppPageHeader.d.ts +60 -19
- package/dist/types/components/AppPagination.d.ts +21 -7
- package/dist/types/components/AppPhoneNumberInput.d.ts +37 -0
- package/dist/types/components/AppPopover.d.ts +23 -16
- package/dist/types/components/AppPricingCard.d.ts +27 -8
- package/dist/types/components/AppProgress.d.ts +44 -10
- package/dist/types/components/AppQrCode.d.ts +13 -5
- package/dist/types/components/AppRadio.d.ts +10 -0
- package/dist/types/components/AppRadioGroup.d.ts +47 -17
- package/dist/types/components/AppRating.d.ts +52 -15
- package/dist/types/components/AppRecordPager.d.ts +24 -8
- package/dist/types/components/AppRelativeTime.d.ts +9 -5
- package/dist/types/components/AppRepeater.d.ts +34 -8
- package/dist/types/components/AppResizable.d.ts +11 -3
- package/dist/types/components/AppResizableHandle.d.ts +9 -1
- package/dist/types/components/AppResizablePanel.d.ts +10 -3
- package/dist/types/components/AppResourceCard.d.ts +14 -2
- package/dist/types/components/AppResult.d.ts +23 -7
- package/dist/types/components/AppRichText.d.ts +34 -0
- package/dist/types/components/AppRollingNumber.d.ts +17 -7
- package/dist/types/components/AppRouteError.d.ts +22 -5
- package/dist/types/components/AppScoreScale.d.ts +40 -12
- package/dist/types/components/AppScrollbar.d.ts +7 -3
- package/dist/types/components/AppSearch.d.ts +32 -7
- package/dist/types/components/AppSectionCallToAction.d.ts +27 -7
- package/dist/types/components/AppSectionFaq.d.ts +27 -7
- package/dist/types/components/AppSectionFeatures.d.ts +34 -8
- package/dist/types/components/AppSectionHero.d.ts +29 -8
- package/dist/types/components/AppSectionLogos.d.ts +29 -7
- package/dist/types/components/AppSectionPricing.d.ts +25 -6
- package/dist/types/components/AppSectionTestimonials.d.ts +29 -7
- package/dist/types/components/AppSegmented.d.ts +41 -13
- package/dist/types/components/AppSelect.d.ts +53 -1
- package/dist/types/components/AppSelectMini.d.ts +28 -11
- package/dist/types/components/AppShell.d.ts +81 -35
- package/dist/types/components/AppShortcutLegend.d.ts +12 -4
- package/dist/types/components/AppShowMore.d.ts +26 -5
- package/dist/types/components/AppSidebarMenu.d.ts +59 -18
- package/dist/types/components/AppSkeleton.d.ts +33 -4
- package/dist/types/components/AppSlider.d.ts +43 -0
- package/dist/types/components/AppSortableList.d.ts +20 -0
- package/dist/types/components/AppSparkline.d.ts +19 -5
- package/dist/types/components/AppSpinner.d.ts +14 -3
- package/dist/types/components/AppSplash.d.ts +24 -7
- package/dist/types/components/AppSplitButton.d.ts +47 -14
- package/dist/types/components/AppSplitView.d.ts +53 -27
- package/dist/types/components/AppStatusBadge.d.ts +11 -3
- package/dist/types/components/AppStepper.d.ts +36 -11
- package/dist/types/components/AppSwitch.d.ts +16 -0
- package/dist/types/components/AppTableEmptyState.d.ts +7 -3
- package/dist/types/components/AppTablePagination.d.ts +23 -9
- package/dist/types/components/AppTableToolbar.d.ts +24 -10
- package/dist/types/components/AppTabs.d.ts +47 -18
- package/dist/types/components/AppTagInput.d.ts +38 -0
- package/dist/types/components/AppTextarea.d.ts +46 -0
- package/dist/types/components/AppThemeToggle.d.ts +58 -12
- package/dist/types/components/AppTimePicker.d.ts +38 -1
- package/dist/types/components/AppTimeline.d.ts +22 -20
- package/dist/types/components/AppToast.d.ts +30 -12
- package/dist/types/components/AppToolbar.d.ts +24 -9
- package/dist/types/components/AppTooltip.d.ts +24 -14
- package/dist/types/components/AppTour.d.ts +10 -0
- package/dist/types/components/AppTreeView.d.ts +23 -0
- package/dist/types/components/AppTruncate.d.ts +11 -2
- package/dist/types/components/AppUpdateBar.d.ts +10 -2
- package/dist/types/components/AppWhatsNew.d.ts +26 -7
- package/dist/types/components/AppWizard.d.ts +79 -0
- package/dist/types/components/AppWorkspaceSwitcher.d.ts +36 -17
- package/dist/types/lib/wuiMarker.d.ts +4 -0
- package/package.json +10 -7
|
@@ -7,34 +7,62 @@
|
|
|
7
7
|
* Controlled: the parent holds `value`, and `null` means no choice yet. The chosen value is reported through `onChange`.
|
|
8
8
|
*
|
|
9
9
|
* @param {object} props
|
|
10
|
-
* @param {number|null} [props.value
|
|
10
|
+
* @param {number|null} [props.value]
|
|
11
11
|
* @param {(value: number) => void} [props.onChange] Called with the value the person chose.
|
|
12
|
-
* @param {number} [props.min
|
|
13
|
-
* @param {number} [props.max
|
|
14
|
-
* @param {import('react').ReactNode} [props.label]
|
|
15
|
-
* @param {string} [props.lowLabel]
|
|
16
|
-
* @param {string} [props.highLabel]
|
|
17
|
-
* @param {string} [props.name]
|
|
18
|
-
* @param {boolean} [props.disabled
|
|
19
|
-
* @param {string} [props.error]
|
|
20
|
-
* @param {string} [props.hint]
|
|
12
|
+
* @param {number} [props.min]
|
|
13
|
+
* @param {number} [props.max]
|
|
14
|
+
* @param {import('react').ReactNode} [props.label]
|
|
15
|
+
* @param {string} [props.lowLabel]
|
|
16
|
+
* @param {string} [props.highLabel]
|
|
17
|
+
* @param {string} [props.name]
|
|
18
|
+
* @param {boolean} [props.disabled]
|
|
19
|
+
* @param {string} [props.error]
|
|
20
|
+
* @param {string} [props.hint]
|
|
21
21
|
* @param {string} [props.id]
|
|
22
|
-
* @param {string} [props.className]
|
|
23
|
-
* @param {string} [props.fieldClassName]
|
|
22
|
+
* @param {string} [props.className]
|
|
23
|
+
* @param {string} [props.fieldClassName]
|
|
24
24
|
*/
|
|
25
25
|
export default function AppScoreScale(props: {
|
|
26
|
+
/** The chosen value, or null for no choice yet. The parent holds it (controlled). */
|
|
26
27
|
value?: number | null;
|
|
27
28
|
onChange?: (value: number) => void;
|
|
29
|
+
/**
|
|
30
|
+
* The lowest value on the scale.
|
|
31
|
+
* @default 0
|
|
32
|
+
*/
|
|
28
33
|
min?: number;
|
|
34
|
+
/**
|
|
35
|
+
* The highest value on the scale.
|
|
36
|
+
* @default 10
|
|
37
|
+
*/
|
|
29
38
|
max?: number;
|
|
39
|
+
/** The visible group label; names the group. */
|
|
30
40
|
label?: import('react').ReactNode;
|
|
41
|
+
/** Text under the lowest value, such as "Not likely". */
|
|
31
42
|
lowLabel?: string;
|
|
43
|
+
/** Text under the highest value, such as "Very likely". */
|
|
32
44
|
highLabel?: string;
|
|
45
|
+
/** The form field name carried by every radio. Defaults to a generated one. */
|
|
33
46
|
name?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Locks every radio so the score cannot be changed.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
34
51
|
disabled?: boolean;
|
|
52
|
+
/** Message below the scale. Replaces the hint. */
|
|
35
53
|
error?: string;
|
|
54
|
+
/** Helper text below the scale. */
|
|
36
55
|
hint?: string;
|
|
56
|
+
/** The id of the radio group; the label, hint and error ids derive from it. Generated when omitted. */
|
|
37
57
|
id?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Class on the scale (the control).
|
|
60
|
+
* @default ""
|
|
61
|
+
*/
|
|
38
62
|
className?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Class on the `.field` wrapper.
|
|
65
|
+
* @default ""
|
|
66
|
+
*/
|
|
39
67
|
fieldClassName?: string;
|
|
40
68
|
}): import("react").JSX.Element;
|
|
@@ -8,14 +8,18 @@
|
|
|
8
8
|
*
|
|
9
9
|
* @param {object} props
|
|
10
10
|
* @param {import('react').ReactNode} props.children The scrollable content.
|
|
11
|
-
* @param {string} [props.className]
|
|
12
|
-
* @param {number|string} [props.maxHeight]
|
|
13
|
-
* scrolls. A number is treated as pixels.
|
|
11
|
+
* @param {string} [props.className]
|
|
12
|
+
* @param {number|string} [props.maxHeight]
|
|
14
13
|
* @param {object} [props.style] Extra inline styles, merged with maxHeight.
|
|
15
14
|
*/
|
|
16
15
|
export default function AppScrollbar(props: {
|
|
17
16
|
children: import('react').ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Extra classes on the scroll container.
|
|
19
|
+
* @default ""
|
|
20
|
+
*/
|
|
18
21
|
className?: string;
|
|
22
|
+
/** Caps the container height so content overflows and scrolls. A number is treated as pixels. */
|
|
19
23
|
maxHeight?: number | string;
|
|
20
24
|
style?: object;
|
|
21
25
|
}): import("react").JSX.Element;
|
|
@@ -4,28 +4,53 @@
|
|
|
4
4
|
* @param {object} props
|
|
5
5
|
* @param {string} props.value
|
|
6
6
|
* @param {(value: string) => void} [props.onChange] Called with the new value on every change, and with an empty string when the clear button is pressed.
|
|
7
|
-
* @param {string} [props.placeholder
|
|
7
|
+
* @param {string} [props.placeholder]
|
|
8
8
|
* @param {string} [props.ariaLabel]
|
|
9
|
-
* @param {number} [props.iconSize
|
|
10
|
-
* @param {'sm'|'lg'} [props.size]
|
|
11
|
-
* @param {boolean} [props.loading
|
|
12
|
-
* @param {boolean} [props.collapsible
|
|
13
|
-
* @param {boolean} [props.disabled
|
|
9
|
+
* @param {number} [props.iconSize]
|
|
10
|
+
* @param {'sm'|'lg'} [props.size]
|
|
11
|
+
* @param {boolean} [props.loading]
|
|
12
|
+
* @param {boolean} [props.collapsible]
|
|
13
|
+
* @param {boolean} [props.disabled]
|
|
14
14
|
* @param {string} [props.className]
|
|
15
|
-
* @param {string} [props.form]
|
|
15
|
+
* @param {string} [props.form]
|
|
16
16
|
* @param {(event: import('react').KeyboardEvent<HTMLInputElement>) => void} [props.onKeyDown] Called for every key in the field, before a collapsible search folds on Escape.
|
|
17
17
|
*/
|
|
18
18
|
export default function AppSearch(props: {
|
|
19
|
+
/** The text in the field. */
|
|
19
20
|
value: string;
|
|
20
21
|
onChange?: (value: string) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Hint text shown while the field is empty.
|
|
24
|
+
* @default "Search…"
|
|
25
|
+
*/
|
|
21
26
|
placeholder?: string;
|
|
27
|
+
/** The accessible name of the field. */
|
|
22
28
|
ariaLabel?: string;
|
|
29
|
+
/** The size in pixels of the leading magnifier. It is 18 when left out. */
|
|
23
30
|
iconSize?: number;
|
|
31
|
+
/** Control size around the default. */
|
|
24
32
|
size?: 'sm' | 'lg';
|
|
33
|
+
/**
|
|
34
|
+
* Swap the leading glyph for a spinner while a search is in flight.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
25
37
|
loading?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Render as an icon button labelled by ariaLabel (or placeholder) that opens the field on click or "/"; Escape or leaving an empty field folds it, and a value keeps it open.
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
26
42
|
collapsible?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Turns the field off so it cannot be typed in or cleared.
|
|
45
|
+
* @default false
|
|
46
|
+
*/
|
|
27
47
|
disabled?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Extra class names for the root element.
|
|
50
|
+
* @default ""
|
|
51
|
+
*/
|
|
28
52
|
className?: string;
|
|
53
|
+
/** Id of the filter form this search joins, so it submits with the filters. */
|
|
29
54
|
form?: string;
|
|
30
55
|
onKeyDown?: (event: import('react').KeyboardEvent<HTMLInputElement>) => void;
|
|
31
56
|
}): import("react").JSX.Element;
|
|
@@ -3,22 +3,42 @@
|
|
|
3
3
|
* panel. Renders the same markup as the Razor `<app-section-call-to-action>`.
|
|
4
4
|
*
|
|
5
5
|
* @param {object} props
|
|
6
|
-
* @param {import('react').ReactNode} props.title
|
|
7
|
-
* @param {import('react').ReactNode} [props.actions]
|
|
8
|
-
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as
|
|
9
|
-
* @param {import('react').ReactNode} [props.eyebrow]
|
|
10
|
-
* @param {import('react').ReactNode} [props.subtitle]
|
|
11
|
-
* @param {"start"|"center"} [props.align
|
|
12
|
-
* @param {"default"|"muted"} [props.variant
|
|
6
|
+
* @param {import('react').ReactNode} props.title
|
|
7
|
+
* @param {import('react').ReactNode} [props.actions]
|
|
8
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
9
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
10
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
11
|
+
* @param {"start"|"center"} [props.align]
|
|
12
|
+
* @param {"default"|"muted"} [props.variant]
|
|
13
13
|
* @param {string} [props.className]
|
|
14
14
|
*/
|
|
15
15
|
export default function AppSectionCallToAction(props: {
|
|
16
|
+
/** The section's heading. */
|
|
16
17
|
title: import('react').ReactNode;
|
|
18
|
+
/** The buttons, usually a primary `AppButton` and an outline one. */
|
|
17
19
|
actions?: import('react').ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* The heading element.
|
|
22
|
+
* @default "h2"
|
|
23
|
+
*/
|
|
18
24
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
25
|
+
/** A short label above the heading. */
|
|
19
26
|
eyebrow?: import('react').ReactNode;
|
|
27
|
+
/** A sentence under the heading. */
|
|
20
28
|
subtitle?: import('react').ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Where the copy and buttons sit in the panel.
|
|
31
|
+
* @default "center"
|
|
32
|
+
*/
|
|
21
33
|
align?: "start" | "center";
|
|
34
|
+
/**
|
|
35
|
+
* The section's background around the panel.
|
|
36
|
+
* @default "default"
|
|
37
|
+
*/
|
|
22
38
|
variant?: "default" | "muted";
|
|
39
|
+
/**
|
|
40
|
+
* Extra class names for the root element.
|
|
41
|
+
* @default ""
|
|
42
|
+
*/
|
|
23
43
|
className?: string;
|
|
24
44
|
}): import("react").JSX.Element;
|
|
@@ -7,24 +7,44 @@
|
|
|
7
7
|
* accordion, so the markup and the visible text cannot differ.
|
|
8
8
|
*
|
|
9
9
|
* @param {object} props
|
|
10
|
-
* @param {import('react').ReactNode} props.title
|
|
11
|
-
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as
|
|
12
|
-
* @param {import('react').ReactNode} [props.eyebrow]
|
|
13
|
-
* @param {import('react').ReactNode} [props.subtitle]
|
|
14
|
-
* @param {"start"|"center"} [props.align
|
|
15
|
-
* @param {"default"|"muted"} [props.variant
|
|
10
|
+
* @param {import('react').ReactNode} props.title
|
|
11
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
12
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
13
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
14
|
+
* @param {"start"|"center"} [props.align]
|
|
15
|
+
* @param {"default"|"muted"} [props.variant]
|
|
16
16
|
* @param {import('react').ReactNode} [props.children] The `AppAccordion` of questions.
|
|
17
|
-
* @param {number[]} [props.openItems]
|
|
17
|
+
* @param {number[]} [props.openItems]
|
|
18
18
|
* @param {string} [props.className]
|
|
19
19
|
*/
|
|
20
20
|
export default function AppSectionFaq(props: {
|
|
21
|
+
/** The section's heading. */
|
|
21
22
|
title: import('react').ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* The heading element.
|
|
25
|
+
* @default "h2"
|
|
26
|
+
*/
|
|
22
27
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
28
|
+
/** A short label above the heading. */
|
|
23
29
|
eyebrow?: import('react').ReactNode;
|
|
30
|
+
/** A sentence under the heading ("Still stuck? Write to us."). */
|
|
24
31
|
subtitle?: import('react').ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Where the heading block sits.
|
|
34
|
+
* @default "center"
|
|
35
|
+
*/
|
|
25
36
|
align?: "start" | "center";
|
|
37
|
+
/**
|
|
38
|
+
* The section's background.
|
|
39
|
+
* @default "default"
|
|
40
|
+
*/
|
|
26
41
|
variant?: "default" | "muted";
|
|
27
42
|
children?: import('react').ReactNode;
|
|
43
|
+
/** The positions of the questions that start open, counted from 0. They are passed to the AppAccordion among the children. */
|
|
28
44
|
openItems?: number[];
|
|
45
|
+
/**
|
|
46
|
+
* Extra class names for the root element.
|
|
47
|
+
* @default ""
|
|
48
|
+
*/
|
|
29
49
|
className?: string;
|
|
30
50
|
}): import("react").JSX.Element;
|
|
@@ -7,19 +7,23 @@
|
|
|
7
7
|
* item's `media` image must carry `width` and `height` so its box is reserved before it loads.
|
|
8
8
|
*
|
|
9
9
|
* @param {object} props
|
|
10
|
-
* @param {import('react').ReactNode} props.title
|
|
10
|
+
* @param {import('react').ReactNode} props.title
|
|
11
11
|
* @param {{ key?: string, title: string, description?: import('react').ReactNode, icon?: string, media?: import('react').ReactNode }[]} [props.items]
|
|
12
|
-
*
|
|
13
|
-
* @param {"
|
|
14
|
-
* @param {
|
|
15
|
-
* @param {import('react').ReactNode} [props.
|
|
16
|
-
* @param {
|
|
17
|
-
* @param {"
|
|
18
|
-
* @param {"default"|"muted"} [props.variant="default"] The section's background.
|
|
12
|
+
* @param {"grid"|"rows"} [props.layout]
|
|
13
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
14
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
15
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
16
|
+
* @param {"start"|"center"} [props.align]
|
|
17
|
+
* @param {"default"|"muted"} [props.variant]
|
|
19
18
|
* @param {string} [props.className]
|
|
20
19
|
*/
|
|
21
20
|
export default function AppSectionFeatures(props: {
|
|
21
|
+
/** The section's heading. */
|
|
22
22
|
title: import('react').ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* The points: a title, a description, a library icon name and an image.
|
|
25
|
+
* @default []
|
|
26
|
+
*/
|
|
23
27
|
items?: {
|
|
24
28
|
key?: string;
|
|
25
29
|
title: string;
|
|
@@ -27,11 +31,33 @@ export default function AppSectionFeatures(props: {
|
|
|
27
31
|
icon?: string;
|
|
28
32
|
media?: import('react').ReactNode;
|
|
29
33
|
}[];
|
|
34
|
+
/**
|
|
35
|
+
* Short points in columns, or one row per point with its image beside it.
|
|
36
|
+
* @default "grid"
|
|
37
|
+
*/
|
|
30
38
|
layout?: "grid" | "rows";
|
|
39
|
+
/**
|
|
40
|
+
* The heading element; each point's title is one level under it.
|
|
41
|
+
* @default "h2"
|
|
42
|
+
*/
|
|
31
43
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
44
|
+
/** A short label above the heading. */
|
|
32
45
|
eyebrow?: import('react').ReactNode;
|
|
46
|
+
/** One or two sentences under the heading. */
|
|
33
47
|
subtitle?: import('react').ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* Where the heading block sits.
|
|
50
|
+
* @default "center"
|
|
51
|
+
*/
|
|
34
52
|
align?: "start" | "center";
|
|
53
|
+
/**
|
|
54
|
+
* The section's background.
|
|
55
|
+
* @default "default"
|
|
56
|
+
*/
|
|
35
57
|
variant?: "default" | "muted";
|
|
58
|
+
/**
|
|
59
|
+
* Extra class names for the root element.
|
|
60
|
+
* @default ""
|
|
61
|
+
*/
|
|
36
62
|
className?: string;
|
|
37
63
|
}): import("react").JSX.Element;
|
|
@@ -9,24 +9,45 @@
|
|
|
9
9
|
* section by its heading (`{id}-title`).
|
|
10
10
|
*
|
|
11
11
|
* @param {object} props
|
|
12
|
-
* @param {import('react').ReactNode} props.title
|
|
13
|
-
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as
|
|
14
|
-
* @param {import('react').ReactNode} [props.eyebrow]
|
|
15
|
-
* @param {import('react').ReactNode} [props.subtitle]
|
|
16
|
-
* @param {"start"|"center"} [props.align
|
|
17
|
-
* @param {"default"|"muted"} [props.variant
|
|
18
|
-
* @param {import('react').ReactNode} [props.actions]
|
|
19
|
-
* @param {import('react').ReactNode} [props.media]
|
|
12
|
+
* @param {import('react').ReactNode} props.title
|
|
13
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
14
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
15
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
16
|
+
* @param {"start"|"center"} [props.align]
|
|
17
|
+
* @param {"default"|"muted"} [props.variant]
|
|
18
|
+
* @param {import('react').ReactNode} [props.actions]
|
|
19
|
+
* @param {import('react').ReactNode} [props.media]
|
|
20
20
|
* @param {string} [props.className]
|
|
21
21
|
*/
|
|
22
22
|
export default function AppSectionHero(props: {
|
|
23
|
+
/** The page's heading. */
|
|
23
24
|
title: import('react').ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* The heading element. Keep one h1 per page.
|
|
27
|
+
* @default "h1"
|
|
28
|
+
*/
|
|
24
29
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
30
|
+
/** A short label above the heading: any node, including a styled container drawn as a pill. */
|
|
25
31
|
eyebrow?: import('react').ReactNode;
|
|
32
|
+
/** One or two sentences under the heading. */
|
|
26
33
|
subtitle?: import('react').ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* Centred copy with the media under it.
|
|
36
|
+
* @default "start"
|
|
37
|
+
*/
|
|
27
38
|
align?: "start" | "center";
|
|
39
|
+
/**
|
|
40
|
+
* The section's background.
|
|
41
|
+
* @default "default"
|
|
42
|
+
*/
|
|
28
43
|
variant?: "default" | "muted";
|
|
44
|
+
/** The calls to action, usually one or two `AppButton`s. */
|
|
29
45
|
actions?: import('react').ReactNode;
|
|
46
|
+
/** An `<img>` with `width` and `height`, beside the copy. */
|
|
30
47
|
media?: import('react').ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* Extra class names for the root element.
|
|
50
|
+
* @default ""
|
|
51
|
+
*/
|
|
31
52
|
className?: string;
|
|
32
53
|
}): import("react").JSX.Element;
|
|
@@ -9,18 +9,22 @@
|
|
|
9
9
|
* with no size moves the page when it loads.
|
|
10
10
|
*
|
|
11
11
|
* @param {object} props
|
|
12
|
-
* @param {import('react').ReactNode} props.title
|
|
12
|
+
* @param {import('react').ReactNode} props.title
|
|
13
13
|
* @param {{ key?: string, src?: string, alt?: string, name?: string, label?: string, width?: number, height?: number, href?: string }[]} [props.items]
|
|
14
|
-
*
|
|
15
|
-
* @param {
|
|
16
|
-
* @param {import('react').ReactNode} [props.
|
|
17
|
-
* @param {
|
|
18
|
-
* @param {"
|
|
19
|
-
* @param {"default"|"muted"} [props.variant="default"] The section's background.
|
|
14
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
15
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
16
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
17
|
+
* @param {"start"|"center"} [props.align]
|
|
18
|
+
* @param {"default"|"muted"} [props.variant]
|
|
20
19
|
* @param {string} [props.className]
|
|
21
20
|
*/
|
|
22
21
|
export default function AppSectionLogos(props: {
|
|
22
|
+
/** The section's heading, set small above the logos. */
|
|
23
23
|
title: import('react').ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* The logos, each with its intrinsic size in px for an image and an optional link. An item that fits neither an image nor a text logo throws.
|
|
26
|
+
* @default []
|
|
27
|
+
*/
|
|
24
28
|
items?: {
|
|
25
29
|
key?: string;
|
|
26
30
|
src?: string;
|
|
@@ -31,10 +35,28 @@ export default function AppSectionLogos(props: {
|
|
|
31
35
|
height?: number;
|
|
32
36
|
href?: string;
|
|
33
37
|
}[];
|
|
38
|
+
/**
|
|
39
|
+
* The heading element.
|
|
40
|
+
* @default "h2"
|
|
41
|
+
*/
|
|
34
42
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
43
|
+
/** A short label above the heading. */
|
|
35
44
|
eyebrow?: import('react').ReactNode;
|
|
45
|
+
/** A sentence under the heading. */
|
|
36
46
|
subtitle?: import('react').ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* Where the heading and the logos sit.
|
|
49
|
+
* @default "center"
|
|
50
|
+
*/
|
|
37
51
|
align?: "start" | "center";
|
|
52
|
+
/**
|
|
53
|
+
* The section's background.
|
|
54
|
+
* @default "default"
|
|
55
|
+
*/
|
|
38
56
|
variant?: "default" | "muted";
|
|
57
|
+
/**
|
|
58
|
+
* Extra class names added to the section.
|
|
59
|
+
* @default ""
|
|
60
|
+
*/
|
|
39
61
|
className?: string;
|
|
40
62
|
}): import("react").JSX.Element;
|
|
@@ -7,22 +7,41 @@
|
|
|
7
7
|
* through its SEO layer, from the same figures it renders here.
|
|
8
8
|
*
|
|
9
9
|
* @param {object} props
|
|
10
|
-
* @param {import('react').ReactNode} props.title
|
|
11
|
-
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as
|
|
12
|
-
* @param {import('react').ReactNode} [props.eyebrow]
|
|
13
|
-
* @param {import('react').ReactNode} [props.subtitle]
|
|
14
|
-
* @param {"start"|"center"} [props.align
|
|
15
|
-
* @param {"default"|"muted"} [props.variant
|
|
10
|
+
* @param {import('react').ReactNode} props.title
|
|
11
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
12
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
13
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
14
|
+
* @param {"start"|"center"} [props.align]
|
|
15
|
+
* @param {"default"|"muted"} [props.variant]
|
|
16
16
|
* @param {import('react').ReactNode} [props.children] The `AppPricingCard` tiers.
|
|
17
17
|
* @param {string} [props.className]
|
|
18
18
|
*/
|
|
19
19
|
export default function AppSectionPricing(props: {
|
|
20
|
+
/** The section's heading. */
|
|
20
21
|
title: import('react').ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* The heading element.
|
|
24
|
+
* @default "h2"
|
|
25
|
+
*/
|
|
21
26
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
27
|
+
/** A short label above the heading. */
|
|
22
28
|
eyebrow?: import('react').ReactNode;
|
|
29
|
+
/** One or two sentences under the heading, such as a tax note or a trial offer. */
|
|
23
30
|
subtitle?: import('react').ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Where the heading block sits.
|
|
33
|
+
* @default "center"
|
|
34
|
+
*/
|
|
24
35
|
align?: "start" | "center";
|
|
36
|
+
/**
|
|
37
|
+
* The section's background.
|
|
38
|
+
* @default "default"
|
|
39
|
+
*/
|
|
25
40
|
variant?: "default" | "muted";
|
|
26
41
|
children?: import('react').ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* Extra class names added to the section.
|
|
44
|
+
* @default ""
|
|
45
|
+
*/
|
|
27
46
|
className?: string;
|
|
28
47
|
}): import("react").JSX.Element;
|
|
@@ -6,18 +6,22 @@
|
|
|
6
6
|
* without moving the page; it is decorative (empty `alt`) because the name sits beside it.
|
|
7
7
|
*
|
|
8
8
|
* @param {object} props
|
|
9
|
-
* @param {import('react').ReactNode} props.title
|
|
9
|
+
* @param {import('react').ReactNode} props.title
|
|
10
10
|
* @param {{ key?: string, quote: import('react').ReactNode, name?: string, role?: string, avatar?: string }[]} [props.items]
|
|
11
|
-
*
|
|
12
|
-
* @param {
|
|
13
|
-
* @param {import('react').ReactNode} [props.
|
|
14
|
-
* @param {
|
|
15
|
-
* @param {"
|
|
16
|
-
* @param {"default"|"muted"} [props.variant="default"] The section's background.
|
|
11
|
+
* @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
|
|
12
|
+
* @param {import('react').ReactNode} [props.eyebrow]
|
|
13
|
+
* @param {import('react').ReactNode} [props.subtitle]
|
|
14
|
+
* @param {"start"|"center"} [props.align]
|
|
15
|
+
* @param {"default"|"muted"} [props.variant]
|
|
17
16
|
* @param {string} [props.className]
|
|
18
17
|
*/
|
|
19
18
|
export default function AppSectionTestimonials(props: {
|
|
19
|
+
/** The section's heading. */
|
|
20
20
|
title: import('react').ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* The quotes, each with the person's name, role and a square photo URL.
|
|
23
|
+
* @default []
|
|
24
|
+
*/
|
|
21
25
|
items?: {
|
|
22
26
|
key?: string;
|
|
23
27
|
quote: import('react').ReactNode;
|
|
@@ -25,10 +29,28 @@ export default function AppSectionTestimonials(props: {
|
|
|
25
29
|
role?: string;
|
|
26
30
|
avatar?: string;
|
|
27
31
|
}[];
|
|
32
|
+
/**
|
|
33
|
+
* The heading element.
|
|
34
|
+
* @default "h2"
|
|
35
|
+
*/
|
|
28
36
|
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
37
|
+
/** A short label above the heading. */
|
|
29
38
|
eyebrow?: import('react').ReactNode;
|
|
39
|
+
/** One or two sentences under the heading. */
|
|
30
40
|
subtitle?: import('react').ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Where the heading block sits.
|
|
43
|
+
* @default "center"
|
|
44
|
+
*/
|
|
31
45
|
align?: "start" | "center";
|
|
46
|
+
/**
|
|
47
|
+
* The section's background.
|
|
48
|
+
* @default "default"
|
|
49
|
+
*/
|
|
32
50
|
variant?: "default" | "muted";
|
|
51
|
+
/**
|
|
52
|
+
* Extra class names added to the section.
|
|
53
|
+
* @default ""
|
|
54
|
+
*/
|
|
33
55
|
className?: string;
|
|
34
56
|
}): import("react").JSX.Element;
|
|
@@ -12,23 +12,24 @@
|
|
|
12
12
|
* posts inside a plain form with no JavaScript.
|
|
13
13
|
*
|
|
14
14
|
* @param {object} props
|
|
15
|
-
* @param {{ value: string, label: string, note?: string, icon?: string, disabled?: boolean, count?: number }[]} props.options
|
|
16
|
-
*
|
|
17
|
-
* ("Last 7 days") without shrinking the label itself. Optional; segments without one are
|
|
18
|
-
* unaffected.
|
|
19
|
-
* @param {string} props.value The selected option's value.
|
|
15
|
+
* @param {{ value: string, label: string, note?: string, icon?: string, disabled?: boolean, count?: number }[]} [props.options]
|
|
16
|
+
* @param {string} props.value
|
|
20
17
|
* @param {(value: string) => void} props.onChange
|
|
21
|
-
* @param {string} props.label
|
|
22
|
-
* @param {string} [props.name]
|
|
23
|
-
* @param {'sm'|'md'|'lg'|'xl'} [props.size
|
|
24
|
-
* @param {boolean} [props.fullWidth
|
|
25
|
-
* @param {boolean} [props.bordered
|
|
26
|
-
* @param {boolean} [props.disabled
|
|
27
|
-
* @param {boolean} [props.labelVisible
|
|
18
|
+
* @param {string} props.label
|
|
19
|
+
* @param {string} [props.name]
|
|
20
|
+
* @param {'sm'|'md'|'lg'|'xl'} [props.size]
|
|
21
|
+
* @param {boolean} [props.fullWidth]
|
|
22
|
+
* @param {boolean} [props.bordered]
|
|
23
|
+
* @param {boolean} [props.disabled]
|
|
24
|
+
* @param {boolean} [props.labelVisible]
|
|
28
25
|
* @param {string} [props.className]
|
|
29
26
|
*/
|
|
30
27
|
export default function AppSegmented(props: {
|
|
31
|
-
|
|
28
|
+
/**
|
|
29
|
+
* The choices, in order, two to four. note is a smaller muted line under the label, count is a number beside it, and disabled keeps one option visible but unpickable.
|
|
30
|
+
* @default []
|
|
31
|
+
*/
|
|
32
|
+
options?: {
|
|
32
33
|
value: string;
|
|
33
34
|
label: string;
|
|
34
35
|
note?: string;
|
|
@@ -36,14 +37,41 @@ export default function AppSegmented(props: {
|
|
|
36
37
|
disabled?: boolean;
|
|
37
38
|
count?: number;
|
|
38
39
|
}[];
|
|
40
|
+
/** The selected option's value. */
|
|
39
41
|
value: string;
|
|
40
42
|
onChange: (value: string) => void;
|
|
43
|
+
/** The accessible name of the group. */
|
|
41
44
|
label: string;
|
|
45
|
+
/** The field name, which groups the radios and is what a form posts. Defaults to a generated one. */
|
|
42
46
|
name?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Heights 32, 36 and 44px. xl is deprecated and draws lg.
|
|
49
|
+
* @default "md"
|
|
50
|
+
*/
|
|
43
51
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
52
|
+
/**
|
|
53
|
+
* Segments share the row equally, filling the container.
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
44
56
|
fullWidth?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Draws the edge and soft shadow of the selected thumb. false keeps a flat thumb.
|
|
59
|
+
* @default true
|
|
60
|
+
*/
|
|
45
61
|
bordered?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Disables the whole control.
|
|
64
|
+
* @default false
|
|
65
|
+
*/
|
|
46
66
|
disabled?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Shows the label above the control. The accessible name stays either way.
|
|
69
|
+
* @default false
|
|
70
|
+
*/
|
|
47
71
|
labelVisible?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Extra class names added to the group.
|
|
74
|
+
* @default ""
|
|
75
|
+
*/
|
|
48
76
|
className?: string;
|
|
49
77
|
}): import("react").JSX.Element;
|