@veeqo/ui 13.22.3 → 14.0.0-beta-1
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/FeatureBanner/FeatureBanner.d.ts +1 -1
- package/dist/components/FeatureBanner/index.d.ts +1 -1
- package/dist/components/FeatureBanner/types.d.ts +2 -10
- package/dist/components/IconGroup/IconGroup.cjs +32 -0
- package/dist/components/IconGroup/IconGroup.cjs.map +1 -0
- package/dist/components/IconGroup/IconGroup.d.ts +3 -0
- package/dist/components/IconGroup/IconGroup.js +26 -0
- package/dist/components/IconGroup/IconGroup.js.map +1 -0
- package/dist/components/IconGroup/IconGroup.module.scss.cjs +9 -0
- package/dist/components/IconGroup/IconGroup.module.scss.cjs.map +1 -0
- package/dist/components/IconGroup/IconGroup.module.scss.js +7 -0
- package/dist/components/IconGroup/IconGroup.module.scss.js.map +1 -0
- package/dist/components/IconGroup/index.d.ts +1 -0
- package/dist/components/IconGroup/types.d.ts +17 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/components/AvatarGroup/AvatarGroup.cjs +0 -32
- package/dist/components/AvatarGroup/AvatarGroup.cjs.map +0 -1
- package/dist/components/AvatarGroup/AvatarGroup.d.ts +0 -3
- package/dist/components/AvatarGroup/AvatarGroup.js +0 -26
- package/dist/components/AvatarGroup/AvatarGroup.js.map +0 -1
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs +0 -9
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs.map +0 -1
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.js +0 -7
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.js.map +0 -1
- package/dist/components/AvatarGroup/index.d.ts +0 -1
- package/dist/components/AvatarGroup/types.d.ts +0 -15
|
@@ -6,6 +6,6 @@ export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.H
|
|
|
6
6
|
title: string;
|
|
7
7
|
contentSlot?: React.ReactNode;
|
|
8
8
|
iconSlot?: React.ReactNode;
|
|
9
|
-
actions?: import("
|
|
9
|
+
actions?: import("..").Action[] | undefined;
|
|
10
10
|
onClose?: (() => void) | undefined;
|
|
11
11
|
} & React.RefAttributes<never>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { FeatureBanner } from './FeatureBanner';
|
|
2
|
-
export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout,
|
|
2
|
+
export type { FeatureBannerProps, FeatureBannerVariant, FeatureBannerSize, FeatureBannerLayout, } from './types';
|
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { WithTokensProps } from '../../hoc/withTokens/withTokens';
|
|
3
|
+
import { Action } from '../Modal';
|
|
3
4
|
/** Visual style of the banner */
|
|
4
5
|
export type FeatureBannerVariant = 'primary' | 'secondary';
|
|
5
6
|
/** Controls the padding density of the banner */
|
|
6
7
|
export type FeatureBannerSize = 'default' | 'sm' | 'xs';
|
|
7
8
|
/** Direction of the banner content flow */
|
|
8
9
|
export type FeatureBannerLayout = 'vertical' | 'horizontal';
|
|
9
|
-
/** Configuration for an action button within the banner */
|
|
10
|
-
export type FeatureBannerAction = {
|
|
11
|
-
/** Button label text */
|
|
12
|
-
label: string;
|
|
13
|
-
/** Click handler for the action */
|
|
14
|
-
onClick: () => void;
|
|
15
|
-
/** Button style — `'primary'` for emphasis, `'default'` for secondary actions */
|
|
16
|
-
variant?: 'primary' | 'default';
|
|
17
|
-
};
|
|
18
10
|
export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
|
|
19
11
|
/** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
|
|
20
12
|
variant?: FeatureBannerVariant;
|
|
@@ -29,7 +21,7 @@ export type FeatureBannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'chi
|
|
|
29
21
|
/** Icon displayed in a themed background container */
|
|
30
22
|
iconSlot?: ReactNode;
|
|
31
23
|
/** Action buttons rendered below the content */
|
|
32
|
-
actions?:
|
|
24
|
+
actions?: Action[];
|
|
33
25
|
/** Close handler. When provided, renders a close button */
|
|
34
26
|
onClose?: () => void;
|
|
35
27
|
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Avatar = require('../Avatar/Avatar.cjs');
|
|
5
|
+
var index = require('../../theme/index.cjs');
|
|
6
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
7
|
+
require('uid/secure');
|
|
8
|
+
var IconGroup_module = require('./IconGroup.module.scss.cjs');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
11
|
+
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
13
|
+
|
|
14
|
+
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
15
|
+
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
16
|
+
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
17
|
+
return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([IconGroup_module.list, className]), "aria-label": ariaLabel, ...listProps },
|
|
18
|
+
hiddenIcons.length > 0 && (React__default.default.createElement("li", { key: "icon-group-item-remaining-count", className: IconGroup_module.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
19
|
+
'--icon-z-index': maxVisible,
|
|
20
|
+
} },
|
|
21
|
+
React__default.default.createElement(Avatar.Avatar, { name: `${hiddenIcons.length}+`, size: compact ? 'md' : 'lg', bgColor: index.theme.colors.secondary.blue.darkest, textColor: index.theme.colors.neutral.grey.lightest, ariaLabel: "Number of additional icons not shown", hasIndicator: hasIndicator }))),
|
|
22
|
+
visibleIcons.map((icon, index$1) => {
|
|
23
|
+
var _a, _b;
|
|
24
|
+
return (React__default.default.createElement("li", { key: `icon-group-item-${icon.name}`, className: IconGroup_module.item, "aria-label": `Icon item of ${icon.name}`, style: {
|
|
25
|
+
'--icon-z-index': visibleIcons.length - index$1,
|
|
26
|
+
} },
|
|
27
|
+
React__default.default.createElement(Avatar.Avatar, { ...icon, hasIndicator: false, size: compact ? 'md' : 'lg', bgColor: (_a = icon === null || icon === undefined ? undefined : icon.bgColor) !== null && _a !== undefined ? _a : index.theme.colors.neutral.grey.light, textColor: (_b = icon === null || icon === undefined ? undefined : icon.textColor) !== null && _b !== undefined ? _b : index.theme.colors.neutral.ink.base })));
|
|
28
|
+
})));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.IconGroup = IconGroup;
|
|
32
|
+
//# sourceMappingURL=IconGroup.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconGroup.cjs","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","buildClassnames","styles","Icon","theme","index"],"mappings":";;;;;;;;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,KAAI;;YAAC,QACjCL,6CACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAEE,gBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAGG,OAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { Avatar } from '../Avatar/Avatar.js';
|
|
3
|
+
import { theme } from '../../theme/index.js';
|
|
4
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
5
|
+
import 'uid/secure';
|
|
6
|
+
import styles from './IconGroup.module.scss.js';
|
|
7
|
+
|
|
8
|
+
const IconGroup = ({ icons, maxVisible = 3, compact = false, ariaLabel = 'Group of icons', hasIndicator = false, className, ...listProps }) => {
|
|
9
|
+
const visibleIcons = icons.slice(0, icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
10
|
+
const hiddenIcons = icons.slice(visibleIcons.length);
|
|
11
|
+
return (React__default.createElement("ul", { className: buildClassnames([styles.list, className]), "aria-label": ariaLabel, ...listProps },
|
|
12
|
+
hiddenIcons.length > 0 && (React__default.createElement("li", { key: "icon-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`, style: {
|
|
13
|
+
'--icon-z-index': maxVisible,
|
|
14
|
+
} },
|
|
15
|
+
React__default.createElement(Avatar, { name: `${hiddenIcons.length}+`, size: compact ? 'md' : 'lg', bgColor: theme.colors.secondary.blue.darkest, textColor: theme.colors.neutral.grey.lightest, ariaLabel: "Number of additional icons not shown", hasIndicator: hasIndicator }))),
|
|
16
|
+
visibleIcons.map((icon, index) => {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
return (React__default.createElement("li", { key: `icon-group-item-${icon.name}`, className: styles.item, "aria-label": `Icon item of ${icon.name}`, style: {
|
|
19
|
+
'--icon-z-index': visibleIcons.length - index,
|
|
20
|
+
} },
|
|
21
|
+
React__default.createElement(Avatar, { ...icon, hasIndicator: false, size: compact ? 'md' : 'lg', bgColor: (_a = icon === null || icon === undefined ? undefined : icon.bgColor) !== null && _a !== undefined ? _a : theme.colors.neutral.grey.light, textColor: (_b = icon === null || icon === undefined ? undefined : icon.textColor) !== null && _b !== undefined ? _b : theme.colors.neutral.ink.base })));
|
|
22
|
+
})));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { IconGroup };
|
|
26
|
+
//# sourceMappingURL=IconGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconGroup.js","sources":["../../../src/components/IconGroup/IconGroup.tsx"],"sourcesContent":["import React from 'react';\n\n// Renamed existing Avatar component to Icon for code readability\nimport { Avatar as Icon } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { IconGroupProps } from './types';\n\nimport styles from './IconGroup.module.scss';\n\nexport const IconGroup = ({\n icons,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of icons',\n hasIndicator = false,\n className,\n ...listProps\n}: IconGroupProps) => {\n const visibleIcons = icons.slice(\n 0,\n icons.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenIcons = icons.slice(visibleIcons.length);\n\n return (\n <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n {hiddenIcons.length > 0 && (\n <li\n key=\"icon-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenIcons.length} additional ${hiddenIcons.length === 1 ? 'item' : 'items'}`}\n style={\n {\n '--icon-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Icon\n name={`${hiddenIcons.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Number of additional icons not shown\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleIcons.map((icon, index) => (\n <li\n key={`icon-group-item-${icon.name}`}\n className={styles.item}\n aria-label={`Icon item of ${icon.name}`}\n style={\n {\n '--icon-z-index': visibleIcons.length - index,\n } as React.CSSProperties\n }\n >\n <Icon\n {...icon}\n hasIndicator={false}\n size={compact ? 'md' : 'lg'}\n bgColor={icon?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={icon?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","Icon"],"mappings":";;;;;;;AAUO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,gBAAgB,EAC5B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACG,KAAI;AACnB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAC9B,CAAC,EACD,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACrE;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC;AAEpD,IAAA,QACEA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAG,EAAA,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAAC,MAAI,EACH,EAAA,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAG,CAAA,CAAA,EAC9B,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;;YAAC,QACjCD,qCACE,GAAG,EAAE,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,EACnC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EACvC,KAAK,EACH;AACE,oBAAA,gBAAgB,EAAE,YAAY,CAAC,MAAM,GAAG,KAAK;AACvB,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EAAA,GACC,IAAI,EACR,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,SAAS,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC3D,CAAA,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._list_1ygvx_1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n._item_1ygvx_10 {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--icon-z-index, 1);\n}\n._item_1ygvx_10:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n}");
|
|
6
|
+
var styles = {"list":"_list_1ygvx_1","item":"_item_1ygvx_10"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=IconGroup.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconGroup.module.scss.cjs","sources":["../../../src/components/IconGroup/IconGroup.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.item {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--icon-z-index, 1);\n\n &:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._list_1ygvx_1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n._item_1ygvx_10 {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--icon-z-index, 1);\n}\n._item_1ygvx_10:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n}");
|
|
4
|
+
var styles = {"list":"_list_1ygvx_1","item":"_item_1ygvx_10"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=IconGroup.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconGroup.module.scss.js","sources":["../../../src/components/IconGroup/IconGroup.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.item {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--icon-z-index, 1);\n\n &:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { IconGroup } from './IconGroup';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AvatarProps } from '../Avatar/types';
|
|
3
|
+
/** Icon props - based on Avatar component props */
|
|
4
|
+
export type IconProps = Omit<AvatarProps, 'hasIndicator'>;
|
|
5
|
+
/** IconGroup properties. */
|
|
6
|
+
export type IconGroupProps = React.HTMLAttributes<HTMLUListElement> & {
|
|
7
|
+
/** List of icons to display */
|
|
8
|
+
icons: IconProps[];
|
|
9
|
+
/** Number of icons to show before collapsing. 3 is the default and maximum */
|
|
10
|
+
maxVisible?: number;
|
|
11
|
+
/** Switches all icon sizes from lg to md */
|
|
12
|
+
compact?: boolean;
|
|
13
|
+
/** Accessible label for the icon group list */
|
|
14
|
+
ariaLabel?: string;
|
|
15
|
+
/** Controls the indicator on the overflow icon */
|
|
16
|
+
hasIndicator?: boolean;
|
|
17
|
+
};
|
|
@@ -5,7 +5,7 @@ export { MiniAlert } from './Alerts/MiniAlert';
|
|
|
5
5
|
export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
|
|
6
6
|
export { AnimatedDropdown } from './AnimatedDropdown';
|
|
7
7
|
export { Avatar } from './Avatar';
|
|
8
|
-
export {
|
|
8
|
+
export { IconGroup } from './IconGroup';
|
|
9
9
|
export { Badge } from './Badge';
|
|
10
10
|
export { Banner } from './Banner';
|
|
11
11
|
export { BaseContainer } from './BaseContainer';
|
package/dist/index.cjs
CHANGED
|
@@ -8,7 +8,7 @@ var Anchor = require('./components/Anchor/Anchor.cjs');
|
|
|
8
8
|
var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
|
|
9
9
|
var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
|
|
10
10
|
var Avatar = require('./components/Avatar/Avatar.cjs');
|
|
11
|
-
var
|
|
11
|
+
var IconGroup = require('./components/IconGroup/IconGroup.cjs');
|
|
12
12
|
var Badge = require('./components/Badge/Badge.cjs');
|
|
13
13
|
var Banner = require('./components/Banner/Banner.cjs');
|
|
14
14
|
var BaseContainer = require('./components/BaseContainer/BaseContainer.cjs');
|
|
@@ -359,7 +359,7 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
|
|
|
359
359
|
exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
|
|
360
360
|
exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
|
|
361
361
|
exports.Avatar = Avatar.Avatar;
|
|
362
|
-
exports.
|
|
362
|
+
exports.IconGroup = IconGroup.IconGroup;
|
|
363
363
|
exports.Badge = Badge.Badge;
|
|
364
364
|
exports.Banner = Banner.Banner;
|
|
365
365
|
exports.BaseContainer = BaseContainer.BaseContainer;
|
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export { Anchor } from './components/Anchor/Anchor.js';
|
|
|
6
6
|
export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix } from './components/Anchor/utils/urlUtils.js';
|
|
7
7
|
export { AnimatedDropdown } from './components/AnimatedDropdown/AnimatedDropdown.js';
|
|
8
8
|
export { Avatar } from './components/Avatar/Avatar.js';
|
|
9
|
-
export {
|
|
9
|
+
export { IconGroup } from './components/IconGroup/IconGroup.js';
|
|
10
10
|
export { Badge } from './components/Badge/Badge.js';
|
|
11
11
|
export { Banner } from './components/Banner/Banner.js';
|
|
12
12
|
export { BaseContainer } from './components/BaseContainer/BaseContainer.js';
|
package/package.json
CHANGED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var Avatar = require('../Avatar/Avatar.cjs');
|
|
5
|
-
var index = require('../../theme/index.cjs');
|
|
6
|
-
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
7
|
-
require('uid/secure');
|
|
8
|
-
var AvatarGroup_module = require('./AvatarGroup.module.scss.cjs');
|
|
9
|
-
|
|
10
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
11
|
-
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
13
|
-
|
|
14
|
-
const AvatarGroup = ({ avatars, maxVisible = 3, compact = false, ariaLabel = 'Group of avatars', hasIndicator = false, className, ...listProps }) => {
|
|
15
|
-
const visibleAvatars = avatars.slice(0, avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
16
|
-
const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));
|
|
17
|
-
return (React__default.default.createElement("ul", { className: buildClassnames.buildClassnames([AvatarGroup_module.list, className]), "aria-label": ariaLabel, ...listProps },
|
|
18
|
-
hiddenAvatars.length > 0 && (React__default.default.createElement("li", { key: "avatar-group-item-remaining-count", className: AvatarGroup_module.item, "aria-label": `${hiddenAvatars.length} additional items`, style: {
|
|
19
|
-
'--avatar-z-index': maxVisible,
|
|
20
|
-
} },
|
|
21
|
-
React__default.default.createElement(Avatar.Avatar, { name: `${hiddenAvatars.length}+`, size: compact ? 'md' : 'lg', bgColor: index.theme.colors.secondary.blue.darkest, textColor: index.theme.colors.neutral.grey.lightest, ariaLabel: "Avatar for remaining count", hasIndicator: hasIndicator }))),
|
|
22
|
-
visibleAvatars.map((avatar, index$1) => {
|
|
23
|
-
var _a, _b;
|
|
24
|
-
return (React__default.default.createElement("li", { key: `avatar-group-item-${avatar.name}`, className: AvatarGroup_module.item, "aria-label": `Avatar item of ${avatar.name}`, style: {
|
|
25
|
-
'--avatar-z-index': visibleAvatars.length - index$1,
|
|
26
|
-
} },
|
|
27
|
-
React__default.default.createElement(Avatar.Avatar, { ...avatar, size: compact ? 'md' : 'lg', bgColor: (_a = avatar === null || avatar === undefined ? undefined : avatar.bgColor) !== null && _a !== undefined ? _a : index.theme.colors.neutral.grey.light, textColor: (_b = avatar === null || avatar === undefined ? undefined : avatar.textColor) !== null && _b !== undefined ? _b : index.theme.colors.neutral.ink.base })));
|
|
28
|
-
})));
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
exports.AvatarGroup = AvatarGroup;
|
|
32
|
-
//# sourceMappingURL=AvatarGroup.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { AvatarGroupProps } from './types';\n\nimport styles from './AvatarGroup.module.scss';\n\nexport const AvatarGroup = ({\n avatars,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of avatars',\n hasIndicator = false,\n className,\n ...listProps\n}: AvatarGroupProps) => {\n const visibleAvatars = avatars.slice(\n 0,\n avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));\n\n return (\n <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n {hiddenAvatars.length > 0 && (\n <li\n key=\"avatar-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenAvatars.length} additional items`}\n style={\n {\n '--avatar-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Avatar\n name={`${hiddenAvatars.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Avatar for remaining count\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleAvatars.map((avatar, index) => (\n <li\n key={`avatar-group-item-${avatar.name}`}\n className={styles.item}\n aria-label={`Avatar item of ${avatar.name}`}\n style={\n {\n '--avatar-z-index': visibleAvatars.length - index,\n } as React.CSSProperties\n }\n >\n <Avatar\n {...avatar}\n size={compact ? 'md' : 'lg'}\n bgColor={avatar?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={avatar?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React","buildClassnames","styles","Avatar","theme","index"],"mappings":";;;;;;;;;;;;;AASO,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,kBAAkB,EAC9B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACK,KAAI;AACrB,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAClC,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACvE;AACD,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAElF,IAAA,QACEA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,kBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;QAC3F,aAAa,CAAC,MAAM,GAAG,CAAC,KACvBF,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,mCAAmC,EACvC,SAAS,EAAEE,kBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAG,EAAA,aAAa,CAAC,MAAM,CAAA,iBAAA,CAAmB,EACtD,KAAK,EACH;AACE,gBAAA,kBAAkB,EAAE,UAAU;AACR,aAAA,EAAA;YAG1BF,sBAAC,CAAA,aAAA,CAAAG,aAAM,EACL,EAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,MAAM,CAAG,CAAA,CAAA,EAChC,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAEC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,4BAA4B,EACtC,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAEC,OAAK,KAAI;;YAAC,QACrCL,6CACE,GAAG,EAAE,qBAAqB,MAAM,CAAC,IAAI,CAAA,CAAE,EACvC,SAAS,EAAEE,kBAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAkB,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,EAC3C,KAAK,EACH;AACE,oBAAA,kBAAkB,EAAE,cAAc,CAAC,MAAM,GAAGG,OAAK;AAC3B,iBAAA,EAAA;AAG1B,gBAAAL,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EAAA,GACD,MAAM,EACV,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAC3D,SAAS,EAAE,CAAA,EAAA,GAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC7D,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { Avatar } from '../Avatar/Avatar.js';
|
|
3
|
-
import { theme } from '../../theme/index.js';
|
|
4
|
-
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
5
|
-
import 'uid/secure';
|
|
6
|
-
import styles from './AvatarGroup.module.scss.js';
|
|
7
|
-
|
|
8
|
-
const AvatarGroup = ({ avatars, maxVisible = 3, compact = false, ariaLabel = 'Group of avatars', hasIndicator = false, className, ...listProps }) => {
|
|
9
|
-
const visibleAvatars = avatars.slice(0, avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible);
|
|
10
|
-
const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));
|
|
11
|
-
return (React__default.createElement("ul", { className: buildClassnames([styles.list, className]), "aria-label": ariaLabel, ...listProps },
|
|
12
|
-
hiddenAvatars.length > 0 && (React__default.createElement("li", { key: "avatar-group-item-remaining-count", className: styles.item, "aria-label": `${hiddenAvatars.length} additional items`, style: {
|
|
13
|
-
'--avatar-z-index': maxVisible,
|
|
14
|
-
} },
|
|
15
|
-
React__default.createElement(Avatar, { name: `${hiddenAvatars.length}+`, size: compact ? 'md' : 'lg', bgColor: theme.colors.secondary.blue.darkest, textColor: theme.colors.neutral.grey.lightest, ariaLabel: "Avatar for remaining count", hasIndicator: hasIndicator }))),
|
|
16
|
-
visibleAvatars.map((avatar, index) => {
|
|
17
|
-
var _a, _b;
|
|
18
|
-
return (React__default.createElement("li", { key: `avatar-group-item-${avatar.name}`, className: styles.item, "aria-label": `Avatar item of ${avatar.name}`, style: {
|
|
19
|
-
'--avatar-z-index': visibleAvatars.length - index,
|
|
20
|
-
} },
|
|
21
|
-
React__default.createElement(Avatar, { ...avatar, size: compact ? 'md' : 'lg', bgColor: (_a = avatar === null || avatar === undefined ? undefined : avatar.bgColor) !== null && _a !== undefined ? _a : theme.colors.neutral.grey.light, textColor: (_b = avatar === null || avatar === undefined ? undefined : avatar.textColor) !== null && _b !== undefined ? _b : theme.colors.neutral.ink.base })));
|
|
22
|
-
})));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export { AvatarGroup };
|
|
26
|
-
//# sourceMappingURL=AvatarGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport { AvatarGroupProps } from './types';\n\nimport styles from './AvatarGroup.module.scss';\n\nexport const AvatarGroup = ({\n avatars,\n maxVisible = 3,\n compact = false,\n ariaLabel = 'Group of avatars',\n hasIndicator = false,\n className,\n ...listProps\n}: AvatarGroupProps) => {\n const visibleAvatars = avatars.slice(\n 0,\n avatars.length > maxVisible ? Math.max(0, maxVisible - 1) : maxVisible,\n );\n const hiddenAvatars = avatars.filter((avatar) => !visibleAvatars.includes(avatar));\n\n return (\n <ul className={buildClassnames([styles.list, className])} aria-label={ariaLabel} {...listProps}>\n {hiddenAvatars.length > 0 && (\n <li\n key=\"avatar-group-item-remaining-count\"\n className={styles.item}\n aria-label={`${hiddenAvatars.length} additional items`}\n style={\n {\n '--avatar-z-index': maxVisible,\n } as React.CSSProperties\n }\n >\n <Avatar\n name={`${hiddenAvatars.length}+`}\n size={compact ? 'md' : 'lg'}\n bgColor={theme.colors.secondary.blue.darkest}\n textColor={theme.colors.neutral.grey.lightest}\n ariaLabel=\"Avatar for remaining count\"\n hasIndicator={hasIndicator}\n />\n </li>\n )}\n {visibleAvatars.map((avatar, index) => (\n <li\n key={`avatar-group-item-${avatar.name}`}\n className={styles.item}\n aria-label={`Avatar item of ${avatar.name}`}\n style={\n {\n '--avatar-z-index': visibleAvatars.length - index,\n } as React.CSSProperties\n }\n >\n <Avatar\n {...avatar}\n size={compact ? 'md' : 'lg'}\n bgColor={avatar?.bgColor ?? theme.colors.neutral.grey.light}\n textColor={avatar?.textColor ?? theme.colors.neutral.ink.base}\n />\n </li>\n ))}\n </ul>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;AASO,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,UAAU,GAAG,CAAC,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,kBAAkB,EAC9B,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,GAAG,SAAS,EACK,KAAI;AACrB,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAClC,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,GAAG,UAAU,CACvE;AACD,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAElF,IAAA,QACEA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAc,YAAA,EAAA,SAAS,KAAM,SAAS,EAAA;QAC3F,aAAa,CAAC,MAAM,GAAG,CAAC,KACvBA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAC,mCAAmC,EACvC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAG,EAAA,aAAa,CAAC,MAAM,CAAA,iBAAA,CAAmB,EACtD,KAAK,EACH;AACE,gBAAA,kBAAkB,EAAE,UAAU;AACR,aAAA,EAAA;YAG1BA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,MAAM,CAAG,CAAA,CAAA,EAChC,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAC5C,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAC7C,SAAS,EAAC,4BAA4B,EACtC,YAAY,EAAE,YAAY,EAC1B,CAAA,CACC,CACN;QACA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;;YAAC,QACrCA,qCACE,GAAG,EAAE,qBAAqB,MAAM,CAAC,IAAI,CAAA,CAAE,EACvC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,YAAA,EACV,CAAkB,eAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,EAC3C,KAAK,EACH;AACE,oBAAA,kBAAkB,EAAE,cAAc,CAAC,MAAM,GAAG,KAAK;AAC3B,iBAAA,EAAA;AAG1B,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GACD,MAAM,EACV,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3B,OAAO,EAAE,CAAA,EAAA,GAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,SAAA,GAAA,SAAA,GAAA,MAAM,CAAE,OAAO,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAC3D,SAAS,EAAE,CAAA,EAAA,GAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,SAAA,GAAA,SAAA,GAAN,MAAM,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC7D,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
-
|
|
5
|
-
___$insertStyle("._list_1tlva_1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n._item_1tlva_10 {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--avatar-z-index, 1);\n}\n._item_1tlva_10:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n}");
|
|
6
|
-
var styles = {"list":"_list_1tlva_1","item":"_item_1tlva_10"};
|
|
7
|
-
|
|
8
|
-
module.exports = styles;
|
|
9
|
-
//# sourceMappingURL=AvatarGroup.module.scss.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.module.scss.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.item {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--avatar-z-index, 1);\n\n &:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,uVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
-
|
|
3
|
-
insertStyle("._list_1tlva_1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n._item_1tlva_10 {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--avatar-z-index, 1);\n}\n._item_1tlva_10:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n}");
|
|
4
|
-
var styles = {"list":"_list_1tlva_1","item":"_item_1tlva_10"};
|
|
5
|
-
|
|
6
|
-
export { styles as default };
|
|
7
|
-
//# sourceMappingURL=AvatarGroup.module.scss.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.module.scss.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.item {\n position: relative;\n border-radius: var(--radius-full);\n z-index: var(--avatar-z-index, 1);\n\n &:not(:first-child) {\n margin-left: calc(var(--sizes-3) * -1);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,uVAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,MAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { AvatarGroup } from './AvatarGroup';
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { AvatarProps } from '../Avatar/types';
|
|
3
|
-
/** AvatarGroup properties. */
|
|
4
|
-
export type AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {
|
|
5
|
-
/** List of avatars to display */
|
|
6
|
-
avatars: Omit<AvatarProps, 'hasIndicator'>[];
|
|
7
|
-
/** Number of avatars to show before collapsing. Default is 3 */
|
|
8
|
-
maxVisible?: number;
|
|
9
|
-
/** Switches all avatars from lg to md size */
|
|
10
|
-
compact?: boolean;
|
|
11
|
-
/** Accessible label for the avatar group list */
|
|
12
|
-
ariaLabel?: string;
|
|
13
|
-
/** Controls the alert indicator on the overflow (“remaining count”) avatar */
|
|
14
|
-
hasIndicator?: boolean;
|
|
15
|
-
};
|