@aspect-ops/exon-ui 0.2.2 → 0.3.0

package/dist/components/Hero/Hero.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface HeroProps {
+		variant?: 'default' | 'centered' | 'split' | 'video';
+		backgroundImage?: string;
+		backgroundVideo?: string;
+		overlay?: boolean | string;
+		overlayOpacity?: number;
+		height?: 'auto' | 'screen' | 'half' | string;
+		align?: 'left' | 'center' | 'right';
+		class?: string;
+		children: Snippet;
+		actions?: Snippet;
+		badge?: Snippet;
+		media?: Snippet;
+	}
+
+	let {
+		variant = 'default',
+		backgroundImage,
+		backgroundVideo,
+		overlay = false,
+		overlayOpacity = 0.6,
+		height = 'screen',
+		align = 'left',
+		class: className = '',
+		children,
+		actions,
+		badge,
+		media
+	}: HeroProps = $props();
+
+	const heightValue = $derived(() => {
+		switch (height) {
+			case 'screen':
+				return '100vh';
+			case 'half':
+				return '50vh';
+			case 'auto':
+				return 'auto';
+			default:
+				return height;
+		}
+	});
+
+	const overlayColor = $derived(() => {
+		if (overlay === true)
+			return 'rgba(0, 0, 0, var(--hero-overlay-opacity, ' + overlayOpacity + '))';
+		if (typeof overlay === 'string') return overlay;
+		return 'transparent';
+	});
+</script>
+
+<section
+	class="hero hero--{variant} hero--align-{align} {className}"
+	role="banner"
+	style:--hero-height={heightValue()}
+	style:--hero-overlay-color={overlayColor()}
+	style:--hero-overlay-opacity={overlayOpacity}
+>
+	{#if backgroundImage && variant !== 'video'}
+		<div class="hero__background" aria-hidden="true">
+			<img src={backgroundImage} alt="" loading="lazy" />
+		</div>
+	{/if}
+
+	{#if variant === 'video' && backgroundVideo}
+		<div class="hero__background hero__background--video" aria-hidden="true">
+			<video autoplay muted loop playsinline poster={backgroundImage}>
+				<source src={backgroundVideo} type="video/mp4" />
+			</video>
+		</div>
+	{/if}
+
+	{#if overlay}
+		<div class="hero__overlay" aria-hidden="true"></div>
+	{/if}
+
+	<div class="hero__content">
+		{#if badge}
+			<div class="hero__badge">
+				{@render badge()}
+			</div>
+		{/if}
+
+		<div class="hero__main">
+			{@render children()}
+		</div>
+
+		{#if actions}
+			<div class="hero__actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+
+	{#if variant === 'split' && media}
+		<div class="hero__media">
+			{@render media()}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.hero {
+		position: relative;
+		display: flex;
+		min-height: var(--hero-min-height, var(--hero-height, 100vh));
+		padding: var(
+			--hero-padding,
+			max(env(safe-area-inset-top), 3rem) max(env(safe-area-inset-right), 1.5rem)
+				max(env(safe-area-inset-bottom), 3rem) max(env(safe-area-inset-left), 1.5rem)
+		);
+		overflow: hidden;
+		animation: hero-fade-in 0.6s ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hero {
+			animation: none;
+		}
+	}
+
+	@keyframes hero-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(1rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* Background */
+	.hero__background {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+	}
+
+	.hero__background img,
+	.hero__background video {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.hero__background--video video {
+		pointer-events: none;
+	}
+
+	/* Overlay */
+	.hero__overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: var(--hero-overlay-color);
+		z-index: 1;
+	}
+
+	/* Content */
+	.hero__content {
+		position: relative;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		width: 100%;
+		max-width: var(--hero-content-max-width, 75rem);
+		margin: 0 auto;
+		color: var(--hero-text-color, inherit);
+	}
+
+	.hero__badge {
+		display: inline-flex;
+	}
+
+	.hero__main {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.hero__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	/* Variants */
+	.hero--default {
+		align-items: center;
+	}
+
+	.hero--centered {
+		align-items: center;
+		text-align: center;
+	}
+
+	.hero--centered .hero__content {
+		align-items: center;
+	}
+
+	.hero--centered .hero__badge {
+		align-self: center;
+	}
+
+	.hero--centered .hero__actions {
+		justify-content: center;
+	}
+
+	.hero--split {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 2rem;
+		align-items: center;
+	}
+
+	.hero--split .hero__content {
+		max-width: none;
+	}
+
+	.hero__media {
+		position: relative;
+		z-index: 2;
+		width: 100%;
+	}
+
+	.hero__media :global(img),
+	.hero__media :global(video) {
+		width: 100%;
+		height: auto;
+		border-radius: 0.5rem;
+	}
+
+	.hero--video {
+		align-items: center;
+	}
+
+	/* Alignment */
+	.hero--align-left .hero__content {
+		align-items: flex-start;
+		text-align: left;
+	}
+
+	.hero--align-center .hero__content {
+		align-items: center;
+		text-align: center;
+	}
+
+	.hero--align-right .hero__content {
+		align-items: flex-end;
+		text-align: right;
+	}
+
+	/* Responsive */
+	@media (min-width: 48rem) {
+		.hero {
+			padding: var(
+				--hero-padding,
+				max(env(safe-area-inset-top), 4rem) max(env(safe-area-inset-right), 2rem)
+					max(env(safe-area-inset-bottom), 4rem) max(env(safe-area-inset-left), 2rem)
+			);
+		}
+
+		.hero--split {
+			grid-template-columns: 1fr 1fr;
+			gap: 3rem;
+		}
+
+		.hero__content {
+			gap: 2rem;
+		}
+
+		.hero__main {
+			gap: 1.5rem;
+		}
+
+		.hero__actions {
+			gap: 1.5rem;
+			margin-top: 1rem;
+		}
+	}
+
+	@media (min-width: 64rem) {
+		.hero {
+			padding: var(
+				--hero-padding,
+				max(env(safe-area-inset-top), 5rem) max(env(safe-area-inset-right), 3rem)
+					max(env(safe-area-inset-bottom), 5rem) max(env(safe-area-inset-left), 3rem)
+			);
+		}
+
+		.hero--split {
+			gap: 4rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export interface HeroProps {
+    variant?: 'default' | 'centered' | 'split' | 'video';
+    backgroundImage?: string;
+    backgroundVideo?: string;
+    overlay?: boolean | string;
+    overlayOpacity?: number;
+    height?: 'auto' | 'screen' | 'half' | string;
+    align?: 'left' | 'center' | 'right';
+    class?: string;
+    children: Snippet;
+    actions?: Snippet;
+    badge?: Snippet;
+    media?: Snippet;
+}
+declare const Hero: import("svelte").Component<HeroProps, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

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

@@ -0,0 +1,2 @@
+export { default as Hero } from './Hero.svelte';
+export type { HeroProps } from './Hero.svelte';

package/dist/components/Hero/index.js

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

package/dist/components/LogoCloud/LogoCloud.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+	export interface LogoItem {
+		src: string;
+		alt: string;
+		href?: string;
+	}
+
+	export interface LogoCloudProps {
+		logos: LogoItem[];
+		columns?: 2 | 3 | 4 | 5 | 6;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'grid' | 'scroll' | 'marquee';
+		grayscale?: boolean;
+		hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+		gap?: 'sm' | 'md' | 'lg' | 'xl';
+		title?: string;
+		subtitle?: string;
+		class?: string;
+	}
+
+	let {
+		logos,
+		columns = 4,
+		size = 'md',
+		variant = 'grid',
+		grayscale = false,
+		hoverEffect = 'scale',
+		gap = 'md',
+		title,
+		subtitle,
+		class: className = ''
+	}: LogoCloudProps = $props();
+
+	const sizeMap = {
+		sm: '2rem',
+		md: '3rem',
+		lg: '4rem'
+	};
+
+	const gapMap = {
+		sm: '1rem',
+		md: '2rem',
+		lg: '3rem',
+		xl: '4rem'
+	};
+
+	// For marquee variant, duplicate logos for seamless infinite scroll
+	const displayLogos = $derived(variant === 'marquee' ? [...logos, ...logos] : logos);
+</script>
+
+<div class="logo-cloud-wrapper {className}">
+	{#if title || subtitle}
+		<div class="logo-cloud-header">
+			{#if title}
+				<h2 class="logo-cloud-title">{title}</h2>
+			{/if}
+			{#if subtitle}
+				<p class="logo-cloud-subtitle">{subtitle}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="logo-cloud logo-cloud--{variant} logo-cloud--{size} logo-cloud--gap-{gap} logo-cloud--hover-{hoverEffect}"
+		class:logo-cloud--grayscale={grayscale}
+		style="--logo-cloud-height: {sizeMap[size]}; --logo-cloud-gap: {gapMap[
+			gap
+		]}; --logo-cloud-columns: {columns};"
+		aria-label={title || 'Partner logos'}
+		role="region"
+	>
+		<div class="logo-cloud-container">
+			{#each displayLogos as logo, index}
+				<div class="logo-cloud-item" aria-hidden={variant === 'marquee' && index >= logos.length}>
+					{#if logo.href}
+						<a href={logo.href} class="logo-cloud-link" target="_blank" rel="noopener noreferrer">
+							<img
+								src={logo.src}
+								alt={logo.alt}
+								class="logo-cloud-image"
+								loading="lazy"
+								decoding="async"
+							/>
+						</a>
+					{:else}
+						<img
+							src={logo.src}
+							alt={logo.alt}
+							class="logo-cloud-image"
+							loading="lazy"
+							decoding="async"
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.logo-cloud-wrapper {
+		width: 100%;
+	}
+
+	.logo-cloud-header {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.logo-cloud-title {
+		font-size: 2rem;
+		font-weight: 700;
+		margin: 0 0 0.5rem 0;
+		color: var(--logo-cloud-title-color, var(--text-primary, #1a1a1a));
+	}
+
+	.logo-cloud-subtitle {
+		font-size: 1rem;
+		margin: 0;
+		color: var(--logo-cloud-subtitle-color, var(--text-secondary, #666));
+	}
+
+	.logo-cloud {
+		width: 100%;
+		--logo-cloud-gap: 2rem;
+		--logo-cloud-height: 3rem;
+		--logo-cloud-columns: 4;
+		--logo-cloud-grayscale-opacity: 0.6;
+		--logo-cloud-transition: all 0.3s ease;
+	}
+
+	/* Grid variant */
+	.logo-cloud--grid .logo-cloud-container {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: var(--logo-cloud-gap);
+		align-items: center;
+		justify-items: center;
+	}
+
+	@media (min-width: 768px) {
+		.logo-cloud--grid .logo-cloud-container {
+			grid-template-columns: repeat(var(--logo-cloud-columns), 1fr);
+		}
+	}
+
+	/* Scroll variant */
+	.logo-cloud--scroll {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb, #ccc) var(--scrollbar-track, #f0f0f0);
+	}
+
+	.logo-cloud--scroll .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		padding-bottom: 1rem;
+		min-width: min-content;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar {
+		height: 0.5rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-track {
+		background: var(--scrollbar-track, #f0f0f0);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb {
+		background: var(--scrollbar-thumb, #ccc);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+		background: var(--scrollbar-thumb-hover, #999);
+	}
+
+	/* Marquee variant */
+	.logo-cloud--marquee {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.logo-cloud--marquee .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		animation: marquee 30s linear infinite;
+		width: fit-content;
+	}
+
+	@keyframes marquee {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(-50%);
+		}
+	}
+
+	.logo-cloud--marquee:hover .logo-cloud-container,
+	.logo-cloud--marquee:focus-within .logo-cloud-container {
+		animation-play-state: paused;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.logo-cloud--marquee .logo-cloud-container {
+			animation: none;
+		}
+	}
+
+	/* Logo items */
+	.logo-cloud-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: var(--logo-cloud-transition);
+		flex-shrink: 0;
+	}
+
+	.logo-cloud--scroll .logo-cloud-item,
+	.logo-cloud--marquee .logo-cloud-item {
+		min-width: calc(var(--logo-cloud-height) * 2);
+	}
+
+	.logo-cloud-link {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		width: 100%;
+		height: 100%;
+		transition: var(--logo-cloud-transition);
+	}
+
+	.logo-cloud-link:focus {
+		outline: 2px solid var(--focus-ring-color, #0066ff);
+		outline-offset: 0.25rem;
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud-image {
+		height: var(--logo-cloud-height);
+		width: auto;
+		max-width: 100%;
+		object-fit: contain;
+		transition: var(--logo-cloud-transition);
+	}
+
+	/* Grayscale mode */
+	.logo-cloud--grayscale .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--grayscale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* Hover effects */
+	/* Scale effect */
+	.logo-cloud--hover-scale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:focus .logo-cloud-image {
+		transform: scale(1.1);
+	}
+
+	/* Lift effect */
+	.logo-cloud--hover-lift .logo-cloud-item:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:focus {
+		transform: translateY(-0.5rem);
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+	}
+
+	/* Glow effect */
+	.logo-cloud--hover-glow .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:focus .logo-cloud-image {
+		filter: drop-shadow(0 0 1rem rgba(0, 102, 255, 0.3));
+	}
+
+	/* Color effect (similar to grayscale but forces it) */
+	.logo-cloud--hover-color .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--hover-color .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* None effect - no additional styles needed */
+	.logo-cloud--hover-none .logo-cloud-item:hover,
+	.logo-cloud--hover-none .logo-cloud-link:hover {
+		transform: none;
+		box-shadow: none;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.logo-cloud-title {
+			color: var(--logo-cloud-title-color, var(--text-primary, #ffffff));
+		}
+
+		.logo-cloud-subtitle {
+			color: var(--logo-cloud-subtitle-color, var(--text-secondary, #a0a0a0));
+		}
+
+		.logo-cloud--scroll {
+			scrollbar-color: var(--scrollbar-thumb, #555) var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-track {
+			background: var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb {
+			background: var(--scrollbar-thumb, #555);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+			background: var(--scrollbar-thumb-hover, #777);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+export interface LogoItem {
+    src: string;
+    alt: string;
+    href?: string;
+}
+export interface LogoCloudProps {
+    logos: LogoItem[];
+    columns?: 2 | 3 | 4 | 5 | 6;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'grid' | 'scroll' | 'marquee';
+    grayscale?: boolean;
+    hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+    gap?: 'sm' | 'md' | 'lg' | 'xl';
+    title?: string;
+    subtitle?: string;
+    class?: string;
+}
+declare const LogoCloud: import("svelte").Component<LogoCloudProps, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

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

@@ -0,0 +1,2 @@
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { LogoItem, LogoCloudProps } from './LogoCloud.svelte';

package/dist/components/LogoCloud/index.js

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