@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.
Files changed (29) hide show
  1. package/dist/components/FeatureBanner/FeatureBanner.d.ts +1 -1
  2. package/dist/components/FeatureBanner/index.d.ts +1 -1
  3. package/dist/components/FeatureBanner/types.d.ts +2 -10
  4. package/dist/components/IconGroup/IconGroup.cjs +32 -0
  5. package/dist/components/IconGroup/IconGroup.cjs.map +1 -0
  6. package/dist/components/IconGroup/IconGroup.d.ts +3 -0
  7. package/dist/components/IconGroup/IconGroup.js +26 -0
  8. package/dist/components/IconGroup/IconGroup.js.map +1 -0
  9. package/dist/components/IconGroup/IconGroup.module.scss.cjs +9 -0
  10. package/dist/components/IconGroup/IconGroup.module.scss.cjs.map +1 -0
  11. package/dist/components/IconGroup/IconGroup.module.scss.js +7 -0
  12. package/dist/components/IconGroup/IconGroup.module.scss.js.map +1 -0
  13. package/dist/components/IconGroup/index.d.ts +1 -0
  14. package/dist/components/IconGroup/types.d.ts +17 -0
  15. package/dist/components/index.d.ts +1 -1
  16. package/dist/index.cjs +2 -2
  17. package/dist/index.js +1 -1
  18. package/package.json +1 -1
  19. package/dist/components/AvatarGroup/AvatarGroup.cjs +0 -32
  20. package/dist/components/AvatarGroup/AvatarGroup.cjs.map +0 -1
  21. package/dist/components/AvatarGroup/AvatarGroup.d.ts +0 -3
  22. package/dist/components/AvatarGroup/AvatarGroup.js +0 -26
  23. package/dist/components/AvatarGroup/AvatarGroup.js.map +0 -1
  24. package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs +0 -9
  25. package/dist/components/AvatarGroup/AvatarGroup.module.scss.cjs.map +0 -1
  26. package/dist/components/AvatarGroup/AvatarGroup.module.scss.js +0 -7
  27. package/dist/components/AvatarGroup/AvatarGroup.module.scss.js.map +0 -1
  28. package/dist/components/AvatarGroup/index.d.ts +0 -1
  29. 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("./types").FeatureBannerAction[] | undefined;
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, FeatureBannerAction } from './types';
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?: FeatureBannerAction[];
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,3 @@
1
+ import React from 'react';
2
+ import { IconGroupProps } from './types';
3
+ export declare const IconGroup: ({ icons, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: IconGroupProps) => React.JSX.Element;
@@ -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 { AvatarGroup } from './AvatarGroup';
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 AvatarGroup = require('./components/AvatarGroup/AvatarGroup.cjs');
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.AvatarGroup = AvatarGroup.AvatarGroup;
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 { AvatarGroup } from './components/AvatarGroup/AvatarGroup.js';
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "13.22.3",
3
+ "version": "14.0.0-beta-1",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",
@@ -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,3 +0,0 @@
1
- import React from 'react';
2
- import { AvatarGroupProps } from './types';
3
- export declare const AvatarGroup: ({ avatars, maxVisible, compact, ariaLabel, hasIndicator, className, ...listProps }: AvatarGroupProps) => React.JSX.Element;
@@ -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
- };