@grasco/profile-picture 0.2.0 → 0.2.2

package/dist/index.d.cts

@@ -11,6 +11,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
 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 FallbackMode = "initials" | "gradient";
+type ImageMode = "transparent" | "original";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
 interface PresenceConfig {
     /** Current status */
@@ -88,6 +90,8 @@ interface ProfilePictureProps$1 {
     alt?: string;
     /** External customer ID for CDN image loading */
     extCustomerId?: string;
+    /** CDN image mode: 'transparent' for transparent background, 'original' for original background */
+    imageMode?: ImageMode;
     /** Predefined size or custom pixel value */
     size?: Size | number;
     /** Shape variant */
@@ -102,6 +106,8 @@ interface ProfilePictureProps$1 {
     borderColor?: string;
     /** Rotation angle in degrees */
     rotation?: number;
+    /** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
+    zoom?: number;
     /** Background color (CSS color value) */
     bgColor?: string;
     /** Background gradient (CSS gradient value) */
@@ -122,6 +128,8 @@ interface ProfilePictureProps$1 {
     placeholderColor?: string;
     /** Custom fallback text (overrides initials from alt) */
     fallback?: string;
+    /** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
+    fallbackMode?: FallbackMode;
     /** Interactive behavior configuration */
     interactive?: InteractionConfig;
 }
@@ -212,16 +220,12 @@ interface ProfilePictureGroupProps$1 {
  * 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}
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{imageMode}.webp?hostname={hostname}
+ * @param imageMode - "transparent" for transparent background, "original" for original background
  */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", imageMode: "transparent" | "original", hostname: string): string;
 
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
@@ -396,6 +400,11 @@ declare function getCdnBaseUrl(): string;
 /**
  * React-specific props extending the core ProfilePictureProps
  */
+interface ProfilePictureClickDetail {
+    extCustomerId?: string;
+    alt?: string;
+    src?: string;
+}
 interface ProfilePictureProps extends ProfilePictureProps$1 {
     /** Called when image loads successfully */
     onLoad?: () => void;
@@ -405,6 +414,8 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
     onCdnError?: (detail: {
         error: string;
     }) => void;
+    /** Called when the profile picture is clicked (requires interactive.pressable) */
+    onClick?: (detail: ProfilePictureClickDetail) => void;
     /** Additional CSS class names */
     className?: string;
     /** Inline styles */
@@ -416,13 +427,14 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
  * Type-safe wrapper around the profile-picture web component.
  * Uses ref as a prop (React 19+ pattern).
  */
-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 & {
+declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, zoom, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, 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;
+    "image-mode": ImageMode | undefined;
     size: number | Size | undefined;
     variant: Variant | undefined;
     shadow: ShadowPreset | undefined;
@@ -430,6 +442,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     "border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
     "border-color": string | undefined;
     rotation: number | undefined;
+    zoom: number | undefined;
     "bg-color": string | undefined;
     "bg-gradient": string | undefined;
     glow: string | undefined;
@@ -440,12 +453,13 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     placeholder: PlaceholderType | undefined;
     "placeholder-color": string | undefined;
     fallback: string | undefined;
+    "fallback-mode": FallbackMode | undefined;
     interactive: string | undefined;
     class: string | undefined;
     style: React.CSSProperties | undefined;
-}, string | React.JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>> | null;
 declare namespace ProfilePicture {
     var displayName: string;
 }
 
-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, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type ImageMode, 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, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };

package/dist/index.d.ts

@@ -11,6 +11,8 @@ type Variant = "circle" | "rounded" | "squircle" | "square";
 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 FallbackMode = "initials" | "gradient";
+type ImageMode = "transparent" | "original";
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
 interface PresenceConfig {
     /** Current status */
@@ -88,6 +90,8 @@ interface ProfilePictureProps$1 {
     alt?: string;
     /** External customer ID for CDN image loading */
     extCustomerId?: string;
+    /** CDN image mode: 'transparent' for transparent background, 'original' for original background */
+    imageMode?: ImageMode;
     /** Predefined size or custom pixel value */
     size?: Size | number;
     /** Shape variant */
@@ -102,6 +106,8 @@ interface ProfilePictureProps$1 {
     borderColor?: string;
     /** Rotation angle in degrees */
     rotation?: number;
+    /** Zoom level for the image (default: 1.4). Values > 1 zoom in, keeping the image within the crop zone */
+    zoom?: number;
     /** Background color (CSS color value) */
     bgColor?: string;
     /** Background gradient (CSS gradient value) */
@@ -122,6 +128,8 @@ interface ProfilePictureProps$1 {
     placeholderColor?: string;
     /** Custom fallback text (overrides initials from alt) */
     fallback?: string;
+    /** Fallback display mode: 'initials' shows letters, 'gradient' shows cloudy gradient */
+    fallbackMode?: FallbackMode;
     /** Interactive behavior configuration */
     interactive?: InteractionConfig;
 }
@@ -212,16 +220,12 @@ interface ProfilePictureGroupProps$1 {
  * 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}
+ * Format: {baseUrl}/api/profile-picture/cdn/{extId}_{size}_{imageMode}.webp?hostname={hostname}
+ * @param imageMode - "transparent" for transparent background, "original" for original background
  */
-declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", theme: "dark" | "light", hostname: string): string;
+declare function constructCdnUrl(baseUrl: string, extCustomerId: string, sizeLabel: "80" | "120" | "240" | "480" | "960", imageMode: "transparent" | "original", hostname: string): string;
 
 declare class ProfilePictureGroup$1 extends LitElement {
     protected createRenderRoot(): this;
@@ -396,6 +400,11 @@ declare function getCdnBaseUrl(): string;
 /**
  * React-specific props extending the core ProfilePictureProps
  */
+interface ProfilePictureClickDetail {
+    extCustomerId?: string;
+    alt?: string;
+    src?: string;
+}
 interface ProfilePictureProps extends ProfilePictureProps$1 {
     /** Called when image loads successfully */
     onLoad?: () => void;
@@ -405,6 +414,8 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
     onCdnError?: (detail: {
         error: string;
     }) => void;
+    /** Called when the profile picture is clicked (requires interactive.pressable) */
+    onClick?: (detail: ProfilePictureClickDetail) => void;
     /** Additional CSS class names */
     className?: string;
     /** Inline styles */
@@ -416,13 +427,14 @@ interface ProfilePictureProps extends ProfilePictureProps$1 {
  * Type-safe wrapper around the profile-picture web component.
  * Uses ref as a prop (React 19+ pattern).
  */
-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 & {
+declare function ProfilePicture({ src, alt, extCustomerId, imageMode, size, variant, shadow, border, borderWidth, borderColor, rotation, zoom, bgColor, bgGradient, glow, ring, presence, badge, loading, placeholder, placeholderColor, fallback, fallbackMode, interactive, onLoad, onError, onCdnError, onClick, 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;
+    "image-mode": ImageMode | undefined;
     size: number | Size | undefined;
     variant: Variant | undefined;
     shadow: ShadowPreset | undefined;
@@ -430,6 +442,7 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     "border-width": 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
     "border-color": string | undefined;
     rotation: number | undefined;
+    zoom: number | undefined;
     "bg-color": string | undefined;
     "bg-gradient": string | undefined;
     glow: string | undefined;
@@ -440,12 +453,13 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     placeholder: PlaceholderType | undefined;
     "placeholder-color": string | undefined;
     fallback: string | undefined;
+    "fallback-mode": FallbackMode | undefined;
     interactive: string | undefined;
     class: string | undefined;
     style: React.CSSProperties | undefined;
-}, string | React.JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>> | null;
 declare namespace ProfilePicture {
     var displayName: string;
 }
 
-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, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };
+export { type BadgeConfig, type ProfilePictureGroupProps$1 as CoreProfilePictureGroupProps, type ProfilePictureProps$1 as CoreProfilePictureProps, type DropdownConfig, type GlowConfig, type GroupUserData, type ImageMode, 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, getCdnBaseUrl, getCdnSizeLabel, setCdnBaseUrl };