@grasco/profile-picture 0.1.2 → 0.1.4

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";
@@ -41,6 +41,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 +89,56 @@ 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;
+    /** Ribbon configuration */
+    ribbon?: RibbonConfig;
+    /** 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 */
@@ -162,6 +214,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;
@@ -237,27 +310,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 +328,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 +341,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 +358,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 +420,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 */
@@ -413,32 +472,60 @@ 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, ribbon, 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;
+    ribbon: 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 RibbonConfig, 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";
@@ -41,6 +41,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 +89,56 @@ 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;
+    /** Ribbon configuration */
+    ribbon?: RibbonConfig;
+    /** 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 */
@@ -162,6 +214,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;
@@ -237,27 +310,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 +328,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 +341,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 +358,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 +420,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 */
@@ -413,32 +472,60 @@ 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, ribbon, 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;
+    ribbon: 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 RibbonConfig, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type TooltipPosition, type Variant, constructCdnUrl, detectThemeFromColor, getCdnSizeLabel };