@dragunio/fe-libs 0.1.6 → 0.1.7
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/README.md +11 -1
- package/dist/{chunk-NDMLXSI5.mjs → chunk-GT4546FD.mjs} +16 -0
- package/dist/icons.d.mts +3 -1
- package/dist/icons.d.ts +3 -1
- package/dist/icons.js +18 -0
- package/dist/icons.mjs +5 -1
- package/dist/index.d.mts +52 -3
- package/dist/index.d.ts +52 -3
- package/dist/index.js +967 -300
- package/dist/index.mjs +938 -290
- package/dist/styles.css +123 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,8 @@ packages/ # Internal component source folders
|
|
|
19
19
|
├── skeleton/
|
|
20
20
|
├── modal/
|
|
21
21
|
├── progress/
|
|
22
|
-
|
|
22
|
+
├── chip/
|
|
23
|
+
└── avatar/
|
|
23
24
|
apps/playground/ # Local component storybook
|
|
24
25
|
```
|
|
25
26
|
|
|
@@ -59,6 +60,7 @@ Available review routes:
|
|
|
59
60
|
- `http://127.0.0.1:3000/#/modal` — Modal
|
|
60
61
|
- `http://127.0.0.1:3000/#/progress` — ProgressBar
|
|
61
62
|
- `http://127.0.0.1:3000/#/chip` — Chip
|
|
63
|
+
- `http://127.0.0.1:3000/#/avatar` — Avatar
|
|
62
64
|
- `http://127.0.0.1:3000/#/text-input` — TextInput & TextArea
|
|
63
65
|
- `http://127.0.0.1:3000/#/pagination` — Pagination
|
|
64
66
|
- `http://127.0.0.1:3000/#/message` — Message
|
|
@@ -171,6 +173,7 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
|
|
|
171
173
|
- `Loading` provides `small`, `medium`, and `large` circular indicators (or a custom pixel `size`); use `Skeleton.Circle` and `Skeleton.Square` with `size`, or `Skeleton.Box` and `Skeleton.Line` with `width` and `height`.
|
|
172
174
|
- `ProgressBar` is determinate when `value` is supplied and renders an indeterminate back-and-forth animation when it is omitted.
|
|
173
175
|
- `Chip` supports the standard `default`, `success`, `error`, `info`, and `warning` palettes, plus `color` for any CSS color and `subtle`, `solid`, or `outline` variants.
|
|
176
|
+
- `Avatar` prioritises `src`, then derives initials from the final two words of `content` (`Nguyễn Minh Anh` → `MA`), and otherwise shows one of 32 built-in illustrated fallbacks. `AvatarGroup` overlaps its Avatar children and turns the final displayed item into `+n` when `maxCount` is exceeded; a single Avatar with `content` shows its content beside the Avatar.
|
|
174
177
|
- `Pagination` supports controlled (`page`) and uncontrolled (`defaultPage`) navigation, compact ellipses, and accessible previous/next controls.
|
|
175
178
|
- Mount `Message` once near the app root and trigger top-right alert notifications with `Message.success`, `Message.info`, `Message.warning`, or `Message.error`. `Snackbar` is a controlled temporary notification with actions, auto-hide, and configurable placement.
|
|
176
179
|
|
|
@@ -190,4 +193,11 @@ The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a
|
|
|
190
193
|
<ProgressBar label="Upload" value={72} />
|
|
191
194
|
<ProgressBar label="Synchronising" />
|
|
192
195
|
<Chip status="success" dot>Complete</Chip>
|
|
196
|
+
<Avatar content="Nguyễn Minh Anh" size={48} />
|
|
197
|
+
<AvatarGroup maxCount={3}>
|
|
198
|
+
<Avatar content="Nguyễn Minh Anh" />
|
|
199
|
+
<Avatar content="Lê Hoàng Nam" />
|
|
200
|
+
<Avatar content="Trần Thu Hà" />
|
|
201
|
+
<Avatar content="Phạm Quốc Bảo" />
|
|
202
|
+
</AvatarGroup>
|
|
193
203
|
```
|
|
@@ -141,6 +141,20 @@ function CloseIcon(props) {
|
|
|
141
141
|
}
|
|
142
142
|
) });
|
|
143
143
|
}
|
|
144
|
+
function MoreHorizontalIcon(props) {
|
|
145
|
+
return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
|
|
146
|
+
/* @__PURE__ */ jsx4("circle", { cx: "5", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
147
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
148
|
+
/* @__PURE__ */ jsx4("circle", { cx: "19", cy: "12", r: "1.75", fill: "currentColor" })
|
|
149
|
+
] });
|
|
150
|
+
}
|
|
151
|
+
function MoreVerticalIcon(props) {
|
|
152
|
+
return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
|
|
153
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "5", r: "1.75", fill: "currentColor" }),
|
|
154
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
155
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "19", r: "1.75", fill: "currentColor" })
|
|
156
|
+
] });
|
|
157
|
+
}
|
|
144
158
|
function SearchIcon(props) {
|
|
145
159
|
return /* @__PURE__ */ jsxs("svg", { ...iconProps4(props), children: [
|
|
146
160
|
/* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
|
|
@@ -178,5 +192,7 @@ export {
|
|
|
178
192
|
ChevronDownIcon,
|
|
179
193
|
ChevronUpIcon,
|
|
180
194
|
CloseIcon,
|
|
195
|
+
MoreHorizontalIcon,
|
|
196
|
+
MoreVerticalIcon,
|
|
181
197
|
SearchIcon
|
|
182
198
|
};
|
package/dist/icons.d.mts
CHANGED
|
@@ -28,6 +28,8 @@ declare function PlusIcon(props: IconProps): react.JSX.Element;
|
|
|
28
28
|
declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
|
|
29
29
|
declare function ChevronUpIcon(props: IconProps): react.JSX.Element;
|
|
30
30
|
declare function CloseIcon(props: IconProps): react.JSX.Element;
|
|
31
|
+
declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
|
|
32
|
+
declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
|
|
31
33
|
declare function SearchIcon(props: IconProps): react.JSX.Element;
|
|
32
34
|
|
|
33
|
-
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
|
|
35
|
+
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
|
package/dist/icons.d.ts
CHANGED
|
@@ -28,6 +28,8 @@ declare function PlusIcon(props: IconProps): react.JSX.Element;
|
|
|
28
28
|
declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
|
|
29
29
|
declare function ChevronUpIcon(props: IconProps): react.JSX.Element;
|
|
30
30
|
declare function CloseIcon(props: IconProps): react.JSX.Element;
|
|
31
|
+
declare function MoreHorizontalIcon(props: IconProps): react.JSX.Element;
|
|
32
|
+
declare function MoreVerticalIcon(props: IconProps): react.JSX.Element;
|
|
31
33
|
declare function SearchIcon(props: IconProps): react.JSX.Element;
|
|
32
34
|
|
|
33
|
-
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
|
|
35
|
+
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, type IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close };
|
package/dist/icons.js
CHANGED
|
@@ -23,6 +23,8 @@ __export(icons_exports, {
|
|
|
23
23
|
ChevronDownIcon: () => ChevronDownIcon,
|
|
24
24
|
ChevronUpIcon: () => ChevronUpIcon,
|
|
25
25
|
CloseIcon: () => CloseIcon,
|
|
26
|
+
MoreHorizontalIcon: () => MoreHorizontalIcon,
|
|
27
|
+
MoreVerticalIcon: () => MoreVerticalIcon,
|
|
26
28
|
PlusIcon: () => PlusIcon,
|
|
27
29
|
SearchIcon: () => SearchIcon,
|
|
28
30
|
arrow_left: () => arrow_left,
|
|
@@ -188,6 +190,20 @@ function CloseIcon(props) {
|
|
|
188
190
|
}
|
|
189
191
|
) });
|
|
190
192
|
}
|
|
193
|
+
function MoreHorizontalIcon(props) {
|
|
194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
|
|
195
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
196
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
197
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "19", cy: "12", r: "1.75", fill: "currentColor" })
|
|
198
|
+
] });
|
|
199
|
+
}
|
|
200
|
+
function MoreVerticalIcon(props) {
|
|
201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
|
|
202
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "5", r: "1.75", fill: "currentColor" }),
|
|
203
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
|
|
204
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "19", r: "1.75", fill: "currentColor" })
|
|
205
|
+
] });
|
|
206
|
+
}
|
|
191
207
|
function SearchIcon(props) {
|
|
192
208
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...iconProps4(props), children: [
|
|
193
209
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
|
|
@@ -207,6 +223,8 @@ function SearchIcon(props) {
|
|
|
207
223
|
ChevronDownIcon,
|
|
208
224
|
ChevronUpIcon,
|
|
209
225
|
CloseIcon,
|
|
226
|
+
MoreHorizontalIcon,
|
|
227
|
+
MoreVerticalIcon,
|
|
210
228
|
PlusIcon,
|
|
211
229
|
SearchIcon,
|
|
212
230
|
arrow_left,
|
package/dist/icons.mjs
CHANGED
|
@@ -2,6 +2,8 @@ import {
|
|
|
2
2
|
ChevronDownIcon,
|
|
3
3
|
ChevronUpIcon,
|
|
4
4
|
CloseIcon,
|
|
5
|
+
MoreHorizontalIcon,
|
|
6
|
+
MoreVerticalIcon,
|
|
5
7
|
PlusIcon,
|
|
6
8
|
SearchIcon,
|
|
7
9
|
arrow_left,
|
|
@@ -21,11 +23,13 @@ import {
|
|
|
21
23
|
search,
|
|
22
24
|
trash,
|
|
23
25
|
x_close
|
|
24
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-GT4546FD.mjs";
|
|
25
27
|
export {
|
|
26
28
|
ChevronDownIcon,
|
|
27
29
|
ChevronUpIcon,
|
|
28
30
|
CloseIcon,
|
|
31
|
+
MoreHorizontalIcon,
|
|
32
|
+
MoreVerticalIcon,
|
|
29
33
|
PlusIcon,
|
|
30
34
|
SearchIcon,
|
|
31
35
|
arrow_left,
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ButtonHTMLAttributes, ReactNode,
|
|
3
|
-
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
|
|
3
|
+
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.mjs';
|
|
4
4
|
|
|
5
5
|
type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
|
|
6
6
|
type ButtonSize = '24' | '32' | '40';
|
|
@@ -44,6 +44,22 @@ declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<
|
|
|
44
44
|
variant?: ButtonVariant;
|
|
45
45
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
46
46
|
|
|
47
|
+
/** A Button action with a stable identifier for use in ButtonBar. */
|
|
48
|
+
type ButtonBarAction = ButtonProps & {
|
|
49
|
+
id: string;
|
|
50
|
+
};
|
|
51
|
+
type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
52
|
+
/** Actions render in this order, both in the bar and the More menu. */
|
|
53
|
+
actions: ButtonBarAction[];
|
|
54
|
+
/** Number of actions to keep visible before overflowing the remainder. */
|
|
55
|
+
maxVisible?: number;
|
|
56
|
+
/** Overrides for the icon-only More trigger. */
|
|
57
|
+
moreButtonProps?: ButtonProps;
|
|
58
|
+
/** Accessible label for the More trigger and its action list. */
|
|
59
|
+
moreLabel?: string;
|
|
60
|
+
};
|
|
61
|
+
declare function ButtonBar({ actions, maxVisible, moreButtonProps, moreLabel, className, ...props }: ButtonBarProps): react.JSX.Element;
|
|
62
|
+
|
|
47
63
|
type TableData = readonly (readonly ReactNode[])[];
|
|
48
64
|
type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
|
|
49
65
|
type TablePaginationPosition = 'top-right' | 'bottom-right' | 'bottom-center' | 'middle-bottom';
|
|
@@ -606,4 +622,37 @@ type SnackbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClose'> & {
|
|
|
606
622
|
/** A controlled, temporary notification surface. */
|
|
607
623
|
declare function Snackbar({ open, message, autoHideDuration, onClose, action, anchorOrigin, closeLabel, className, ...props }: SnackbarProps): react.JSX.Element | null;
|
|
608
624
|
|
|
609
|
-
|
|
625
|
+
type AvatarShape = 'circle' | 'rounded';
|
|
626
|
+
type AvatarSize = number | string;
|
|
627
|
+
type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
|
|
628
|
+
/** Image URL. A successfully loaded image takes priority over all fallbacks. */
|
|
629
|
+
src?: string | null;
|
|
630
|
+
/** Name or label used to derive initials when no image is available. */
|
|
631
|
+
content?: string | null;
|
|
632
|
+
/** Accessible description for the image or fallback avatar. Defaults to content. */
|
|
633
|
+
alt?: string;
|
|
634
|
+
/** Avatar width and height. Numbers are interpreted as pixels. */
|
|
635
|
+
size?: AvatarSize;
|
|
636
|
+
/** Circle is the default; rounded uses a square with rounded corners. */
|
|
637
|
+
shape?: AvatarShape;
|
|
638
|
+
/** Chooses a specific illustration from the fallback collection. */
|
|
639
|
+
fallbackIndex?: number;
|
|
640
|
+
};
|
|
641
|
+
type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
642
|
+
/** Avatar elements to show in the group. */
|
|
643
|
+
children: ReactNode;
|
|
644
|
+
/** Maximum total items to show, including the final +n overflow item. */
|
|
645
|
+
maxCount?: number;
|
|
646
|
+
};
|
|
647
|
+
/**
|
|
648
|
+
* A compact avatar that shows an image, name initials, or one of 32 fallback
|
|
649
|
+
* illustrations in that order.
|
|
650
|
+
*/
|
|
651
|
+
declare function Avatar({ src, content, alt, size, shape, fallbackIndex, className, style, role, 'aria-label': ariaLabel, ...props }: AvatarProps): react.JSX.Element;
|
|
652
|
+
/**
|
|
653
|
+
* A compact overlapping set of Avatar elements. When it contains one Avatar
|
|
654
|
+
* with content, the full content is shown beside it.
|
|
655
|
+
*/
|
|
656
|
+
declare function AvatarGroup({ children, maxCount, className, style, role, ...props }: AvatarGroupProps): react.JSX.Element;
|
|
657
|
+
|
|
658
|
+
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ButtonHTMLAttributes, ReactNode,
|
|
3
|
-
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.js';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, TableHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, KeyboardEventHandler, ChangeEvent, ReactElement } from 'react';
|
|
3
|
+
export { ChevronDownIcon, ChevronUpIcon, CloseIcon, IconProps, MoreHorizontalIcon, MoreVerticalIcon, PlusIcon, SearchIcon, arrow_left, check_square_fill, chevron_down, chevron_left, chevron_right, chevron_up, copy, key, lock, lock_unlocked, log_out, minus_square, plus, plus_square, search, trash, x_close } from './icons.js';
|
|
4
4
|
|
|
5
5
|
type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
|
|
6
6
|
type ButtonSize = '24' | '32' | '40';
|
|
@@ -44,6 +44,22 @@ declare const Button: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<
|
|
|
44
44
|
variant?: ButtonVariant;
|
|
45
45
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
46
46
|
|
|
47
|
+
/** A Button action with a stable identifier for use in ButtonBar. */
|
|
48
|
+
type ButtonBarAction = ButtonProps & {
|
|
49
|
+
id: string;
|
|
50
|
+
};
|
|
51
|
+
type ButtonBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
52
|
+
/** Actions render in this order, both in the bar and the More menu. */
|
|
53
|
+
actions: ButtonBarAction[];
|
|
54
|
+
/** Number of actions to keep visible before overflowing the remainder. */
|
|
55
|
+
maxVisible?: number;
|
|
56
|
+
/** Overrides for the icon-only More trigger. */
|
|
57
|
+
moreButtonProps?: ButtonProps;
|
|
58
|
+
/** Accessible label for the More trigger and its action list. */
|
|
59
|
+
moreLabel?: string;
|
|
60
|
+
};
|
|
61
|
+
declare function ButtonBar({ actions, maxVisible, moreButtonProps, moreLabel, className, ...props }: ButtonBarProps): react.JSX.Element;
|
|
62
|
+
|
|
47
63
|
type TableData = readonly (readonly ReactNode[])[];
|
|
48
64
|
type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
|
|
49
65
|
type TablePaginationPosition = 'top-right' | 'bottom-right' | 'bottom-center' | 'middle-bottom';
|
|
@@ -606,4 +622,37 @@ type SnackbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'onClose'> & {
|
|
|
606
622
|
/** A controlled, temporary notification surface. */
|
|
607
623
|
declare function Snackbar({ open, message, autoHideDuration, onClose, action, anchorOrigin, closeLabel, className, ...props }: SnackbarProps): react.JSX.Element | null;
|
|
608
624
|
|
|
609
|
-
|
|
625
|
+
type AvatarShape = 'circle' | 'rounded';
|
|
626
|
+
type AvatarSize = number | string;
|
|
627
|
+
type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
|
|
628
|
+
/** Image URL. A successfully loaded image takes priority over all fallbacks. */
|
|
629
|
+
src?: string | null;
|
|
630
|
+
/** Name or label used to derive initials when no image is available. */
|
|
631
|
+
content?: string | null;
|
|
632
|
+
/** Accessible description for the image or fallback avatar. Defaults to content. */
|
|
633
|
+
alt?: string;
|
|
634
|
+
/** Avatar width and height. Numbers are interpreted as pixels. */
|
|
635
|
+
size?: AvatarSize;
|
|
636
|
+
/** Circle is the default; rounded uses a square with rounded corners. */
|
|
637
|
+
shape?: AvatarShape;
|
|
638
|
+
/** Chooses a specific illustration from the fallback collection. */
|
|
639
|
+
fallbackIndex?: number;
|
|
640
|
+
};
|
|
641
|
+
type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
642
|
+
/** Avatar elements to show in the group. */
|
|
643
|
+
children: ReactNode;
|
|
644
|
+
/** Maximum total items to show, including the final +n overflow item. */
|
|
645
|
+
maxCount?: number;
|
|
646
|
+
};
|
|
647
|
+
/**
|
|
648
|
+
* A compact avatar that shows an image, name initials, or one of 32 fallback
|
|
649
|
+
* illustrations in that order.
|
|
650
|
+
*/
|
|
651
|
+
declare function Avatar({ src, content, alt, size, shape, fallbackIndex, className, style, role, 'aria-label': ariaLabel, ...props }: AvatarProps): react.JSX.Element;
|
|
652
|
+
/**
|
|
653
|
+
* A compact overlapping set of Avatar elements. When it contains one Avatar
|
|
654
|
+
* with content, the full content is shown beside it.
|
|
655
|
+
*/
|
|
656
|
+
declare function AvatarGroup({ children, maxCount, className, style, role, ...props }: AvatarGroupProps): react.JSX.Element;
|
|
657
|
+
|
|
658
|
+
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonBar, type ButtonBarAction, type ButtonBarProps, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipStatus, type ChipVariant, type ColumnResizeHandler, type ControlLabelPosition, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, type DescriptionDisplay, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type FieldError, Loading, type LoadingProps, type LoadingSize, Message, type MessageOptions, type MessageProps, type MessageSeverity, Modal, type ModalAction, type ModalProps, type ModalSize, NumberInput, type NumberInputProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioValue, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Skeleton, SkeletonBox, type SkeletonBoxProps, SkeletonCircle, SkeletonLine, type SkeletonProps, type SkeletonSizeProps, SkeletonSquare, type SkeletonVariant, Snackbar, type SnackbarAnchorOrigin, type SnackbarProps, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TablePaginationPosition, type TableProps, TableRow, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize, message };
|