@veeqo/ui 13.22.1 → 13.22.2
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/AvatarGroup/AvatarGroup.cjs.map +1 -1
- package/dist/components/AvatarGroup/AvatarGroup.d.ts +1 -9
- package/dist/components/AvatarGroup/AvatarGroup.js.map +1 -1
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs +2 -2
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs.map +1 -1
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.js +2 -2
- package/dist/components/AvatarGroup/AvatarGroup.module.scss.js.map +1 -1
- package/dist/components/AvatarGroup/types.d.ts +15 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.cjs","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport {
|
|
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,11 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
type AvatarGroupProps = React.HTMLAttributes<HTMLUListElement> & {
|
|
4
|
-
avatars: Omit<AvatarProps, 'hasIndicator'>[];
|
|
5
|
-
maxVisible?: number;
|
|
6
|
-
compact?: boolean;
|
|
7
|
-
ariaLabel?: string;
|
|
8
|
-
hasIndicator?: boolean;
|
|
9
|
-
};
|
|
2
|
+
import { AvatarGroupProps } from './types';
|
|
10
3
|
export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: AvatarGroupProps) => React.JSX.Element;
|
|
11
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroup.js","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Avatar } from '../Avatar';\nimport { theme } from '../../theme';\nimport {
|
|
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;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"list":"
|
|
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
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=AvatarGroup.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"list":"
|
|
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
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=AvatarGroup.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
+
};
|