@aspect-ops/exon-ui 0.2.2 → 0.3.0

package/dist/components/TestimonialCard/TestimonialCard.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { Rating } from '../Rating/index.js';
+
+	interface Props {
+		quote: string;
+		author: string;
+		position?: string;
+		company?: string;
+		rating?: number;
+		avatar?: string;
+		variant?: 'default' | 'minimal' | 'featured' | 'compact';
+		showQuoteMarks?: boolean;
+		class?: string;
+	}
+
+	let {
+		quote,
+		author,
+		position,
+		company,
+		rating,
+		avatar,
+		variant = 'default',
+		showQuoteMarks = false,
+		class: className = ''
+	}: Props = $props();
+
+	// Generate initials from author name
+	const initials = $derived(author.charAt(0).toUpperCase());
+
+	// Construct author title (position + company)
+	const authorTitle = $derived(() => {
+		if (position && company) return `${position} at ${company}`;
+		if (position) return position;
+		if (company) return company;
+		return '';
+	});
+</script>
+
+<article class="testimonial testimonial--{variant} {className}">
+	{#if variant === 'featured' && showQuoteMarks}
+		<div class="testimonial-quote-mark" aria-hidden="true">&ldquo;</div>
+	{/if}
+
+	{#if rating !== undefined}
+		<div class="testimonial-rating">
+			<Rating value={rating} readonly size="sm" />
+		</div>
+	{/if}
+
+	<blockquote class="testimonial-quote">
+		{quote}
+	</blockquote>
+
+	<div class="testimonial-author">
+		{#if avatar || variant !== 'minimal'}
+			<div class="testimonial-author-content">
+				{#if avatar || variant === 'default' || variant === 'featured' || variant === 'compact'}
+					<div class="testimonial-avatar">
+						{#if avatar}
+							<img src={avatar} alt={author} />
+						{:else}
+							<span class="testimonial-avatar-initials" aria-hidden="true">{initials}</span>
+						{/if}
+					</div>
+				{/if}
+				<div class="testimonial-author-info">
+					<cite class="testimonial-author-name">{author}</cite>
+					{#if authorTitle()}
+						<div class="testimonial-author-title">{authorTitle()}</div>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<cite class="testimonial-author-name">{author}</cite>
+		{/if}
+	</div>
+</article>
+
+<style>
+	.testimonial {
+		display: flex;
+		flex-direction: column;
+		background: var(--testimonial-bg, var(--color-bg-card, #ffffff));
+		border-radius: var(--radius-lg, 0.5rem);
+		padding: var(--space-lg, 1.5rem);
+		font-family: inherit;
+		position: relative;
+		transition: transform var(--transition-normal, 200ms ease);
+	}
+
+	/* Default variant - gradient background */
+	.testimonial--default {
+		background: linear-gradient(
+			135deg,
+			var(--testimonial-gradient-from, var(--color-bg-card, #ffffff)),
+			var(--testimonial-gradient-to, var(--color-bg-muted, #f9fafb))
+		);
+		box-shadow: var(
+			--shadow-md,
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06)
+		);
+	}
+
+	.testimonial--default:hover {
+		transform: translateY(-4px);
+		box-shadow: var(
+			--shadow-lg,
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05)
+		);
+	}
+
+	/* Minimal variant - simple styling */
+	.testimonial--minimal {
+		padding: var(--space-md, 1rem);
+		border-left: 3px solid var(--testimonial-border-color, var(--color-primary, #3b82f6));
+		background: transparent;
+	}
+
+	/* Featured variant - larger, emphasized */
+	.testimonial--featured {
+		padding: var(--space-xl, 2rem);
+		background: linear-gradient(
+			135deg,
+			var(--testimonial-gradient-from, var(--color-primary-light, #dbeafe)),
+			var(--testimonial-gradient-to, var(--color-bg-card, #ffffff))
+		);
+		box-shadow: var(
+			--shadow-xl,
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.04)
+		);
+	}
+
+	.testimonial--featured:hover {
+		transform: translateY(-6px);
+		box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+	}
+
+	/* Compact variant - horizontal layout */
+	.testimonial--compact {
+		padding: var(--space-md, 1rem);
+		gap: var(--space-md, 1rem);
+	}
+
+	.testimonial--compact .testimonial-quote {
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	/* Quote mark decoration for featured variant */
+	.testimonial-quote-mark {
+		position: absolute;
+		top: 0.5rem;
+		left: 0.5rem;
+		font-size: 4rem;
+		line-height: 1;
+		color: var(--testimonial-border-color, var(--color-primary, #3b82f6));
+		opacity: 0.1;
+		font-family: Georgia, serif;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	/* Rating section */
+	.testimonial-rating {
+		margin-bottom: var(--space-sm, 0.75rem);
+	}
+
+	/* Quote */
+	.testimonial-quote {
+		flex: 1;
+		margin: 0 0 var(--space-lg, 1.5rem) 0;
+		font-size: var(--text-base, 1rem);
+		line-height: var(--leading-relaxed, 1.625);
+		color: var(--testimonial-quote-color, var(--color-text, #1f2937));
+		font-style: italic;
+	}
+
+	.testimonial--featured .testimonial-quote {
+		font-size: var(--text-lg, 1.125rem);
+		line-height: var(--leading-relaxed, 1.625);
+	}
+
+	.testimonial--minimal .testimonial-quote {
+		margin-bottom: var(--space-md, 1rem);
+	}
+
+	/* Author section */
+	.testimonial-author {
+		padding-top: var(--space-md, 1rem);
+		border-top: 1px solid var(--testimonial-border-color, var(--color-border, #e5e7eb));
+	}
+
+	.testimonial--minimal .testimonial-author {
+		padding-top: var(--space-sm, 0.75rem);
+		border-top: none;
+	}
+
+	.testimonial-author-content {
+		display: flex;
+		align-items: center;
+		gap: var(--space-md, 1rem);
+	}
+
+	/* Avatar */
+	.testimonial-avatar {
+		flex-shrink: 0;
+		width: 3rem;
+		height: 3rem;
+		border-radius: var(--radius-full, 9999px);
+		overflow: hidden;
+		background: var(--color-bg-muted, #f3f4f6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.testimonial--compact .testimonial-avatar {
+		width: 2.5rem;
+		height: 2.5rem;
+	}
+
+	.testimonial-avatar img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.testimonial-avatar-initials {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
+		color: var(--color-primary, #3b82f6);
+		user-select: none;
+	}
+
+	/* Author info */
+	.testimonial-author-info {
+		min-width: 0;
+		flex: 1;
+	}
+
+	.testimonial-author-name {
+		display: block;
+		font-size: var(--text-base, 1rem);
+		font-weight: var(--font-semibold, 600);
+		font-style: normal;
+		color: var(--testimonial-author-color, var(--color-text, #1f2937));
+		line-height: var(--leading-tight, 1.25);
+		margin-bottom: var(--space-xs, 0.25rem);
+	}
+
+	.testimonial--minimal .testimonial-author-name {
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.testimonial-author-title {
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text-secondary, #6b7280);
+		line-height: var(--leading-tight, 1.25);
+	}
+
+	.testimonial--compact .testimonial-author-title {
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	/* Mobile-first responsive adjustments */
+	@media (max-width: 640px) {
+		.testimonial--featured {
+			padding: var(--space-lg, 1.5rem);
+		}
+
+		.testimonial--featured .testimonial-quote {
+			font-size: var(--text-base, 1rem);
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.testimonial--default,
+		.testimonial--featured {
+			background: linear-gradient(
+				135deg,
+				var(--testimonial-gradient-from, var(--color-bg-card, #1f2937)),
+				var(--testimonial-gradient-to, var(--color-bg-muted, #111827))
+			);
+		}
+	}
+</style>

package/dist/components/TestimonialCard/TestimonialCard.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    quote: string;
+    author: string;
+    position?: string;
+    company?: string;
+    rating?: number;
+    avatar?: string;
+    variant?: 'default' | 'minimal' | 'featured' | 'compact';
+    showQuoteMarks?: boolean;
+    class?: string;
+}
+declare const TestimonialCard: import("svelte").Component<Props, {}, "">;
+type TestimonialCard = ReturnType<typeof TestimonialCard>;
+export default TestimonialCard;

package/dist/components/TestimonialCard/index.d.ts

@@ -0,0 +1 @@
+export { default as TestimonialCard } from './TestimonialCard.svelte';

package/dist/components/TestimonialCard/index.js

@@ -0,0 +1 @@
+export { default as TestimonialCard } from './TestimonialCard.svelte';