@grasco/profile-picture 0.1.2 → 0.1.5

package/dist/index.d.cts

@@ -1,6 +1,6 @@
+import React from 'react';
 import * as lit_html from 'lit-html';
 import { LitElement } from 'lit';
-import React from 'react';
 
 /**
  * Profile Picture Component - Type Definitions
@@ -8,7 +8,7 @@ import React from 'react';
  */
 type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 type Variant = "circle" | "rounded" | "squircle" | "square";
-type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type LoadingStrategy = "lazy" | "eager";
 type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
@@ -20,18 +20,6 @@ interface PresenceConfig {
     /** Ring thickness (1-3) */
     thickness?: 1 | 2 | 3;
 }
-interface RibbonConfig {
-    /** Text displayed on the ribbon */
-    text: string;
-    /** Position of the ribbon */
-    position?: Position;
-    /** Text color (CSS color) */
-    color?: string;
-    /** Background color (CSS color or gradient) */
-    bgColor?: string;
-    /** Icon before text (emoji or symbol) */
-    icon?: string;
-}
 interface BadgeConfig {
     /** Badge content (text, number, or empty for dot) */
     content?: string | number;
@@ -41,6 +29,8 @@ interface BadgeConfig {
     color?: string;
     /** Background color */
     bgColor?: string;
+    /** Border radius (CSS value, e.g., "8px", "50%", "9999px") */
+    borderRadius?: string;
     /** Enable pulse animation */
     pulse?: boolean;
     /** Enable glow effect */
@@ -87,6 +77,54 @@ interface InteractionConfig {
     cursor?: "pointer" | "default" | "zoom-in";
 }
 type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+/**
+ * Base props interface shared across all framework wrappers.
+ * This ensures type consistency between React, Vue, Svelte, and Angular.
+ */
+interface ProfilePictureProps$1 {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for accessibility and fallback initials */
+    alt?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
+    /** Predefined size or custom pixel value */
+    size?: Size | number;
+    /** Shape variant */
+    variant?: Variant;
+    /** Shadow preset */
+    shadow?: ShadowPreset;
+    /** Enable border */
+    border?: boolean;
+    /** Border width in pixels */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
+    /** Border color (CSS color value) */
+    borderColor?: string;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Background color (CSS color value) */
+    bgColor?: string;
+    /** Background gradient (CSS gradient value) */
+    bgGradient?: string;
+    /** Glow effect configuration */
+    glow?: GlowConfig;
+    /** Ring effect configuration (Instagram-style) */
+    ring?: RingConfig;
+    /** Presence indicator configuration */
+    presence?: PresenceConfig;
+    /** Badge configuration */
+    badge?: BadgeConfig;
+    /** Loading strategy */
+    loading?: LoadingStrategy;
+    /** Placeholder type while loading */
+    placeholder?: PlaceholderType;
+    /** Placeholder background color */
+    placeholderColor?: string;
+    /** Custom fallback text (overrides initials from alt) */
+    fallback?: string;
+    /** Interactive behavior configuration */
+    interactive?: InteractionConfig;
+}
 /** Direction for stacking avatars */
 type StackDirection = "ltr" | "rtl";
 /** Tooltip position relative to avatar */
@@ -108,6 +146,8 @@ interface GroupUserData {
     name: string;
     /** Image source URL */
     src?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
     /** Presence status from data-status attribute */
     status?: PresenceStatus;
     /** Reference to the profile-picture element */
@@ -162,6 +202,27 @@ interface ProfilePictureGroupProps$1 {
     animated?: boolean;
 }
 
+/**
+ * Profile Picture Component - Utility Functions
+ * Apple-inspired design system utilities
+ */
+
+/**
+ * Get CDN size label from pixel size (rounds up to next available size)
+ * CDN sizes: 80, 120, 240, 480, 960
+ */
+declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
+/**
+ * Detect theme (dark/light) from background color using luminance calculation
+ * Returns 'light' for non-hex colors or when luminance > 0.5
+ */
+declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
+/**
+ * Construct CDN URL for profile picture
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ */
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+
 declare class ProfilePicture$1 extends LitElement {
     private static stylesInjected;
     private static cdnBaseUrl;
@@ -192,7 +253,6 @@ declare class ProfilePicture$1 extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -225,9 +285,13 @@ declare class ProfilePicture$1 extends LitElement {
     private renderFallback;
     private renderImage;
     private renderRing;
+    /**
+     * Calculate corner offset based on variant
+     * Returns the inset from container edge where badges/presence should be positioned
+     */
+    private getCornerOffset;
     private renderPresence;
     private renderBadge;
-    private renderRibbon;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -237,27 +301,6 @@ declare global {
     }
 }
 
-/**
- * Profile Picture Component - Utility Functions
- * Apple-inspired design system utilities
- */
-
-/**
- * Get CDN size label from pixel size (rounds up to next available size)
- * CDN sizes: 80, 120, 240, 480, 960
- */
-declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
-/**
- * Detect theme (dark/light) from background color using luminance calculation
- * Returns 'light' for non-hex colors or when luminance > 0.5
- */
-declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
-/**
- * Construct CDN URL for profile picture
- * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
- */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
-
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -276,6 +319,8 @@ declare class ProfilePictureGroup$1 extends LitElement {
     private tooltipData;
     private tooltipTimeout;
     private slotObserver;
+    private portalContainer;
+    private counterRef;
     private get pixelSize();
     private get tooltipEnabled();
     private get tooltipPosition();
@@ -287,6 +332,9 @@ declare class ProfilePictureGroup$1 extends LitElement {
     disconnectedCallback(): void;
     private setupSlotObserver;
     private updateUsers;
+    private createPortal;
+    private destroyPortal;
+    private updatePortalContent;
     private handleAvatarClick;
     private handleAvatarHover;
     private handleAvatarLeave;
@@ -301,9 +349,9 @@ declare class ProfilePictureGroup$1 extends LitElement {
     private renderCounter;
     private renderAddButton;
     private renderTooltip;
-    private renderDropdown;
     private renderDropdownItem;
     private formatStatus;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -363,6 +411,8 @@ interface ProfilePictureGroupProps {
     addButtonLabel?: string;
     /** Enable hover lift animation (default: true) */
     animated?: boolean;
+    /** Alternating rotation amount in degrees (0 = no rotation) */
+    rotationAmount?: number;
     /** Called when an avatar is clicked */
     onAvatarClick?: (user: GroupUserData) => void;
     /** Called when hovering over an avatar */
@@ -403,7 +453,6 @@ declare const ProfilePictureGroup: React.ForwardRefExoticComponent<ProfilePictur
  *       border
  *       borderColor="white"
  *       bgColor="bg-gradient-to-br from-purple-500 to-pink-500"
- *       ribbon={{ text: 'PRO', position: 'top-right', bgColor: 'bg-amber-500' }}
  *       badge={{ content: '3', position: 'bottom-right', pulse: true }}
  *       onLoad={() => console.log('loaded')}
  *       onError={() => console.error('failed')}
@@ -413,32 +462,59 @@ declare const ProfilePictureGroup: React.ForwardRefExoticComponent<ProfilePictur
  * ```
  */
 
-interface ProfilePictureProps {
-    src: string;
-    alt?: string;
-    size?: Size | number;
-    variant?: Variant;
-    border?: boolean;
-    borderWidth?: 1 | 2 | 3 | 4;
-    borderColor?: string;
-    bgColor?: string;
-    bgGradient?: string;
-    ribbon?: RibbonConfig;
-    badge?: BadgeConfig;
-    loading?: LoadingStrategy;
-    placeholder?: PlaceholderType;
-    placeholderColor?: string;
-    fallback?: string;
+/**
+ * React-specific props extending the core ProfilePictureProps
+ */
+interface ProfilePictureProps extends ProfilePictureProps$1 {
+    /** Called when image loads successfully */
     onLoad?: () => void;
+    /** Called when image fails to load */
     onError?: () => void;
+    /** Called when CDN image fails to load */
+    onCdnError?: (detail: {
+        error: string;
+    }) => void;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles */
     style?: React.CSSProperties;
 }
 /**
  * ProfilePicture React Component
  *
- * Type-safe wrapper around the profile-picture web component
+ * Type-safe wrapper around the profile-picture web component.
+ * Uses ref as a prop (React 19+ pattern).
  */
-declare const ProfilePicture: React.ForwardRefExoticComponent<ProfilePictureProps & React.RefAttributes<HTMLElement>>;
+declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+    ref?: React.Ref<HTMLElement>;
+}): React.ReactElement<{
+    ref: React.RefObject<HTMLElement>;
+    src: string | undefined;
+    alt: string | undefined;
+    "ext-customer-id": string | undefined;
+    size: number | Size | undefined;
+    variant: Variant | undefined;
+    shadow: ShadowPreset | undefined;
+    border: true | undefined;
+    "border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
+    "border-color": string | undefined;
+    rotation: number | undefined;
+    "bg-color": string | undefined;
+    "bg-gradient": string | undefined;
+    glow: string | undefined;
+    ring: string | undefined;
+    presence: string | undefined;
+    badge: string | undefined;
+    loading: LoadingStrategy | undefined;
+    placeholder: PlaceholderType | undefined;
+    "placeholder-color": string | undefined;
+    fallback: string | undefined;
+    interactive: string | undefined;
+    class: string | undefined;
+    style: React.CSSProperties | undefined;
+}, string | React.JSXElementConstructor<any>>;
+declare namespace ProfilePicture {
+    var displayName: string;
+}
 
-export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import * as lit_html from 'lit-html';
 import { LitElement } from 'lit';
-import React from 'react';
 
 /**
  * Profile Picture Component - Type Definitions
@@ -8,7 +8,7 @@ import React from 'react';
  */
 type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
 type Variant = "circle" | "rounded" | "squircle" | "square";
-type Position = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type Position = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 type LoadingStrategy = "lazy" | "eager";
 type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
@@ -20,18 +20,6 @@ interface PresenceConfig {
     /** Ring thickness (1-3) */
     thickness?: 1 | 2 | 3;
 }
-interface RibbonConfig {
-    /** Text displayed on the ribbon */
-    text: string;
-    /** Position of the ribbon */
-    position?: Position;
-    /** Text color (CSS color) */
-    color?: string;
-    /** Background color (CSS color or gradient) */
-    bgColor?: string;
-    /** Icon before text (emoji or symbol) */
-    icon?: string;
-}
 interface BadgeConfig {
     /** Badge content (text, number, or empty for dot) */
     content?: string | number;
@@ -41,6 +29,8 @@ interface BadgeConfig {
     color?: string;
     /** Background color */
     bgColor?: string;
+    /** Border radius (CSS value, e.g., "8px", "50%", "9999px") */
+    borderRadius?: string;
     /** Enable pulse animation */
     pulse?: boolean;
     /** Enable glow effect */
@@ -87,6 +77,54 @@ interface InteractionConfig {
     cursor?: "pointer" | "default" | "zoom-in";
 }
 type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+/**
+ * Base props interface shared across all framework wrappers.
+ * This ensures type consistency between React, Vue, Svelte, and Angular.
+ */
+interface ProfilePictureProps$1 {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for accessibility and fallback initials */
+    alt?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
+    /** Predefined size or custom pixel value */
+    size?: Size | number;
+    /** Shape variant */
+    variant?: Variant;
+    /** Shadow preset */
+    shadow?: ShadowPreset;
+    /** Enable border */
+    border?: boolean;
+    /** Border width in pixels */
+    borderWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 8;
+    /** Border color (CSS color value) */
+    borderColor?: string;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Background color (CSS color value) */
+    bgColor?: string;
+    /** Background gradient (CSS gradient value) */
+    bgGradient?: string;
+    /** Glow effect configuration */
+    glow?: GlowConfig;
+    /** Ring effect configuration (Instagram-style) */
+    ring?: RingConfig;
+    /** Presence indicator configuration */
+    presence?: PresenceConfig;
+    /** Badge configuration */
+    badge?: BadgeConfig;
+    /** Loading strategy */
+    loading?: LoadingStrategy;
+    /** Placeholder type while loading */
+    placeholder?: PlaceholderType;
+    /** Placeholder background color */
+    placeholderColor?: string;
+    /** Custom fallback text (overrides initials from alt) */
+    fallback?: string;
+    /** Interactive behavior configuration */
+    interactive?: InteractionConfig;
+}
 /** Direction for stacking avatars */
 type StackDirection = "ltr" | "rtl";
 /** Tooltip position relative to avatar */
@@ -108,6 +146,8 @@ interface GroupUserData {
     name: string;
     /** Image source URL */
     src?: string;
+    /** External customer ID for CDN image loading */
+    extCustomerId?: string;
     /** Presence status from data-status attribute */
     status?: PresenceStatus;
     /** Reference to the profile-picture element */
@@ -162,6 +202,27 @@ interface ProfilePictureGroupProps$1 {
     animated?: boolean;
 }
 
+/**
+ * Profile Picture Component - Utility Functions
+ * Apple-inspired design system utilities
+ */
+
+/**
+ * Get CDN size label from pixel size (rounds up to next available size)
+ * CDN sizes: 80, 120, 240, 480, 960
+ */
+declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
+/**
+ * Detect theme (dark/light) from background color using luminance calculation
+ * Returns 'light' for non-hex colors or when luminance > 0.5
+ */
+declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
+/**
+ * Construct CDN URL for profile picture
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
+ */
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+
 declare class ProfilePicture$1 extends LitElement {
     private static stylesInjected;
     private static cdnBaseUrl;
@@ -192,7 +253,6 @@ declare class ProfilePicture$1 extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -225,9 +285,13 @@ declare class ProfilePicture$1 extends LitElement {
     private renderFallback;
     private renderImage;
     private renderRing;
+    /**
+     * Calculate corner offset based on variant
+     * Returns the inset from container edge where badges/presence should be positioned
+     */
+    private getCornerOffset;
     private renderPresence;
     private renderBadge;
-    private renderRibbon;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -237,27 +301,6 @@ declare global {
     }
 }
 
-/**
- * Profile Picture Component - Utility Functions
- * Apple-inspired design system utilities
- */
-
-/**
- * Get CDN size label from pixel size (rounds up to next available size)
- * CDN sizes: 80, 120, 240, 480, 960
- */
-declare function getCdnSizeLabel(pixelSize: number): "80" | "120" | "240" | "480" | "960";
-/**
- * Detect theme (dark/light) from background color using luminance calculation
- * Returns 'light' for non-hex colors or when luminance > 0.5
- */
-declare function detectThemeFromColor(bgColor?: string): "dark" | "light";
-/**
- * Construct CDN URL for profile picture
- * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{theme}.webp?hostname={hostname}
- */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
-
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
     max: 4;
@@ -276,6 +319,8 @@ declare class ProfilePictureGroup$1 extends LitElement {
     private tooltipData;
     private tooltipTimeout;
     private slotObserver;
+    private portalContainer;
+    private counterRef;
     private get pixelSize();
     private get tooltipEnabled();
     private get tooltipPosition();
@@ -287,6 +332,9 @@ declare class ProfilePictureGroup$1 extends LitElement {
     disconnectedCallback(): void;
     private setupSlotObserver;
     private updateUsers;
+    private createPortal;
+    private destroyPortal;
+    private updatePortalContent;
     private handleAvatarClick;
     private handleAvatarHover;
     private handleAvatarLeave;
@@ -301,9 +349,9 @@ declare class ProfilePictureGroup$1 extends LitElement {
     private renderCounter;
     private renderAddButton;
     private renderTooltip;
-    private renderDropdown;
     private renderDropdownItem;
     private formatStatus;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -363,6 +411,8 @@ interface ProfilePictureGroupProps {
     addButtonLabel?: string;
     /** Enable hover lift animation (default: true) */
     animated?: boolean;
+    /** Alternating rotation amount in degrees (0 = no rotation) */
+    rotationAmount?: number;
     /** Called when an avatar is clicked */
     onAvatarClick?: (user: GroupUserData) => void;
     /** Called when hovering over an avatar */
@@ -403,7 +453,6 @@ declare const ProfilePictureGroup: React.ForwardRefExoticComponent<ProfilePictur
  *       border
  *       borderColor="white"
  *       bgColor="bg-gradient-to-br from-purple-500 to-pink-500"
- *       ribbon={{ text: 'PRO', position: 'top-right', bgColor: 'bg-amber-500' }}
  *       badge={{ content: '3', position: 'bottom-right', pulse: true }}
  *       onLoad={() => console.log('loaded')}
  *       onError={() => console.error('failed')}
@@ -413,32 +462,59 @@ declare const ProfilePictureGroup: React.ForwardRefExoticComponent<ProfilePictur
  * ```
  */
 
-interface ProfilePictureProps {
-    src: string;
-    alt?: string;
-    size?: Size | number;
-    variant?: Variant;
-    border?: boolean;
-    borderWidth?: 1 | 2 | 3 | 4;
-    borderColor?: string;
-    bgColor?: string;
-    bgGradient?: string;
-    ribbon?: RibbonConfig;
-    badge?: BadgeConfig;
-    loading?: LoadingStrategy;
-    placeholder?: PlaceholderType;
-    placeholderColor?: string;
-    fallback?: string;
+/**
+ * React-specific props extending the core ProfilePictureProps
+ */
+interface ProfilePictureProps extends ProfilePictureProps$1 {
+    /** Called when image loads successfully */
     onLoad?: () => void;
+    /** Called when image fails to load */
     onError?: () => void;
+    /** Called when CDN image fails to load */
+    onCdnError?: (detail: {
+        error: string;
+    }) => void;
+    /** Additional CSS class names */
     className?: string;
+    /** Inline styles */
     style?: React.CSSProperties;
 }
 /**
  * ProfilePicture React Component
  *
- * Type-safe wrapper around the profile-picture web component
+ * Type-safe wrapper around the profile-picture web component.
+ * Uses ref as a prop (React 19+ pattern).
  */
-declare const ProfilePicture: React.ForwardRefExoticComponent<ProfilePictureProps & React.RefAttributes<HTMLElement>>;
+declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow, border, borderWidth, borderColor, rotation, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+    ref?: React.Ref<HTMLElement>;
+}): React.ReactElement<{
+    ref: React.RefObject<HTMLElement>;
+    src: string | undefined;
+    alt: string | undefined;
+    "ext-customer-id": string | undefined;
+    size: number | Size | undefined;
+    variant: Variant | undefined;
+    shadow: ShadowPreset | undefined;
+    border: true | undefined;
+    "border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
+    "border-color": string | undefined;
+    rotation: number | undefined;
+    "bg-color": string | undefined;
+    "bg-gradient": string | undefined;
+    glow: string | undefined;
+    ring: string | undefined;
+    presence: string | undefined;
+    badge: string | undefined;
+    loading: LoadingStrategy | undefined;
+    placeholder: PlaceholderType | undefined;
+    "placeholder-color": string | undefined;
+    fallback: string | undefined;
+    interactive: string | undefined;
+    class: string | undefined;
+    style: React.CSSProperties | undefined;
+}, string | React.JSXElementConstructor<any>>;
+declare namespace ProfilePicture {
+    var displayName: string;
+}
 
-export { type BadgeConfig, type DropdownConfig, type GroupUserData, type LoadingStrategy, type PlaceholderType, type Position, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps$1 as ProfilePictureGroupProps, type ProfilePictureProps, type RibbonConfig, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type Position, type PresenceConfig, type PresenceStatus, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };