claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
67 lines • 2.37 kB
TypeScript
export interface UserProfile {
id: string;
name: string;
avatar?: string;
status: 'online' | 'away' | 'busy' | 'offline' | 'typing';
role?: string;
title?: string;
department?: string;
location?: string;
timezone?: string;
lastSeen?: string;
isCurrentUser?: boolean;
customFields?: Array<{
label: string;
value: string;
type: 'text' | 'link' | 'email';
}>;
}
type $$ComponentProps = {
user: UserProfile;
variant?: 'default' | 'compact' | 'minimal';
size?: 'sm' | 'md' | 'lg';
showActions?: boolean;
showPresence?: boolean;
showCustomFields?: boolean;
class?: string;
onusermessage?: (event: CustomEvent<{
user: UserProfile;
}>) => void;
onusercall?: (event: CustomEvent<{
user: UserProfile;
}>) => void;
onuserprofile?: (event: CustomEvent<{
user: UserProfile;
}>) => void;
onuserblock?: (event: CustomEvent<{
user: UserProfile;
}>) => void;
onuserreport?: (event: CustomEvent<{
user: UserProfile;
}>) => void;
};
/**
* UserProfileCard
*
* Hover popover user profile card component for navigation interfaces.
* Features user avatar, name, status, role information, presence indicators,
* and quick action buttons with proper accessibility and keyboard navigation.
*
* @prop {UserProfile} user - User profile information
* @prop {string} [variant='default'] - Card variant (default, compact, minimal)
* @prop {string} [size='md'] - Card size (sm, md, lg)
* @prop {boolean} [showActions=true] - Whether to show action buttons
* @prop {boolean} [showPresence=true] - Whether to show presence indicators
* @prop {boolean} [showCustomFields=true] - Whether to show custom metadata fields
* @prop {string} [className] - Additional CSS classes
*
* @event user-message - Fired when message button is clicked
* @event user-call - Fired when call button is clicked
* @event user-profile - Fired when view profile button is clicked
* @event user-block - Fired when block button is clicked
* @event user-report - Fired when report button is clicked
*/
declare const UserProfileCard: import("svelte").Component<$$ComponentProps, {}, "">;
type UserProfileCard = ReturnType<typeof UserProfileCard>;
export default UserProfileCard;
//# sourceMappingURL=UserProfileCard.svelte.d.ts.map