@ssa-ui-kit/core 3.10.5 → 3.11.0

package/dist/components/Avatar/Avatar.d.ts

@@ -1,42 +1,41 @@
-import { CommonProps } from '../../types/emotion';
+import { AvatarProps } from './types';
 /**
- * Avatar - Circular image component for user profiles
+ * Avatar - Circular component for displaying user identity.
  *
- * A simple circular avatar component that displays an image with customizable size.
- * The image is displayed with a circular border-radius and centered within the container.
+ * Renders one of three visual states based on the supplied props:
+ * 1. **Custom image** — when `image` is provided, displays the photo inside a circle.
+ * 2. **Colored placeholder** — when `color` and/or `text` are provided, renders a
+ *    flat-color circle with up to two initials.
+ * 3. **Default placeholder** — when no props are given, shows the standard user icon.
  *
  * @category Components
  * @subcategory Display
  *
  * @example
  * ```tsx
- * // Basic avatar
- * <Avatar size={40} image="/path/to/avatar.jpg" />
+ * // Standard color + initial letter
+ * <Avatar color="purple" text="J" />
  * ```
  *
  * @example
  * ```tsx
- * // Large avatar
- * <Avatar size={100} image={user.avatarUrl} />
+ * // Custom profile photo
+ * <Avatar image="/users/jane.jpg" />
  * ```
  *
  * @example
  * ```tsx
- * // Avatar with custom styling
- * <Avatar
- *   size={60}
- *   image="/avatar.png"
- *   css={{ border: '2px solid blue' }}
- * />
+ * // Default placeholder (no props)
+ * <Avatar />
  * ```
  *
- * @see {@link UserProfile} - For complete user profile display with avatar
+ * @example
+ * ```tsx
+ * // User-defined hex color + letter
+ * <Avatar color="#F7931A" text="A" />
+ * ```
+ *
+ * @see {@link UserProfile} - For a complete user-profile panel that accepts Avatar as a trigger
  */
-declare const Avatar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    size: number;
-    image: string;
-} & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const Avatar: ({ size, color, text, image, border, borderColor, css, }: AvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/components/Avatar/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Avatar';
+export * from './types';

package/dist/components/Avatar/styles.d.ts

@@ -0,0 +1,13 @@
+import { CommonProps } from '../../types/emotion';
+export declare const AvatarContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    size: number;
+} & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    fontSize: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/Avatar/types.d.ts

@@ -0,0 +1,66 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { ColorsKeys } from '../../types/emotion';
+export declare enum AvatarSizes {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+/**
+ * Props for the Avatar component.
+ *
+ * Display priority:
+ * 1. `image` — renders the supplied URL as a circular photo.
+ * 2. `color` / `text` — renders a colored placeholder circle with up to two letters.
+ * 3. No props (or only `size`) — renders the default user-icon placeholder.
+ *
+ * @example
+ * ```tsx
+ * // Standard color + initial letter
+ * <Avatar color="purple" text="J" />
+ *
+ * // Custom profile photo
+ * <Avatar image="/users/jane.jpg" />
+ *
+ * // Default placeholder
+ * <Avatar />
+ *
+ * // User-defined hex color and letter
+ * <Avatar color="#F7931A" text="A" />
+ * ```
+ */
+export interface AvatarProps {
+    /**
+     * Avatar size variant.
+     * @default AvatarSizes.medium
+     */
+    size?: AvatarSizes;
+    /**
+     * Background color of the placeholder circle.
+     * Accepts a `theme.colors` key (e.g. `'purple'`, `'green'`)
+     * or any valid CSS color string (e.g. `'#F7931A'`, `'rgb(0,128,0)'`).
+     */
+    color?: ColorsKeys | string;
+    /**
+     * One or two characters displayed inside the colored placeholder.
+     * Only the first two characters are rendered.
+     */
+    text?: string;
+    /**
+     * URL of the user's profile photo.
+     * When provided, the image is displayed instead of the placeholder.
+     */
+    image?: string;
+    /**
+     * Shows or hides the avatar border.
+     * Defaults to visible for image avatars and hidden otherwise.
+     */
+    border?: boolean;
+    /**
+     * Border color. Accepts a `theme.colors` key or any CSS color string.
+     */
+    borderColor?: ColorsKeys | string;
+    /**
+     * Emotion CSS override applied after all internal styles.
+     */
+    css?: Interpolation<Theme>;
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -94,5 +94,5 @@ import { DropdownProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  */
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/components/Dropdown/types.d.ts

@@ -94,6 +94,11 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
      * @default 200
      */
     maxHeight?: number;
+    /**
+     * Shows a border around the avatar in the selected-item display.
+     * @default false
+     */
+    avatarBorder?: boolean;
     /**
      * Props object for sub-components
      * Allows fine-grained control over component parts

package/dist/components/ImageItem/ImageItem.d.ts

@@ -1,2 +1,2 @@
 import { ImageItemProps } from './types';
-export declare const ImageItem: ({ children, image, avatarSize, link, openLinkInNewTab, className, }: ImageItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ImageItem: ({ children, image, avatarSize, avatarBorder, link, openLinkInNewTab, className, }: ImageItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ImageItem/types.d.ts

@@ -1,6 +1,9 @@
+import { AvatarSizes } from '../Avatar/types';
 export type ImageItemProps = React.PropsWithChildren<{
     image: string;
-    avatarSize?: number;
+    avatarSize?: AvatarSizes;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
     link?: string;
     className?: string;
     openLinkInNewTab?: boolean;

package/dist/components/JsonSchemaForm/constants.d.ts

@@ -1 +1,2 @@
-export declare const DEFAULT_AVATAR_SIZE = 24;
+import { AvatarSizes } from '../Avatar/types';
+export declare const DEFAULT_AVATAR_SIZE = AvatarSizes.small;

package/dist/components/JsonSchemaForm/types.d.ts

@@ -1,6 +1,9 @@
+import { AvatarSizes } from '../Avatar/types';
 export type SelectOptionSchemaExtension = {
     avatar?: string;
 };
 export type SelectWidgetUiOptions = {
-    typeaheadAvatarSize?: number;
+    typeaheadAvatarSize?: AvatarSizes;
+    /** Shows a border around avatars in the typeahead list. @default false */
+    typeaheadAvatarBorder?: boolean;
 };

package/dist/components/PersonInfo/types.d.ts

@@ -79,6 +79,8 @@ export interface PersonInfoProps extends CommonProps {
     link?: string;
     /** When link is set, open in new tab and use rel="noreferrer". */
     openLinkInNewTab?: boolean;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
 }
 /**
  * Props for PersonInfoAvatar (value + optional avatar, optional link).
@@ -90,6 +92,8 @@ export interface PersonInfoAvatarProps {
     styles?: PersonInfoStyles;
     link?: string;
     openLinkInNewTab?: boolean;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
 }
 /**
  * Props for PersonInfoCounter (“+N” with tooltip).

package/dist/components/index.d.ts

@@ -78,6 +78,7 @@ export type * from './Tag/types';
 export * from './Chip';
 export type * from './Chip/types';
 export { default as Avatar } from './Avatar';
+export * from './Avatar/types';
 export { default as Label } from './Label';
 export type * from './Label/types';
 export { default as Indicator } from './Indicator';

package/dist/index.js

@@ -7957,6 +7957,7 @@ __webpack_require__.d(__webpack_exports__, {
   Alert: () => (/* reexport */ Alert_Alert),
   AlertVariants: () => (/* reexport */ AlertVariants),
   Avatar: () => (/* reexport */ Avatar_Avatar),
+  AvatarSizes: () => (/* reexport */ AvatarSizes),
   Badge: () => (/* reexport */ Badge_Badge),
   BarGaugeChart: () => (/* reexport */ BarGaugeChart),
   BarGaugeChartComponent: () => (/* reexport */ BarGaugeChartComponent),
@@ -17473,50 +17474,166 @@ const DropdownOptions = ({
   });
 };
 /* harmony default export */ const DropdownOptions_DropdownOptions = (DropdownOptions);
+;// ./src/components/Avatar/types.ts
+let AvatarSizes = /*#__PURE__*/function (AvatarSizes) {
+  AvatarSizes["small"] = "small";
+  AvatarSizes["medium"] = "medium";
+  AvatarSizes["large"] = "large";
+  return AvatarSizes;
+}({});
+
+/**
+ * Props for the Avatar component.
+ *
+ * Display priority:
+ * 1. `image` — renders the supplied URL as a circular photo.
+ * 2. `color` / `text` — renders a colored placeholder circle with up to two letters.
+ * 3. No props (or only `size`) — renders the default user-icon placeholder.
+ *
+ * @example
+ * ```tsx
+ * // Standard color + initial letter
+ * <Avatar color="purple" text="J" />
+ *
+ * // Custom profile photo
+ * <Avatar image="/users/jane.jpg" />
+ *
+ * // Default placeholder
+ * <Avatar />
+ *
+ * // User-defined hex color and letter
+ * <Avatar color="#F7931A" text="A" />
+ * ```
+ */
+;// ./src/components/Avatar/styles.ts
+
+const AvatarContainer = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1w4ysav1"
+} : 0)("display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden;width:", ({
+  size
+}) => size, "px;height:", ({
+  size
+}) => size, "px;" + ( true ? "" : 0));
+const AvatarText = /*#__PURE__*/base_default()("span",  true ? {
+  target: "e1w4ysav0"
+} : 0)("color:rgba(255, 255, 255, 1);font-family:Manrope,sans-serif;font-weight:600;font-size:", ({
+  fontSize
+}) => fontSize, "px;line-height:1;user-select:none;text-transform:uppercase;" + ( true ? "" : 0));
 ;// ./src/components/Avatar/Avatar.tsx
 
+
+
+
+
+const SIZE_MAP = {
+  [AvatarSizes.small]: 24,
+  [AvatarSizes.medium]: 32,
+  [AvatarSizes.large]: 46
+};
+const BORDER_WIDTH_MAP = {
+  small: 1,
+  medium: 1,
+  large: 2
+};
+
+/** Proportion of the avatar diameter used as the initials font-size. */
+const TEXT_SIZE_RATIO = 0.4;
+
+/** Proportion of the avatar diameter used as the default icon size. */
+const ICON_SIZE_RATIO = 0.75;
+const DEFAULT_BORDER_COLOR = 'blue';
+const resolveThemeColor = (color, themeColors) => {
+  if (!color) return undefined;
+  if (color in themeColors) {
+    return themeColors[color];
+  }
+  return color;
+};
+
 /**
- * Avatar - Circular image component for user profiles
+ * Avatar - Circular component for displaying user identity.
  *
- * A simple circular avatar component that displays an image with customizable size.
- * The image is displayed with a circular border-radius and centered within the container.
+ * Renders one of three visual states based on the supplied props:
+ * 1. **Custom image** — when `image` is provided, displays the photo inside a circle.
+ * 2. **Colored placeholder** — when `color` and/or `text` are provided, renders a
+ *    flat-color circle with up to two initials.
+ * 3. **Default placeholder** — when no props are given, shows the standard user icon.
  *
  * @category Components
  * @subcategory Display
  *
  * @example
  * ```tsx
- * // Basic avatar
- * <Avatar size={40} image="/path/to/avatar.jpg" />
+ * // Standard color + initial letter
+ * <Avatar color="purple" text="J" />
  * ```
  *
  * @example
  * ```tsx
- * // Large avatar
- * <Avatar size={100} image={user.avatarUrl} />
+ * // Custom profile photo
+ * <Avatar image="/users/jane.jpg" />
  * ```
  *
  * @example
  * ```tsx
- * // Avatar with custom styling
- * <Avatar
- *   size={60}
- *   image="/avatar.png"
- *   css={{ border: '2px solid blue' }}
- * />
+ * // Default placeholder (no props)
+ * <Avatar />
  * ```
  *
- * @see {@link UserProfile} - For complete user profile display with avatar
+ * @example
+ * ```tsx
+ * // User-defined hex color + letter
+ * <Avatar color="#F7931A" text="A" />
+ * ```
+ *
+ * @see {@link UserProfile} - For a complete user-profile panel that accepts Avatar as a trigger
  */
-const Avatar = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1gxdpq60"
-} : 0)("border-radius:100px;overflow:hidden;width:", ({
-  size
-}) => size, "px;height:", ({
-  size
-}) => size, "px;background:", ({
-  image
-}) => `url(${image})`, " center/contain no-repeat;" + ( true ? "" : 0));
+const Avatar = ({
+  size = AvatarSizes.medium,
+  color,
+  text,
+  image,
+  border,
+  borderColor,
+  css
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const sizePx = SIZE_MAP[size];
+  const shouldShowBorder = border ?? Boolean(image);
+  const resolvedBorderColor = resolveThemeColor(borderColor ?? DEFAULT_BORDER_COLOR, theme.colors) ?? theme.colors.blue;
+  const borderStyle = shouldShowBorder ? {
+    border: `${BORDER_WIDTH_MAP[size]}px solid ${resolvedBorderColor}`
+  } : undefined;
+
+  // ── Scenario 3: custom profile image ──────────────────────────────────────
+
+  if (image) {
+    return (0,jsx_runtime_namespaceObject.jsx)(AvatarContainer, {
+      size: sizePx,
+      css: [{
+        background: `url(${image}) center / cover no-repeat`
+      }, borderStyle, css,  true ? "" : 0,  true ? "" : 0],
+      "data-testid": "avatar"
+    });
+  }
+  const resolvedColor = resolveThemeColor(color, theme.colors) ?? theme.colors.greyFocused;
+  const fontSize = Math.round(sizePx * TEXT_SIZE_RATIO);
+  return (0,jsx_runtime_namespaceObject.jsx)(AvatarContainer, {
+    size: sizePx,
+    css: [{
+      background: resolvedColor
+    }, borderStyle, css,  true ? "" : 0,  true ? "" : 0],
+    "data-testid": "avatar",
+    children: text ? (0,jsx_runtime_namespaceObject.jsx)(AvatarText, {
+      fontSize: fontSize,
+      children: text.slice(0, 2)
+    }) : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: "user",
+      size: Math.round(sizePx * ICON_SIZE_RATIO),
+      color: theme.colors.white
+    })
+  });
+};
 /* harmony default export */ const Avatar_Avatar = (Avatar);
 ;// ./src/components/Dropdown/types.ts
 let DropdownPositions = /*#__PURE__*/function (DropdownPositions) {
@@ -17705,6 +17822,7 @@ const Dropdown = ({
   className,
   placeholder = 'Select something',
   maxHeight = 200,
+  avatarBorder = false,
   dropdownProps: componentProps
 }) => {
   const {
@@ -17784,8 +17902,9 @@ const Dropdown = ({
   const value = activeItem ? activeItem.label || activeItem.children || activeItem.value || activeItem || placeholder : placeholder;
   const rawAvatar = activeItem && activeItem.avatar;
   const selectedAvatar = rawAvatar != null ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
-    size: 20,
-    image: rawAvatar
+    size: AvatarSizes.small,
+    image: rawAvatar,
+    border: avatarBorder
   }) : /*#__PURE__*/external_react_default().isValidElement(rawAvatar) ? rawAvatar : null : null;
   const toggleContent = selectedAvatar != null ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
     children: [selectedAvatar, (0,jsx_runtime_namespaceObject.jsx)("span", {
@@ -27366,7 +27485,8 @@ const RadioWidget = props => {
   });
 };
 ;// ./src/components/JsonSchemaForm/constants.ts
-const DEFAULT_AVATAR_SIZE = 24;
+
+const DEFAULT_AVATAR_SIZE = AvatarSizes.small;
 ;// ./src/components/JsonSchemaForm/utils/selectWidget.ts
 /**
  * Props that need special handling (computed from RJSF state) or are RJSF-controlled
@@ -27403,9 +27523,11 @@ const getAvatarNode = (option, uiOptions) => {
   const avatar = option.schema?.avatar;
   if (!avatar) return;
   const avatarSize = uiOptions.typeaheadAvatarSize ?? DEFAULT_AVATAR_SIZE;
+  const avatarBorder = uiOptions.typeaheadAvatarBorder ?? false;
   return (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
     size: avatarSize,
-    image: avatar
+    image: avatar,
+    border: avatarBorder
   });
 };
 const SelectWidget = props => {
@@ -48369,6 +48491,7 @@ function ImageItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 
 
 
+
 var ImageItem_ref =  true ? {
   name: "c5ejfv",
   styles: "gap:8px;text-decoration:none"
@@ -48376,7 +48499,8 @@ var ImageItem_ref =  true ? {
 const ImageItem = ({
   children,
   image,
-  avatarSize = 24,
+  avatarSize = AvatarSizes.small,
+  avatarBorder = false,
   link = '',
   openLinkInNewTab = false,
   className
@@ -48394,7 +48518,8 @@ const ImageItem = ({
     ...additionalProps,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
       size: avatarSize,
-      image: image
+      image: image,
+      border: avatarBorder
     }), (0,jsx_runtime_namespaceObject.jsx)("span", {
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         color: theme.colors.greyDarker,
@@ -53606,7 +53731,8 @@ const PersonInfoAvatar = ({
   value,
   styles,
   link,
-  openLinkInNewTab
+  openLinkInNewTab,
+  avatarBorder = false
 }) => {
   const hasAvatar = Boolean(avatar);
   const hasValue = Boolean(value);
@@ -53625,8 +53751,9 @@ const PersonInfoAvatar = ({
     css: isLink ? avatarWrapperLinkStyles : undefined,
     ...linkAttributes,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
-      size: 24,
-      image: avatar
+      size: AvatarSizes.small,
+      image: avatar,
+      border: avatarBorder
     }), valueNode]
   });
 };
@@ -53824,6 +53951,7 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
   className,
   link,
   openLinkInNewTab,
+  avatarBorder,
   ...props
 }, ref) {
   return (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBase, {
@@ -53843,7 +53971,8 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
             value: value,
             styles: styles,
             link: link,
-            openLinkInNewTab: openLinkInNewTab
+            openLinkInNewTab: openLinkInNewTab,
+            avatarBorder: avatarBorder
           }), counterTooltip && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoCounter, {
             counterTooltip: counterTooltip,
             css: styles?.counter
@@ -54153,6 +54282,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================