@grasco/profile-picture 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,389 @@
+import * as lit_html from 'lit-html';
+import { LitElement } from 'lit';
+import React from 'react';
+
+/**
+ * Profile Picture Component - Type Definitions
+ * Apple-inspired design system with modern 2025 aesthetics
+ */
+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 LoadingStrategy = "lazy" | "eager";
+type PlaceholderType = "shimmer" | "pulse" | "blur" | "skeleton" | "none";
+type PresenceStatus = "online" | "away" | "busy" | "offline" | "dnd";
+interface PresenceConfig {
+    /** Current status */
+    status: PresenceStatus;
+    /** Show animated ring */
+    animate?: boolean;
+    /** 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;
+    /** Position of the badge */
+    position?: Position;
+    /** Text/icon color */
+    color?: string;
+    /** Background color */
+    bgColor?: string;
+    /** Enable pulse animation */
+    pulse?: boolean;
+    /** Enable glow effect */
+    glow?: boolean;
+    /** Max value to display (shows 99+ if exceeded) */
+    max?: number;
+}
+interface GlowConfig {
+    /** Glow color (defaults to border or bg color) */
+    color?: string;
+    /** Intensity (0-1) */
+    intensity?: number;
+    /** Animate the glow */
+    animate?: boolean;
+}
+interface RingConfig {
+    /** Show ring */
+    show: boolean;
+    /** Ring color or gradient */
+    color?: string;
+    /** Gradient colors for multi-color ring */
+    gradient?: string[];
+    /** Ring width */
+    width?: number;
+    /** Gap between ring and avatar */
+    gap?: number;
+    /** Animate (rotate for gradient) */
+    animate?: boolean;
+}
+interface InteractionConfig {
+    /** Enable hover effects */
+    hoverable?: boolean;
+    /** Enable press/click effects */
+    pressable?: boolean;
+    /** Show focus ring on focus */
+    focusable?: boolean;
+    /** Cursor style */
+    cursor?: "pointer" | "default" | "zoom-in";
+}
+type ShadowPreset = "none" | "sm" | "md" | "lg" | "glow";
+/** Direction for stacking avatars */
+type StackDirection = "ltr" | "rtl";
+/** Tooltip position relative to avatar */
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+/** Tooltip configuration */
+interface TooltipConfig {
+    /** Enable/disable tooltip (default: true) */
+    enabled?: boolean;
+    /** Position of tooltip relative to avatar */
+    position?: TooltipPosition;
+    /** Delay before showing tooltip in ms (default: 300) */
+    delay?: number;
+}
+/** User data extracted from profile-picture elements */
+interface GroupUserData {
+    /** User ID from data-user-id attribute */
+    id?: string;
+    /** User name from alt attribute */
+    name: string;
+    /** Image source URL */
+    src?: string;
+    /** Presence status from data-status attribute */
+    status?: PresenceStatus;
+    /** Reference to the profile-picture element */
+    element: HTMLElement;
+    /** Index in the group */
+    index: number;
+    /** Visual variant (circle, rounded, squircle, square) */
+    variant?: Variant;
+    /** Shadow preset */
+    shadow?: ShadowPreset;
+    /** Show border */
+    border?: boolean;
+    /** Border width (1-4) */
+    borderWidth?: 1 | 2 | 3 | 4;
+    /** Border color */
+    borderColor?: string;
+    /** Background color */
+    bgColor?: string;
+    /** Background gradient */
+    bgGradient?: string;
+}
+/** Dropdown configuration for overflow users */
+interface DropdownConfig {
+    /** Max height of dropdown in px (default: 280) */
+    maxHeight?: number;
+    /** Show presence indicator dots (default: true) */
+    showPresence?: boolean;
+    /** Dropdown position (default: 'bottom') */
+    position?: "bottom" | "top";
+}
+/** Profile Picture Group Props */
+interface ProfilePictureGroupProps$1 {
+    /** Maximum visible avatars before showing counter (default: 4) */
+    max?: number;
+    /** Stack direction - ltr shows first on left (default: 'ltr') */
+    direction?: StackDirection;
+    /** Overlap amount as percentage 0-1 (default: 0.3) */
+    overlap?: number;
+    /** Avatar size - inherited by children (default: 'md') */
+    size?: Size | number;
+    /** Spacing between avatars in px (overrides overlap calculation) */
+    spacing?: number;
+    /** Tooltip configuration */
+    tooltip?: TooltipConfig;
+    /** Dropdown configuration for overflow users */
+    dropdown?: DropdownConfig;
+    /** Show add button (default: false) */
+    showAddButton?: boolean;
+    /** Add button label for accessibility */
+    addButtonLabel?: string;
+    /** Enable hover lift animation (default: true) */
+    animated?: boolean;
+}
+
+declare class ProfilePicture$1 extends LitElement {
+    private static stylesInjected;
+    protected createRenderRoot(): this;
+    private static injectStylesOnce;
+    src: string;
+    alt: string;
+    size: Size | string;
+    variant: Variant;
+    shadow: ShadowPreset;
+    border: boolean;
+    borderWidth: 1 | 2 | 3 | 4;
+    borderColor: string;
+    bgColor?: string;
+    bgGradient?: string;
+    ring?: RingConfig;
+    presence?: PresenceConfig;
+    glow?: GlowConfig;
+    ribbon?: RibbonConfig;
+    badge?: BadgeConfig;
+    loading: LoadingStrategy;
+    placeholder: PlaceholderType;
+    placeholderColor: string;
+    fallback?: string;
+    interactive?: InteractionConfig;
+    private isLoaded;
+    private hasError;
+    private previousSrc;
+    private get pixelSize();
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    private handleLoad;
+    private handleError;
+    private getContainerStyles;
+    private renderPlaceholder;
+    private renderFallback;
+    private renderImage;
+    private renderRing;
+    private renderPresence;
+    private renderBadge;
+    private renderRibbon;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "profile-picture": ProfilePicture$1;
+    }
+}
+
+declare class ProfilePictureGroup$1 extends LitElement {
+    protected createRenderRoot(): this;
+    max: 4;
+    direction: StackDirection;
+    overlap: 0.3;
+    size: Size | string;
+    spacing?: number;
+    tooltip?: TooltipConfig;
+    dropdown?: DropdownConfig;
+    showAddButton: boolean;
+    addButtonLabel: string;
+    animated: true;
+    private users;
+    private dropdownOpen;
+    private tooltipData;
+    private tooltipTimeout;
+    private slotObserver;
+    private get pixelSize();
+    private get tooltipEnabled();
+    private get tooltipPosition();
+    private get tooltipDelay();
+    private get dropdownMaxHeight();
+    private get showPresence();
+    private get dropdownPosition();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setupSlotObserver;
+    private updateUsers;
+    private handleAvatarClick;
+    private handleAvatarHover;
+    private handleAvatarLeave;
+    private clearTooltipTimeout;
+    private handleCounterClick;
+    private readonly handleBackdropClick;
+    private handleDropdownItemClick;
+    private handleAddClick;
+    private handleKeyDown;
+    private renderAvatar;
+    private renderProfilePicture;
+    private renderCounter;
+    private renderAddButton;
+    private renderTooltip;
+    private renderDropdown;
+    private renderDropdownItem;
+    private formatStatus;
+    render(): lit_html.TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "profile-picture-group": ProfilePictureGroup$1;
+    }
+}
+
+/**
+ * React wrapper for ProfilePictureGroup Web Component
+ *
+ * Provides a type-safe React interface for the ProfilePictureGroup web component.
+ *
+ * @example
+ * ```tsx
+ * import { ProfilePictureGroup, ProfilePicture } from '@grasco/profile-picture';
+ *
+ * function App() {
+ *   return (
+ *     <ProfilePictureGroup
+ *       max={4}
+ *       direction="ltr"
+ *       overlap={0.3}
+ *       size="md"
+ *       showAddButton
+ *       onAvatarClick={(user) => console.log('Clicked:', user)}
+ *       onAddClick={() => console.log('Add clicked')}
+ *     >
+ *       <ProfilePicture src="avatar1.jpg" alt="John Doe" data-user-id="1" />
+ *       <ProfilePicture src="avatar2.jpg" alt="Jane Smith" data-user-id="2" />
+ *       <ProfilePicture src="avatar3.jpg" alt="Bob Wilson" data-user-id="3" />
+ *     </ProfilePictureGroup>
+ *   );
+ * }
+ * ```
+ */
+
+interface ProfilePictureGroupProps {
+    /** Maximum visible avatars before showing counter (default: 4) */
+    max?: number;
+    /** Stack direction - ltr shows first on left (default: 'ltr') */
+    direction?: StackDirection;
+    /** Overlap amount as percentage 0-1 (default: 0.3) */
+    overlap?: number;
+    /** Avatar size - inherited by children (default: 'md') */
+    size?: Size | number;
+    /** Spacing between avatars in px (overrides overlap calculation) */
+    spacing?: number;
+    /** Tooltip configuration */
+    tooltip?: TooltipConfig;
+    /** Dropdown configuration for overflow users */
+    dropdown?: DropdownConfig;
+    /** Show add button (default: false) */
+    showAddButton?: boolean;
+    /** Add button label for accessibility */
+    addButtonLabel?: string;
+    /** Enable hover lift animation (default: true) */
+    animated?: boolean;
+    /** Called when an avatar is clicked */
+    onAvatarClick?: (user: GroupUserData) => void;
+    /** Called when hovering over an avatar */
+    onAvatarHover?: (user: GroupUserData) => void;
+    /** Called when the counter is clicked */
+    onCounterClick?: (hiddenUsers: GroupUserData[], open: boolean) => void;
+    /** Called when a dropdown item is clicked */
+    onDropdownItemClick?: (user: GroupUserData) => void;
+    /** Called when the add button is clicked */
+    onAddClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * ProfilePictureGroup React Component
+ *
+ * Type-safe wrapper around the profile-picture-group web component
+ */
+declare const ProfilePictureGroup: React.ForwardRefExoticComponent<ProfilePictureGroupProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * React wrapper for ProfilePicture Web Component
+ *
+ * Provides a type-safe React interface for the ProfilePicture web component.
+ *
+ * @example
+ * ```tsx
+ * import { ProfilePicture } from '@grasco/profile-picture';
+ *
+ * function App() {
+ *   return (
+ *     <ProfilePicture
+ *       src="https://example.com/avatar.png"
+ *       alt="John Doe"
+ *       size="lg"
+ *       variant="circle"
+ *       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')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+
+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;
+    onLoad?: () => void;
+    onError?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * ProfilePicture React Component
+ *
+ * Type-safe wrapper around the profile-picture web component
+ */
+declare const ProfilePicture: React.ForwardRefExoticComponent<ProfilePictureProps & React.RefAttributes<HTMLElement>>;
+
+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 };