@apliteni/apliteni-ui 0.130.0 → 0.131.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/package.json +2 -1
- package/react/dist/index.d.ts +28 -1
- package/react/dist/index.js +595 -554
- package/src/components/account-nav.js +4 -7
- package/src/components/avatar.js +53 -0
- package/src/components/dropdown.js +36 -10
- package/src/components/shell.js +3 -2
- package/src/components/topbar.js +4 -3
- package/src/index.css +1 -0
- package/src/index.d.ts +8 -0
- package/src/index.js +1 -0
- package/src/inline.js +2 -0
- package/src/logic/avatar.js +28 -0
- package/src/styles/avatar.css +42 -0
- package/src/styles/dropdown.css +18 -0
- package/src/styles/layout.css +3 -6
- package/src/styles/topbar.css +5 -2
- package/src/tokens/tokens.css +23 -0
package/package.json
CHANGED
package/react/dist/index.d.ts
CHANGED
|
@@ -68,6 +68,19 @@ declare function Badge({ variant, children }: {
|
|
|
68
68
|
children: ReactNode;
|
|
69
69
|
}): react.JSX.Element;
|
|
70
70
|
|
|
71
|
+
type AvatarProps = {
|
|
72
|
+
/** The app's stable id for the person. It picks the hue, so one person keeps one hue. */
|
|
73
|
+
personKey?: string | number;
|
|
74
|
+
/** The person's name. The mark shows its first and last initials; empty draws the `user` glyph. */
|
|
75
|
+
name?: string | null;
|
|
76
|
+
/** A photo. The letters show if it fails to load. */
|
|
77
|
+
src?: string;
|
|
78
|
+
size?: 24 | 32;
|
|
79
|
+
/** A dashed ring in place of a person: no value, or a "No one" row. */
|
|
80
|
+
empty?: boolean;
|
|
81
|
+
};
|
|
82
|
+
declare function Avatar({ personKey, name, src, size, empty }: AvatarProps): react.JSX.Element;
|
|
83
|
+
|
|
71
84
|
type PillProps = HTMLAttributes<HTMLSpanElement> & {
|
|
72
85
|
variant?: 'live' | 'soon';
|
|
73
86
|
};
|
|
@@ -416,6 +429,12 @@ type DropdownBadge = string | {
|
|
|
416
429
|
text: string;
|
|
417
430
|
tone?: string;
|
|
418
431
|
};
|
|
432
|
+
type DropdownAvatar = {
|
|
433
|
+
key?: string | number;
|
|
434
|
+
name?: string | null;
|
|
435
|
+
src?: string;
|
|
436
|
+
empty?: boolean;
|
|
437
|
+
};
|
|
419
438
|
type DropdownItem = {
|
|
420
439
|
label: string;
|
|
421
440
|
/** The pick, as `onSelect` reports it and as `data-value` carries it. */
|
|
@@ -423,6 +442,9 @@ type DropdownItem = {
|
|
|
423
442
|
description?: string;
|
|
424
443
|
/** A kit glyph name, drawn in the row's leading slot. */
|
|
425
444
|
icon?: string;
|
|
445
|
+
/** A person's mark in the leading slot, in place of `icon`. `key` picks the hue, `name` the
|
|
446
|
+
* letters, `src` a photo. `{ empty: true }` is the dashed ring of a "No one" row. */
|
|
447
|
+
avatar?: DropdownAvatar;
|
|
426
448
|
badge?: DropdownBadge;
|
|
427
449
|
selected?: boolean;
|
|
428
450
|
disabled?: boolean;
|
|
@@ -451,6 +473,11 @@ type DropdownSearch = {
|
|
|
451
473
|
hint?: string;
|
|
452
474
|
/** What the field holds before it is opened; every open starts from the whole list. */
|
|
453
475
|
query?: string;
|
|
476
|
+
/** The size of the whole set, for "Search 214 people" in the placeholder and the field's
|
|
477
|
+
* name. `true` counts the rows, less a "No one" row. */
|
|
478
|
+
count?: number | true;
|
|
479
|
+
/** What the set is called in that line. Defaults to "people". */
|
|
480
|
+
noun?: string;
|
|
454
481
|
};
|
|
455
482
|
/**
|
|
456
483
|
* What a row has to carry to be a row: the classes, the role, the tab stop the
|
|
@@ -1121,4 +1148,4 @@ declare const Breadcrumbs: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
|
|
|
1121
1148
|
declare const PAGE_SIZES: readonly number[];
|
|
1122
1149
|
declare const DEFAULT_PAGE_SIZE: number;
|
|
1123
1150
|
|
|
1124
|
-
export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
|
|
1151
|
+
export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
|