@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/cards/GitCard.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import mailSvg from '../icon/mail.svg?raw';
+	import messageCircleSvg from '../icon/message-circle.svg?raw';
+	import userSearchSvg from '../icon/user-search.svg?raw';
+	import type { GitEmployee } from '../models/Employee.js';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+
+	export interface GitCardProps {
+		/** Employee data object */
+		git: GitEmployee;
+		/** URL for the employee's profile image */
+		imgSrc: string;
+		/**
+		 * Builds the link for the "profile" action from the employee, e.g.
+		 * `(e) => \`https://people.example.com/${e.emplid}\``. The action is hidden when omitted.
+		 */
+		profileHref?: (employee: GitEmployee) => string;
+		/**
+		 * Builds the link for the "chat" action, e.g. an MS Teams deep link
+		 * `(e) => \`MSTeams:/l/chat/0/0?users=${e.upn}\``. The action is hidden when omitted.
+		 */
+		chatHref?: (employee: GitEmployee) => string;
+		/** Builds the link for the "email" action. Defaults to `mailto:` the employee's UPN. */
+		emailHref?: (employee: GitEmployee) => string;
+	}
+
+	let {
+		git,
+		imgSrc,
+		profileHref = undefined,
+		chatHref = undefined,
+		emailHref = (e) => `mailto:${e.upn}`
+	}: GitCardProps = $props();
+</script>
+
+<div class="git-container">
+	<div class="git-image">
+		<img src={imgSrc} alt="" />
+	</div>
+	<div class="git-info">
+		<div>
+			<div class="git-name">{git.fullName}</div>
+			<div class="git-jobtitle" title={git.jobTitle}>{git.jobTitle}</div>
+		</div>
+		<div class="icons">
+			{#if chatHref}
+				<ActionIcon variant="tertiary-subtle" href={chatHref(git)} svg={messageCircleSvg} />
+			{/if}
+			<ActionIcon variant="tertiary-subtle" href={emailHref(git)} svg={mailSvg} />
+			{#if profileHref}
+				<ActionIcon variant="tertiary-subtle" href={profileHref(git)} svg={userSearchSvg} />
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.git-container {
+		display: flex;
+		border-top-left-radius: 3rem;
+		overflow: hidden;
+		width: 375px;
+	}
+
+	.git-image {
+		width: 96px;
+		flex: 0 0 96px;
+		height: 96px;
+	}
+
+	.git-info {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		justify-content: space-between;
+		padding: 0.25rem 0.5rem;
+		width: 100%;
+		border: 1px solid rgb(222, 226, 230);
+		border-left: none;
+	}
+
+	.git-name {
+		font-size: 1.25rem;
+		font-style: normal;
+		font-weight: 600;
+		color: var(--ui-primary);
+	}
+
+	.git-jobtitle {
+		font-size: 0.875rem;
+		color: #4e4e4e;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.icons {
+		display: flex;
+	}
+
+	:global(.dark) {
+		.git-info {
+			background: rgb(16, 17, 19);
+			border: none;
+		}
+
+		.git-name {
+			color: var(--text-color);
+		}
+
+		.git-jobtitle {
+			color: lightgrey;
+		}
+	}
+</style>

package/dist/cards/GitCard.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { GitEmployee } from '../models/Employee.js';
+export interface GitCardProps {
+    /** Employee data object */
+    git: GitEmployee;
+    /** URL for the employee's profile image */
+    imgSrc: string;
+    /**
+     * Builds the link for the "profile" action from the employee, e.g.
+     * `(e) => \`https://people.example.com/${e.emplid}\``. The action is hidden when omitted.
+     */
+    profileHref?: (employee: GitEmployee) => string;
+    /**
+     * Builds the link for the "chat" action, e.g. an MS Teams deep link
+     * `(e) => \`MSTeams:/l/chat/0/0?users=${e.upn}\``. The action is hidden when omitted.
+     */
+    chatHref?: (employee: GitEmployee) => string;
+    /** Builds the link for the "email" action. Defaults to `mailto:` the employee's UPN. */
+    emailHref?: (employee: GitEmployee) => string;
+}
+declare const GitCard: import("svelte").Component<GitCardProps, {}, "">;
+type GitCard = ReturnType<typeof GitCard>;
+export default GitCard;

package/dist/display/Avatar.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
 	import Icon from '../icon/Icon.svelte';
 
-	interface Props {
+	export interface AvatarProps {
+		/** Image source URL */
 		src: string;
+		/** Alt text for the image */
 		alt?: string;
+		/** Size of the avatar in rem */
 		size?: number;
+		/** Initials to display when image fails to load */
 		initials?: string;
+		/** SVG icon to display as fallback */
 		fallBackSvg?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** URL to navigate to when avatar is clicked */
 		href?: string;
+		/** Background color for the avatar */
 		backgroundColor?: string;
+		/** Shape of the avatar */
 		shape?: 'circle' | 'rounded' | 'square';
+		/** Click event handler */
 		onClick?: () => void;
 	}
 
@@ -25,7 +35,7 @@
 		backgroundColor,
 		shape = 'circle',
 		onClick
-	}: Props = $props();
+	}: AvatarProps = $props();
 
 	let imgExists = $state(true);
 	const sizeText = $derived(size ? `${size}rem` : '');
@@ -101,17 +111,17 @@
 		display: inline-flex;
 		background: none;
 		border: none;
-		color: var(--pui-color-black);
+		color: black;
 		padding: 0;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: all 0.2s ease-in-out;
 		text-decoration: none;
 
 		.avatar {
 			cursor: pointer;
 
 			&:hover {
-				background: var(--pui-color-primary);
-				color: var(--pui-text-primary);
+				background: var(--ui-primary);
+				color: var(--text-color);
 			}
 		}
 
@@ -122,45 +132,47 @@
 
 	.avatar {
 		object-fit: cover;
-		background: var(--pui-color-gray-200);
+		background: #e8e8e8;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: all 0.2s ease-in-out;
 	}
 
 	.avatar.circle {
-		border-radius: var(--pui-radius-full);
+		border-radius: 50%;
 	}
 
 	.avatar.rounded {
-		border-radius: var(--pui-radius-lg);
+		border-radius: 6px;
 	}
 
 	.initials {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--pui-color-white);
-		font-weight: var(--pui-font-weight-bold);
-		border-radius: var(--pui-radius-full);
+		/* background-color: #ccc; Fallback color for initials */
+		color: #fff; /* Text color for initials */
+		/* font-size: calc({size} / 2); Adjust font size based on avatar size */
+		font-weight: bold;
+		border-radius: 50%;
 	}
 
 	:global(.dark) {
 		.avatar-container button,
 		.avatar-container a {
-			color: var(--pui-text-primary);
+			color: var(--text-color);
 
 			.avatar {
 				&:hover {
-					background: var(--pui-color-secondary);
-					color: var(--pui-color-black);
+					background: var(--ui-accent);
+					color: black;
 				}
 			}
 		}
 
 		.avatar {
-			background: var(--pui-color-dark-500);
+			background: rgb(6, 7, 9); /* Dark mode background color */
 		}
 	}
 </style>

package/dist/display/Avatar.svelte.d.ts

@@ -1,15 +1,25 @@
-interface Props {
+export interface AvatarProps {
+    /** Image source URL */
     src: string;
+    /** Alt text for the image */
     alt?: string;
+    /** Size of the avatar in rem */
     size?: number;
+    /** Initials to display when image fails to load */
     initials?: string;
+    /** SVG icon to display as fallback */
     fallBackSvg?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** URL to navigate to when avatar is clicked */
     href?: string;
+    /** Background color for the avatar */
     backgroundColor?: string;
+    /** Shape of the avatar */
     shape?: 'circle' | 'rounded' | 'square';
+    /** Click event handler */
     onClick?: () => void;
 }
-declare const Avatar: import("svelte").Component<Props, {}, "">;
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/display/LinkCollection.svelte

@@ -4,13 +4,20 @@
 	import Link from '../ui/Link.svelte';
 	import type { LinkCollectionItem } from '../models/LinkCollectionItem.js';
 
-	interface Props {
+	export interface LinkCollectionProps {
+		/** Array of simple hyperlinks */
 		links?: Hyperlink[];
+		/** Array of rich link items with more options */
 		items?: LinkCollectionItem[];
+		/** Additional CSS classes */
 		classes?: string;
+		/** Footer action buttons */
 		footerButtons?: Hyperlink[];
+		/** Disable rounded corners */
 		notRounded?: boolean;
+		/** Remove outside border */
 		noOutsideBorder?: boolean;
+		/** Remove separator lines between items */
 		noSeperator?: boolean;
 	}
 
@@ -22,7 +29,7 @@
 		notRounded = false,
 		noOutsideBorder = false,
 		noSeperator = false
-	}: Props = $props();
+	}: LinkCollectionProps = $props();
 </script>
 
 <div
@@ -31,7 +38,12 @@
 		: ''} {noSeperator ? 'no-seperator' : ''}"
 >
 	{#each links as link}
-		<Link class="link" target={link.newTab ? '_blank' : undefined} href={link.href}>
+		<Link
+			class="link"
+			target={link.newTab ? '_blank' : undefined}
+			href={link.href}
+			onclick={link.onclick}
+		>
 			{#if link.svg}
 				<Icon svg={link.svg} size="18px" />
 			{/if}
@@ -39,7 +51,12 @@
 		</Link>
 	{/each}
 	{#each items as item}
-		<Link class="link item" target={item.newTab ? '_blank' : undefined} href={item.href}>
+		<Link
+			class="link item"
+			target={item.newTab ? '_blank' : undefined}
+			href={item.href}
+			onclick={item.onclick}
+		>
 			<div class="link-inner left">
 				{#if item.leftSvg}
 					<Icon svg={item.leftSvg} size="18px" />
@@ -58,7 +75,12 @@
 		<div class="footer">
 			{#each footerButtons as button}
 				<div class="footer-button">
-					<Link class="link" target={button.newTab ? '_blank' : undefined} href={button.href}>
+					<Link
+						class="link"
+						target={button.newTab ? '_blank' : undefined}
+						href={button.href}
+						onclick={button.onclick}
+					>
 						{#if button.svg}
 							<Icon svg={button.svg} size="18px" />
 						{/if}
@@ -74,8 +96,8 @@
 	.link-collection {
 		display: flex;
 		flex-direction: column;
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
+		border: 1px solid var(--border-color);
+		border-radius: 6px;
 	}
 
 	.link-collection.not-rounded {
@@ -98,7 +120,7 @@
 	.link-inner {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 	}
 
 	.link-inner.left {
@@ -106,18 +128,18 @@
 	}
 
 	.link-collection :global(.link) {
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		border-bottom: 1px solid var(--pui-border-default);
-		padding: var(--pui-spacing-2);
+		transition: all 200ms;
+		border-bottom: 1px solid var(--border-color);
+		padding: 0.5rem;
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 		text-decoration: none;
-		color: var(--pui-color-accent);
+		color: var(--ui-tertiary-dark);
 		font-weight: normal;
 
 		&:hover {
-			background: var(--pui-bg-hover);
+			background: #b7e1d8;
 		}
 
 		&:last-child {
@@ -127,12 +149,12 @@
 
 	:global(.dark) {
 		.link-collection :global(.link) {
-			color: var(--pui-color-accent);
+			color: var(--ui-tertiary);
 		}
 
 		.link-collection :global(.link) {
 			&:hover {
-				background: var(--pui-bg-hover);
+				background: var(--ui-primary);
 			}
 		}
 	}
@@ -143,11 +165,11 @@
 
 	.footer-button {
 		flex: 1;
-		border-right: 1px solid var(--pui-border-default);
+		border-right: 1px solid var(--border-color);
 	}
 
 	.link-collection .footer-button :global(.link) {
-		font-weight: var(--pui-font-weight-semibold);
+		font-weight: 600;
 	}
 
 	.footer-button:last-child {

package/dist/display/LinkCollection.svelte.d.ts

@@ -1,14 +1,21 @@
 import type { Hyperlink } from '../models/Hyperlink.js';
 import type { LinkCollectionItem } from '../models/LinkCollectionItem.js';
-interface Props {
+export interface LinkCollectionProps {
+    /** Array of simple hyperlinks */
     links?: Hyperlink[];
+    /** Array of rich link items with more options */
     items?: LinkCollectionItem[];
+    /** Additional CSS classes */
     classes?: string;
+    /** Footer action buttons */
     footerButtons?: Hyperlink[];
+    /** Disable rounded corners */
     notRounded?: boolean;
+    /** Remove outside border */
     noOutsideBorder?: boolean;
+    /** Remove separator lines between items */
     noSeperator?: boolean;
 }
-declare const LinkCollection: import("svelte").Component<Props, {}, "">;
+declare const LinkCollection: import("svelte").Component<LinkCollectionProps, {}, "">;
 type LinkCollection = ReturnType<typeof LinkCollection>;
 export default LinkCollection;

package/dist/display/Paper.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
+	export interface PaperProps {
+		/** CSS classes for the outer container */
 		containerClass?: string;
+		/** CSS classes for the body section */
 		bodyClass?: string;
+		/** CSS classes for the title section */
 		titleClass?: string;
+		/** Title text displayed in the header */
 		title?: string;
+		/** Remove default padding from the body */
 		noPadding?: boolean;
+		/** Remove default gap between title and body */
 		noGap?: boolean;
+		/** Minimum height for the body section */
 		minBodyHeight?: string;
+		/** Callback when title is clicked */
 		onTitleClick?: () => void;
+		/** Action buttons displayed in the title bar */
 		buttons?: Snippet;
+		/** Main content of the paper */
 		children?: Snippet;
 	}
 
 	let {
-		class: className = '',
 		containerClass = '',
 		bodyClass = '',
 		titleClass = '',
@@ -27,10 +35,10 @@
 		onTitleClick = () => {},
 		buttons,
 		children
-	}: Props = $props();
+	}: PaperProps = $props();
 </script>
 
-<div class="paper rounded {containerClass} {className}">
+<div class="paper rounded {containerClass}">
 	{#if title}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -54,9 +62,9 @@
 
 <style>
 	.paper-body {
-		border-radius: var(--pui-radius-base);
+		border-radius: 0.25rem;
 		position: relative;
-		padding: var(--pui-spacing-3);
+		padding: 0.75rem;
 		flex-grow: 1;
 	}
 
@@ -71,24 +79,27 @@
 	}
 
 	.paper-body-bg {
-		background-color: var(--pui-paper-body-bg);
+		background-color: var(--paper-body-bg);
 	}
 
 	.paper {
-		box-shadow: var(--pui-shadow-sm);
+		box-shadow:
+			rgba(0, 0, 0, 0.05) 0px 1px 3px 0px,
+			rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.paper-title {
-		border-bottom: 1px solid var(--pui-border-disabled);
-		background: var(--pui-paper-title-bg);
-		border-color: var(--pui-paper-title-border);
-		border-top-left-radius: var(--pui-radius-base);
-		border-top-right-radius: var(--pui-radius-base);
-		font-weight: var(--pui-font-weight-semibold);
+		border-bottom: 1px solid #ccc;
+		background: var(--paper-title-bg);
+		border-color: var(--paper-title-border);
+		border-top-left-radius: 0.25rem;
+		border-top-right-radius: 0.25rem;
 		display: flex;
 		justify-content: space-between;
+
+		/* bg-paper-title rounded-t font-semibold flex justify-between border-paper-border */
 	}
 
 	:global(.dark) .paper-title {
@@ -96,20 +107,21 @@
 	}
 
 	.paper-title-text {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
+		padding: 0.5rem 0.75rem;
+		font-weight: 600;
 	}
 
 	.paper-title-buttons {
-		margin-right: var(--pui-spacing-2);
+		margin-right: 0.5rem;
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 
 	.gap {
 		display: flex;
 		flex-direction: column;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 	}
 
 	.p-0 {

package/dist/display/Paper.svelte.d.ts

@@ -1,17 +1,26 @@
 import type { Snippet } from 'svelte';
-interface Props {
-    class?: string;
+export interface PaperProps {
+    /** CSS classes for the outer container */
     containerClass?: string;
+    /** CSS classes for the body section */
     bodyClass?: string;
+    /** CSS classes for the title section */
     titleClass?: string;
+    /** Title text displayed in the header */
     title?: string;
+    /** Remove default padding from the body */
     noPadding?: boolean;
+    /** Remove default gap between title and body */
     noGap?: boolean;
+    /** Minimum height for the body section */
     minBodyHeight?: string;
+    /** Callback when title is clicked */
     onTitleClick?: () => void;
+    /** Action buttons displayed in the title bar */
     buttons?: Snippet;
+    /** Main content of the paper */
     children?: Snippet;
 }
-declare const Paper: import("svelte").Component<Props, {}, "">;
+declare const Paper: import("svelte").Component<PaperProps, {}, "">;
 type Paper = ReturnType<typeof Paper>;
 export default Paper;