@grasco/profile-picture 0.1.4 → 0.1.6

package/dist/index.d.cts

@@ -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;
@@ -124,8 +112,6 @@ interface ProfilePictureProps$1 {
     ring?: RingConfig;
     /** Presence indicator configuration */
     presence?: PresenceConfig;
-    /** Ribbon configuration */
-    ribbon?: RibbonConfig;
     /** Badge configuration */
     badge?: BadgeConfig;
     /** Loading strategy */
@@ -160,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 */
@@ -265,7 +253,6 @@ declare class ProfilePicture$1 extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -298,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>;
 }
 
@@ -462,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')}
@@ -495,7 +485,7 @@ 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, ribbon, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+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>;
@@ -514,7 +504,6 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     glow: string | undefined;
     ring: string | undefined;
     presence: string | undefined;
-    ribbon: string | undefined;
     badge: string | undefined;
     loading: LoadingStrategy | undefined;
     placeholder: PlaceholderType | undefined;
@@ -528,4 +517,4 @@ 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 RibbonConfig, type RingConfig, type ShadowPreset, 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

@@ -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;
@@ -124,8 +112,6 @@ interface ProfilePictureProps$1 {
     ring?: RingConfig;
     /** Presence indicator configuration */
     presence?: PresenceConfig;
-    /** Ribbon configuration */
-    ribbon?: RibbonConfig;
     /** Badge configuration */
     badge?: BadgeConfig;
     /** Loading strategy */
@@ -160,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 */
@@ -265,7 +253,6 @@ declare class ProfilePicture$1 extends LitElement {
     ring?: RingConfig;
     presence?: PresenceConfig;
     glow?: GlowConfig;
-    ribbon?: RibbonConfig;
     badge?: BadgeConfig;
     loading: LoadingStrategy;
     placeholder: PlaceholderType;
@@ -298,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>;
 }
 
@@ -462,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')}
@@ -495,7 +485,7 @@ 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, ribbon, badge, loading, placeholder, placeholderColor, fallback, interactive, onLoad, onError, onCdnError, className, style, ref, }: ProfilePictureProps & {
+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>;
@@ -514,7 +504,6 @@ declare function ProfilePicture({ src, alt, extCustomerId, size, variant, shadow
     glow: string | undefined;
     ring: string | undefined;
     presence: string | undefined;
-    ribbon: string | undefined;
     badge: string | undefined;
     loading: LoadingStrategy | undefined;
     placeholder: PlaceholderType | undefined;
@@ -528,4 +517,4 @@ 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 RibbonConfig, type RingConfig, type ShadowPreset, 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 };