@grasco/profile-picture 0.2.0 → 0.2.2

package/dist/react.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;
 }
@@ -352,6 +360,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;
@@ -361,6 +374,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 */
@@ -372,13 +387,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;
@@ -386,6 +402,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;
@@ -396,12 +413,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 DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };
+export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, type ProfilePictureClickDetail, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };

package/dist/react.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;
 }
@@ -352,6 +360,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;
@@ -361,6 +374,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 */
@@ -372,13 +387,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;
@@ -386,6 +402,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;
@@ -396,12 +413,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 DropdownConfig, type GlowConfig, type GroupUserData, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };
+export { type BadgeConfig, type DropdownConfig, type FallbackMode, type GlowConfig, type GroupUserData, type ImageMode, type InteractionConfig, type LoadingStrategy, type PlaceholderType, type PresenceConfig, ProfilePicture, type ProfilePictureClickDetail, ProfilePictureGroup, type ProfilePictureGroupProps, type ProfilePictureProps, type RingConfig, type ShadowPreset, type Size, type StackDirection, type TooltipConfig, type Variant, getCdnBaseUrl, setCdnBaseUrl };