@veeqo/ui 16.2.0 → 16.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/Avatar.cjs +9 -2
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.d.ts +8 -1
- package/dist/components/Avatar/Avatar.js +9 -2
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.module.scss.cjs +2 -2
- package/dist/components/Avatar/Avatar.module.scss.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.module.scss.js +2 -2
- package/dist/components/Avatar/Avatar.module.scss.js.map +1 -1
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Avatar/types.cjs +10 -0
- package/dist/components/Avatar/types.cjs.map +1 -0
- package/dist/components/Avatar/types.d.ts +8 -0
- package/dist/components/Avatar/types.js +10 -0
- package/dist/components/Avatar/types.js.map +1 -0
- package/dist/components/IconGroup/IconGroup.cjs +1 -0
- package/dist/components/IconGroup/IconGroup.cjs.map +1 -1
- package/dist/components/IconGroup/IconGroup.js +1 -0
- package/dist/components/IconGroup/IconGroup.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/index.cjs +5 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,12 +20,19 @@ const textVariantMapping = {
|
|
|
20
20
|
xl: 'headingSmall',
|
|
21
21
|
xxl: 'headingMedium',
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Avatar displays a user's initials, photo, or an icon inside a circular frame,
|
|
25
|
+
* with an optional error indicator.
|
|
26
|
+
*
|
|
27
|
+
* Initials are derived from `name`. Provide `imageUrl` to render a photo or
|
|
28
|
+
* `iconSlot` to render an icon instead — otherwise the initials are shown.
|
|
29
|
+
*/
|
|
30
|
+
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
|
|
24
31
|
var _a, _b;
|
|
25
32
|
const textVariant = textVariantMapping[size];
|
|
26
33
|
// Check if name contains any letters if so we show initials from text.
|
|
27
34
|
const hasLetters = /[a-zA-Z]/.test(name || '');
|
|
28
|
-
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
|
|
35
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", ...rest, className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
|
|
29
36
|
...style,
|
|
30
37
|
...assignCssVars.assignCssVars({
|
|
31
38
|
avatarBgColor: iconSlot ? index.theme.colors.neutral.grey.lightest : bgColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps, AvatarSize } from './types';\nimport { Text, type TextVariant } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<keyof typeof AvatarSize, TextVariant> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\n/**\n * Avatar displays a user's initials, photo, or an icon inside a circular frame,\n * with an optional error indicator.\n *\n * Initials are derived from `name`. Provide `imageUrl` to render a photo or\n * `iconSlot` to render an icon instead — otherwise the initials are shown.\n */\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n ...rest\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n // Check if name contains any letters if so we show initials from text.\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n {...rest}\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalFillIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalFillIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAiD;AACvE,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,aAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACK,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EAAA,GACnB,IAAI,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,GAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,iCAAgB,EAAA,EACf,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AvatarProps } from './types';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Avatar displays a user's initials, photo, or an icon inside a circular frame,
|
|
5
|
+
* with an optional error indicator.
|
|
6
|
+
*
|
|
7
|
+
* Initials are derived from `name`. Provide `imageUrl` to render a photo or
|
|
8
|
+
* `iconSlot` to render an icon instead — otherwise the initials are shown.
|
|
9
|
+
*/
|
|
10
|
+
export declare const Avatar: ({ size, name, bgColor, textColor, iconSlot, imageUrl, hasIndicator, ariaLabel, className, style, ...rest }: AvatarProps) => React.JSX.Element;
|
|
@@ -14,12 +14,19 @@ const textVariantMapping = {
|
|
|
14
14
|
xl: 'headingSmall',
|
|
15
15
|
xxl: 'headingMedium',
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
/**
|
|
18
|
+
* Avatar displays a user's initials, photo, or an icon inside a circular frame,
|
|
19
|
+
* with an optional error indicator.
|
|
20
|
+
*
|
|
21
|
+
* Initials are derived from `name`. Provide `imageUrl` to render a photo or
|
|
22
|
+
* `iconSlot` to render an icon instead — otherwise the initials are shown.
|
|
23
|
+
*/
|
|
24
|
+
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, style, ...rest }) => {
|
|
18
25
|
var _a, _b;
|
|
19
26
|
const textVariant = textVariantMapping[size];
|
|
20
27
|
// Check if name contains any letters if so we show initials from text.
|
|
21
28
|
const hasLetters = /[a-zA-Z]/.test(name || '');
|
|
22
|
-
return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
|
|
29
|
+
return (React__default.createElement(FlexRow, { justifyContent: "center", ...rest, className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
|
|
23
30
|
...style,
|
|
24
31
|
...assignCssVars({
|
|
25
32
|
avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { CriticalFillIcon } from '../../icons';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps, AvatarSize } from './types';\nimport { Text, type TextVariant } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<keyof typeof AvatarSize, TextVariant> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\n/**\n * Avatar displays a user's initials, photo, or an icon inside a circular frame,\n * with an optional error indicator.\n *\n * Initials are derived from `name`. Provide `imageUrl` to render a photo or\n * `iconSlot` to render an icon instead — otherwise the initials are shown.\n */\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n style,\n ...rest\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n // Check if name contains any letters if so we show initials from text.\n const hasLetters = /[a-zA-Z]/.test(name || '');\n\n return (\n <FlexRow\n justifyContent=\"center\"\n {...rest}\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...style,\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalFillIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {!hasLetters ? name?.toUpperCase() : name?.toUpperCase()?.match(/\\b\\w/g)?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAiD;AACvE,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,aAAa,IAAI,CAAA,CAAE,EAC/B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACK,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;;IAG5C,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;AAE9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EAAA,GACnB,IAAI,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,KAAK;AACR,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EAAA,YAAA,EACP,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,CAAI;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;AACtB,QAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,CAAC,UAAU,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,WAAW,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAChF,CACR,CACO;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"avatar":"
|
|
5
|
+
___$insertStyle("._avatar_1yl95_1 {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1yl95_11 {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n._avatarText_1yl95_18 {\n color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n._indicatorIcon_1yl95_22 {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, 16px));\n right: calc(-0.3 * var(--indicator-icon-size, 16px));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1yl95_31 {\n --avatar-size: var(--sizes-md);\n --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1yl95_36 {\n --avatar-size: var(--sizes-lg);\n --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1yl95_41 {\n --avatar-size: var(--sizes-xl);\n --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1yl95_46 {\n --avatar-size: var(--sizes-xxl);\n --indicator-icon-size: var(--sizes-lg);\n}");
|
|
6
|
+
var styles = {"avatar":"_avatar_1yl95_1","avatarImage":"_avatarImage_1yl95_11","avatarText":"_avatarText_1yl95_18","indicatorIcon":"_indicatorIcon_1yl95_22","md-size":"_md-size_1yl95_31","lg-size":"_lg-size_1yl95_36","xl-size":"_xl-size_1yl95_41","xxl-size":"_xxl-size_1yl95_46"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Avatar.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.module.scss.cjs","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n.avatarText {\n color: var(--avatar-text-color,
|
|
1
|
+
{"version":3,"file":"Avatar.module.scss.cjs","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n.avatarText {\n color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n.indicatorIcon {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, 16px));\n right: calc(-0.3 * var(--indicator-icon-size, 16px));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n --avatar-size: var(--sizes-md);\n --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n --avatar-size: var(--sizes-lg);\n --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n --avatar-size: var(--sizes-xl);\n --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n --avatar-size: var(--sizes-xxl);\n --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,00CAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"avatar":"
|
|
3
|
+
insertStyle("._avatar_1yl95_1 {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n._avatarImage_1yl95_11 {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n._avatarText_1yl95_18 {\n color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n._indicatorIcon_1yl95_22 {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, 16px));\n right: calc(-0.3 * var(--indicator-icon-size, 16px));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n._md-size_1yl95_31 {\n --avatar-size: var(--sizes-md);\n --indicator-icon-size: var(--sizes-3);\n}\n\n._lg-size_1yl95_36 {\n --avatar-size: var(--sizes-lg);\n --indicator-icon-size: var(--sizes-base);\n}\n\n._xl-size_1yl95_41 {\n --avatar-size: var(--sizes-xl);\n --indicator-icon-size: var(--sizes-7);\n}\n\n._xxl-size_1yl95_46 {\n --avatar-size: var(--sizes-xxl);\n --indicator-icon-size: var(--sizes-lg);\n}");
|
|
4
|
+
var styles = {"avatar":"_avatar_1yl95_1","avatarImage":"_avatarImage_1yl95_11","avatarText":"_avatarText_1yl95_18","indicatorIcon":"_indicatorIcon_1yl95_22","md-size":"_md-size_1yl95_31","lg-size":"_lg-size_1yl95_36","xl-size":"_xl-size_1yl95_41","xxl-size":"_xxl-size_1yl95_46"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Avatar.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.module.scss.js","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n.avatarText {\n color: var(--avatar-text-color,
|
|
1
|
+
{"version":3,"file":"Avatar.module.scss.js","sources":["../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n border: var(--sizes-line) solid var(--colors-neutral-grey-base);\n border-radius: var(--radius-full);\n background-size: cover;\n background-color: var(--avatar-bg-color, var(--colors-secondary-blue-base));\n position: relative;\n width: var(--avatar-size, var(--sizes-lg));\n height: var(--avatar-size, var(--sizes-lg));\n}\n\n.avatarImage {\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n object-fit: cover;\n}\n\n.avatarText {\n color: var(--avatar-text-color, var(--colors-neutral-white)) !important;\n}\n\n.indicatorIcon {\n position: absolute;\n /* Calculate offset as roughly 30% of icon size, with fallback */\n top: calc(-0.3 * var(--indicator-icon-size, 16px));\n right: calc(-0.3 * var(--indicator-icon-size, 16px));\n width: var(--indicator-icon-size, var(--sizes-lg));\n height: var(--indicator-icon-size, var(--sizes-lg));\n}\n\n.md-size {\n --avatar-size: var(--sizes-md);\n --indicator-icon-size: var(--sizes-3);\n}\n\n.lg-size {\n --avatar-size: var(--sizes-lg);\n --indicator-icon-size: var(--sizes-base);\n}\n\n.xl-size {\n --avatar-size: var(--sizes-xl);\n --indicator-icon-size: var(--sizes-7);\n}\n\n.xxl-size {\n --avatar-size: var(--sizes-xxl);\n --indicator-icon-size: var(--sizes-lg);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,00CAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,uBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.AvatarSize = void 0;
|
|
4
|
+
(function (AvatarSize) {
|
|
5
|
+
AvatarSize["md"] = "md";
|
|
6
|
+
AvatarSize["lg"] = "lg";
|
|
7
|
+
AvatarSize["xl"] = "xl";
|
|
8
|
+
AvatarSize["xxl"] = "xxl";
|
|
9
|
+
})(exports.AvatarSize || (exports.AvatarSize = {}));
|
|
10
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/Avatar/types.ts"],"sourcesContent":["export enum AvatarSize {\n md = 'md',\n lg = 'lg',\n xl = 'xl',\n xxl = 'xxl',\n}\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Full name used to derive initials and the default accessible label. */\n name: string;\n /** Overall dimension of the avatar. @default 'lg' */\n size?: keyof typeof AvatarSize;\n /** Background colour of the circle. Ignored when `iconSlot` is set. */\n bgColor?: string;\n /** Colour of the initials text. */\n textColor?: string;\n /** Icon rendered in place of initials (e.g. a channel or brand mark). */\n iconSlot?: React.ReactNode;\n /** Image URL rendered in place of initials. */\n imageUrl?: string;\n /** Accessible label for the avatar. @default `Avatar of ${name}` */\n ariaLabel?: string;\n /** Shows a red error indicator on the avatar. @default false */\n hasIndicator?: boolean;\n};\n"],"names":["AvatarSize"],"mappings":";;AAAYA;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EALWA,kBAAU,KAAVA,kBAAU,GAAA,EAAA,CAAA,CAAA;;"}
|
|
@@ -6,12 +6,20 @@ export declare enum AvatarSize {
|
|
|
6
6
|
xxl = "xxl"
|
|
7
7
|
}
|
|
8
8
|
export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
9
|
+
/** Full name used to derive initials and the default accessible label. */
|
|
9
10
|
name: string;
|
|
11
|
+
/** Overall dimension of the avatar. @default 'lg' */
|
|
10
12
|
size?: keyof typeof AvatarSize;
|
|
13
|
+
/** Background colour of the circle. Ignored when `iconSlot` is set. */
|
|
11
14
|
bgColor?: string;
|
|
15
|
+
/** Colour of the initials text. */
|
|
12
16
|
textColor?: string;
|
|
17
|
+
/** Icon rendered in place of initials (e.g. a channel or brand mark). */
|
|
13
18
|
iconSlot?: React.ReactNode;
|
|
19
|
+
/** Image URL rendered in place of initials. */
|
|
14
20
|
imageUrl?: string;
|
|
21
|
+
/** Accessible label for the avatar. @default `Avatar of ${name}` */
|
|
15
22
|
ariaLabel?: string;
|
|
23
|
+
/** Shows a red error indicator on the avatar. @default false */
|
|
16
24
|
hasIndicator?: boolean;
|
|
17
25
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Avatar/types.ts"],"sourcesContent":["export enum AvatarSize {\n md = 'md',\n lg = 'lg',\n xl = 'xl',\n xxl = 'xxl',\n}\n\nexport type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {\n /** Full name used to derive initials and the default accessible label. */\n name: string;\n /** Overall dimension of the avatar. @default 'lg' */\n size?: keyof typeof AvatarSize;\n /** Background colour of the circle. Ignored when `iconSlot` is set. */\n bgColor?: string;\n /** Colour of the initials text. */\n textColor?: string;\n /** Icon rendered in place of initials (e.g. a channel or brand mark). */\n iconSlot?: React.ReactNode;\n /** Image URL rendered in place of initials. */\n imageUrl?: string;\n /** Accessible label for the avatar. @default `Avatar of ${name}` */\n ariaLabel?: string;\n /** Shows a red error indicator on the avatar. @default false */\n hasIndicator?: boolean;\n};\n"],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,IAAA,CAAA,GAAA,IAAS;AACT,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EALW,UAAU,KAAV,UAAU,GAAA,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -1 +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 {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\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":"
|
|
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 {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\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,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBF,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAEE,gBAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BF,sBAAA,CAAA,aAAA,CAACG,aAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,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,EAAA,CAC1B,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,CAAA,aAAA,EAAgB,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,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -1 +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 {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\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":"
|
|
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 {...listProps} aria-label={ariaLabel} className={buildClassnames([styles.list, className])}>\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,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,SAAS,EAAA,YAAA,EAAc,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAA;AAC3F,QAAA,WAAW,CAAC,MAAM,GAAG,CAAC,KACrBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAC,iCAAiC,EACrC,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,CAAA,EAAG,WAAW,CAAC,MAAM,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAC7F,KAAK,EACH;AACE,gBAAA,gBAAgB,EAAE,UAAU;AACN,aAAA,EAAA;YAG1BA,cAAA,CAAA,aAAA,CAACC,MAAI,EAAA,EACH,IAAI,EAAE,CAAA,EAAG,WAAW,CAAC,MAAM,CAAA,CAAA,CAAG,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,EAAA,CAC1B,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,CAAA,aAAA,EAAgB,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,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EACzD,SAAS,EAAE,CAAA,EAAA,GAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC3D,CACC;SACN,CAAC,CACC;AAET;;;;"}
|
|
@@ -7,6 +7,8 @@ export type { AlertVariants, MiniAlertVariants } from './Alerts/types';
|
|
|
7
7
|
export { Anchor, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
|
|
8
8
|
export { AnimatedDropdown } from './AnimatedDropdown';
|
|
9
9
|
export { Avatar } from './Avatar';
|
|
10
|
+
export type { AvatarProps } from './Avatar';
|
|
11
|
+
export { AvatarSize } from './Avatar';
|
|
10
12
|
export { IconGroup } from './IconGroup';
|
|
11
13
|
export { Badge } from './Badge';
|
|
12
14
|
export { Banner } from './Banner';
|
package/dist/index.cjs
CHANGED
|
@@ -9,6 +9,7 @@ var Anchor = require('./components/Anchor/Anchor.cjs');
|
|
|
9
9
|
var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
|
|
10
10
|
var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
|
|
11
11
|
var Avatar = require('./components/Avatar/Avatar.cjs');
|
|
12
|
+
var types = require('./components/Avatar/types.cjs');
|
|
12
13
|
var IconGroup = require('./components/IconGroup/IconGroup.cjs');
|
|
13
14
|
var Badge = require('./components/Badge/Badge.cjs');
|
|
14
15
|
var Banner = require('./components/Banner/Banner.cjs');
|
|
@@ -419,6 +420,10 @@ exports.isRelativeUrl = urlUtils.isRelativeUrl;
|
|
|
419
420
|
exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
|
|
420
421
|
exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
|
|
421
422
|
exports.Avatar = Avatar.Avatar;
|
|
423
|
+
Object.defineProperty(exports, "AvatarSize", {
|
|
424
|
+
enumerable: true,
|
|
425
|
+
get: function () { return types.AvatarSize; }
|
|
426
|
+
});
|
|
422
427
|
exports.IconGroup = IconGroup.IconGroup;
|
|
423
428
|
exports.Badge = Badge.Badge;
|
|
424
429
|
exports.Banner = Banner.Banner;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { Anchor } from './components/Anchor/Anchor.js';
|
|
|
7
7
|
export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix } from './components/Anchor/utils/urlUtils.js';
|
|
8
8
|
export { AnimatedDropdown } from './components/AnimatedDropdown/AnimatedDropdown.js';
|
|
9
9
|
export { Avatar } from './components/Avatar/Avatar.js';
|
|
10
|
+
export { AvatarSize } from './components/Avatar/types.js';
|
|
10
11
|
export { IconGroup } from './components/IconGroup/IconGroup.js';
|
|
11
12
|
export { Badge } from './components/Badge/Badge.js';
|
|
12
13
|
export { Banner } from './components/Banner/Banner.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|