@apify/ui-library 1.168.2 → 1.168.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.168.2",
+    "version": "1.168.3",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -94,5 +94,5 @@
         "src",
         "style"
     ],
-    "gitHead": "9b5709c7d03526fdda3f4ad091c5890b4e745891"
+    "gitHead": "fed97f595c48ce93b0f230388cf98113cd62791f"
 }

package/src/components/avatar/bordered_actor_avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BorderedActorAvatar } from './bordered_actor_avatar';
+
+const AVATAR_SIZES = [24, 32, 40, 44] as const;
+
+export default {
+    title: 'UI-Library/Avatar/BorderedActorAvatar',
+    component: BorderedActorAvatar,
+    argTypes: {
+        size: { control: 'select', options: AVATAR_SIZES },
+        name: { control: 'text' },
+        url: { control: 'text' },
+    },
+    args: {
+        name: 'Web Scraper',
+        size: 24,
+    },
+    tags: ['new'],
+} as Meta<typeof BorderedActorAvatar>;
+
+type Story = StoryObj<typeof BorderedActorAvatar>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar name="Web Scraper" size={size} />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};
+
+export const WithImageUrl: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'flex-end' }}>
+            {AVATAR_SIZES.map((size) => (
+                <div key={size} style={{ textAlign: 'center' }}>
+                    <BorderedActorAvatar
+                        name="Actors MCP Server"
+                        url="https://apify.github.io/apify-web/img/apify-logo/logomark-32x32.svg"
+                        size={size}
+                    />
+                    <p style={{ marginTop: '8px', fontSize: '12px' }}>{size}px</p>
+                </div>
+            ))}
+        </div>
+    ),
+};

package/src/components/avatar/bordered_actor_avatar.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import { Box, type BoxProps } from '../box';
+import { ActorAvatar, getActorAvatarBorderRadius } from './actor_avatar';
+
+const BORDER_WIDTH = 1;
+
+/** Computes border, padding, and radius dimensions for the bordered wrapper. */
+const getBorderedStyle = (size: number) => {
+    const padding = size < 40 ? 2 : 3;
+    const outerRadius = getActorAvatarBorderRadius(size);
+    const innerRadius = Math.max(outerRadius - 3, 2);
+    const innerSize = Math.max(size - (BORDER_WIDTH + padding) * 2, 1);
+
+    return { padding, outerRadius, innerRadius, innerSize };
+};
+
+type StyledBorderProps = { $outerRadius: number; $padding: number };
+
+const StyledBorder = styled(Box)<StyledBorderProps>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: ${BORDER_WIDTH}px solid ${theme.color.neutral.border};
+    border-radius: ${({ $outerRadius }) => $outerRadius}px;
+    padding: ${({ $padding }) => $padding}px;
+    overflow: hidden;
+`;
+
+type BorderedActorAvatarProps = BoxProps & {
+    name?: string;
+    url?: string | null;
+    size: 24 | 32 | 40 | 44;
+};
+
+export const BorderedActorAvatar = ({ size, name, url, ...rest }: BorderedActorAvatarProps) => {
+    const { padding, outerRadius, innerRadius, innerSize } = getBorderedStyle(size);
+
+    return (
+        <StyledBorder $outerRadius={outerRadius} $padding={padding} {...rest}>
+            <ActorAvatar size={innerSize} borderRadius={`${innerRadius}px`} name={name} url={url} />
+        </StyledBorder>
+    );
+};

package/src/components/avatar/index.ts

@@ -1,2 +1,3 @@
 export * from './actor_avatar';
+export * from './bordered_actor_avatar';
 export * from './user_avatar';