@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/dist/components/ServiceCard/ServiceCard.svelte

@@ -0,0 +1,359 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface ServiceCardProps {
+		title: string;
+		description: string;
+		icon?: string | Snippet;
+		href?: string;
+		gradient?: string | [string, string]; // single color or [from, to]
+		variant?: 'gradient' | 'outlined' | 'filled' | 'glass';
+		size?: 'sm' | 'md' | 'lg';
+		linkText?: string; // default "Learn More"
+		class?: string;
+		onclick?: () => void;
+	}
+
+	let {
+		title,
+		description,
+		icon,
+		href,
+		gradient,
+		variant = 'gradient',
+		size = 'md',
+		linkText = 'Learn More',
+		class: className = '',
+		onclick
+	}: ServiceCardProps = $props();
+
+	// Determine if the icon is an emoji (single character)
+	const isEmoji = $derived(typeof icon === 'string' && icon.length <= 2);
+	const isIconName = $derived(typeof icon === 'string' && icon.length > 2);
+
+	// Build gradient style
+	const gradientStyle = $derived(() => {
+		if (!gradient || variant !== 'gradient') return '';
+		if (typeof gradient === 'string') {
+			return `--service-card-gradient-from: ${gradient}; --service-card-gradient-to: ${gradient};`;
+		}
+		return `--service-card-gradient-from: ${gradient[0]}; --service-card-gradient-to: ${gradient[1]};`;
+	});
+
+	// Determine component type
+	const Component = $derived(href ? 'a' : 'div');
+	const isClickable = $derived(!!href || !!onclick);
+
+	function handleClick(e: MouseEvent) {
+		if (onclick && !href) {
+			onclick();
+		}
+	}
+</script>
+
+<svelte:element
+	this={Component}
+	{href}
+	class="service-card service-card--{variant} service-card--{size} {className}"
+	style={gradientStyle()}
+	onclick={handleClick}
+	role={isClickable && !href ? 'button' : undefined}
+	tabindex={isClickable && !href ? 0 : undefined}
+	onkeydown={(e) => {
+		if (isClickable && !href && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			handleClick(e);
+		}
+	}}
+>
+	{#if icon}
+		<div class="service-card__icon">
+			{#if isEmoji}
+				<span class="service-card__emoji" aria-hidden="true">{icon}</span>
+			{:else if isIconName}
+				<span class="service-card__icon-name" aria-hidden="true">{icon}</span>
+			{:else if typeof icon !== 'string'}
+				{@render icon()}
+			{/if}
+		</div>
+	{/if}
+
+	<div class="service-card__content">
+		<h3 class="service-card__title">{title}</h3>
+		<p class="service-card__description">{description}</p>
+
+		{#if isClickable}
+			<span class="service-card__link">
+				{linkText}
+				<span class="service-card__arrow" aria-hidden="true">→</span>
+			</span>
+		{/if}
+	</div>
+</svelte:element>
+
+<style>
+	.service-card {
+		/* CSS Variables */
+		--service-card-gradient-from: #667eea;
+		--service-card-gradient-to: #764ba2;
+		--service-card-text-color: #ffffff;
+		--service-card-padding: 1.5rem;
+		--service-card-radius: 0.75rem;
+
+		/* Base styles */
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: var(--service-card-padding);
+		border-radius: var(--service-card-radius);
+		color: var(--service-card-text-color);
+		text-decoration: none;
+		position: relative;
+		transition:
+			transform 0.3s ease,
+			box-shadow 0.3s ease;
+		min-height: 16rem;
+		overflow: hidden;
+	}
+
+	/* Clickable states */
+	.service-card[href],
+	.service-card[role='button'] {
+		cursor: pointer;
+	}
+
+	.service-card:hover {
+		transform: translateY(-0.25rem);
+	}
+
+	.service-card:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Gradient variant */
+	.service-card--gradient {
+		background: linear-gradient(
+			135deg,
+			var(--service-card-gradient-from),
+			var(--service-card-gradient-to)
+		);
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.service-card--gradient:hover {
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+	}
+
+	/* Outlined variant */
+	.service-card--outlined {
+		background: transparent;
+		border: 2px solid currentColor;
+		color: var(--text-color, #1f2937);
+		--service-card-text-color: var(--text-color, #1f2937);
+		transition:
+			transform 0.3s ease,
+			box-shadow 0.3s ease,
+			background-color 0.3s ease;
+	}
+
+	.service-card--outlined:hover {
+		background-color: rgba(102, 126, 234, 0.05);
+	}
+
+	/* Filled variant */
+	.service-card--filled {
+		background: var(--service-card-gradient-from, #667eea);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.service-card--filled:hover {
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+	}
+
+	/* Glass variant */
+	.service-card--glass {
+		background: rgba(255, 255, 255, 0.1);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		color: var(--text-color, #1f2937);
+		--service-card-text-color: var(--text-color, #1f2937);
+	}
+
+	.service-card--glass:hover {
+		background: rgba(255, 255, 255, 0.15);
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+	}
+
+	/* Size variants */
+	.service-card--sm {
+		--service-card-padding: 1rem;
+		min-height: 12rem;
+		gap: 0.75rem;
+	}
+
+	.service-card--md {
+		--service-card-padding: 1.5rem;
+		min-height: 16rem;
+		gap: 1rem;
+	}
+
+	.service-card--lg {
+		--service-card-padding: 2rem;
+		min-height: 20rem;
+		gap: 1.5rem;
+	}
+
+	/* Icon */
+	.service-card__icon {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	.service-card__emoji {
+		font-size: 3rem;
+		line-height: 1;
+	}
+
+	.service-card--sm .service-card__emoji {
+		font-size: 2rem;
+	}
+
+	.service-card--lg .service-card__emoji {
+		font-size: 4rem;
+	}
+
+	.service-card__icon-name {
+		font-size: 1.5rem;
+		font-weight: 600;
+	}
+
+	/* Content */
+	.service-card__content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		flex: 1;
+	}
+
+	.service-card__title {
+		margin: 0;
+		font-size: 1.5rem;
+		font-weight: 700;
+		line-height: 1.3;
+		color: inherit;
+	}
+
+	.service-card--sm .service-card__title {
+		font-size: 1.25rem;
+	}
+
+	.service-card--lg .service-card__title {
+		font-size: 1.75rem;
+	}
+
+	.service-card__description {
+		margin: 0;
+		font-size: 1rem;
+		line-height: 1.6;
+		color: inherit;
+		opacity: 0.95;
+		flex: 1;
+	}
+
+	.service-card--sm .service-card__description {
+		font-size: 0.875rem;
+	}
+
+	.service-card--lg .service-card__description {
+		font-size: 1.125rem;
+	}
+
+	/* Link */
+	.service-card__link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 600;
+		font-size: 1rem;
+		margin-top: auto;
+		color: inherit;
+	}
+
+	.service-card--sm .service-card__link {
+		font-size: 0.875rem;
+	}
+
+	.service-card--lg .service-card__link {
+		font-size: 1.125rem;
+	}
+
+	.service-card__arrow {
+		display: inline-block;
+		transition: transform 0.3s ease;
+		font-size: 1.25em;
+	}
+
+	.service-card:hover .service-card__arrow {
+		transform: translateX(0.25rem);
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.service-card--outlined,
+		.service-card--glass {
+			--service-card-text-color: #f9fafb;
+			color: var(--service-card-text-color);
+		}
+
+		.service-card--outlined {
+			border-color: rgba(255, 255, 255, 0.2);
+		}
+
+		.service-card--outlined:hover {
+			background-color: rgba(102, 126, 234, 0.1);
+		}
+
+		.service-card--glass {
+			background: rgba(0, 0, 0, 0.2);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+
+		.service-card--glass:hover {
+			background: rgba(0, 0, 0, 0.3);
+		}
+	}
+
+	/* Touch target minimum */
+	@media (pointer: coarse) {
+		.service-card {
+			min-height: 11rem; /* 176px, ensures adequate touch target */
+		}
+
+		.service-card--sm {
+			min-height: 9rem;
+		}
+
+		.service-card--lg {
+			min-height: 13rem;
+		}
+	}
+
+	/* Responsive adjustments */
+	@media (min-width: 768px) {
+		.service-card {
+			min-height: 18rem;
+		}
+
+		.service-card--sm {
+			min-height: 14rem;
+		}
+
+		.service-card--lg {
+			min-height: 22rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface ServiceCardProps {
+    title: string;
+    description: string;
+    icon?: string | Snippet;
+    href?: string;
+    gradient?: string | [string, string];
+    variant?: 'gradient' | 'outlined' | 'filled' | 'glass';
+    size?: 'sm' | 'md' | 'lg';
+    linkText?: string;
+    class?: string;
+    onclick?: () => void;
+}
+declare const ServiceCard: import("svelte").Component<ServiceCardProps, {}, "">;
+type ServiceCard = ReturnType<typeof ServiceCard>;
+export default ServiceCard;

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

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

package/dist/components/ServiceCard/index.js

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

package/dist/components/Sidebar/SidebarGroup.svelte

@@ -13,10 +13,7 @@
 		children
 	}: Props = $props();
 
-	let collapsed = $state<boolean>();
-	$effect(() => {
-		collapsed = defaultCollapsed;
-	});
+	let collapsed = $state<boolean>(() => defaultCollapsed);
 
 	function toggleCollapse() {
 		if (collapsible) {

package/dist/components/SplitSection/SplitSection.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface SplitSectionProps {
+		reverse?: boolean;
+		ratio?: '1:1' | '1:2' | '2:1' | '3:2' | '2:3';
+		background?: string;
+		animated?: boolean;
+		verticalAlign?: 'top' | 'center' | 'bottom';
+		gap?: 'none' | 'sm' | 'md' | 'lg';
+		class?: string;
+		content: Snippet;
+		media: Snippet;
+	}
+
+	let {
+		reverse = false,
+		ratio = '1:1',
+		background,
+		animated = false,
+		verticalAlign = 'center',
+		gap = 'md',
+		class: className = '',
+		content,
+		media
+	}: SplitSectionProps = $props();
+
+	const ratioMap: Record<string, { content: string; media: string }> = {
+		'1:1': { content: '50%', media: '50%' },
+		'1:2': { content: '33.33%', media: '66.66%' },
+		'2:1': { content: '66.66%', media: '33.33%' },
+		'3:2': { content: '60%', media: '40%' },
+		'2:3': { content: '40%', media: '60%' }
+	};
+
+	const gapMap: Record<string, string> = {
+		none: '0',
+		sm: '1rem',
+		md: '2rem',
+		lg: '4rem'
+	};
+
+	const alignMap: Record<string, string> = {
+		top: 'flex-start',
+		center: 'center',
+		bottom: 'flex-end'
+	};
+
+	const contentFlexBasis = $derived(ratioMap[ratio].content);
+	const mediaFlexBasis = $derived(ratioMap[ratio].media);
+	const gapValue = $derived(gapMap[gap]);
+	const alignValue = $derived(alignMap[verticalAlign]);
+</script>
+
+<section
+	class="split-section {className}"
+	class:reverse
+	class:animated
+	style:--split-section-bg={background}
+	style:--split-section-gap={gapValue}
+	style:--content-flex-basis={contentFlexBasis}
+	style:--media-flex-basis={mediaFlexBasis}
+	style:--vertical-align={alignValue}
+>
+	{#if animated}
+		<div class="background-decorations" aria-hidden="true">
+			<div class="shape shape-1"></div>
+			<div class="shape shape-2"></div>
+			<div class="shape shape-3"></div>
+		</div>
+	{/if}
+
+	<div class="content-wrapper">
+		{@render content()}
+	</div>
+
+	<div class="media-wrapper">
+		{@render media()}
+	</div>
+</section>
+
+<style>
+	.split-section {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--split-section-gap, 2rem);
+		padding: var(--split-section-padding, 2rem 1rem);
+		background: var(--split-section-bg, transparent);
+		overflow: hidden;
+	}
+
+	/* Desktop layout */
+	@media (min-width: 768px) {
+		.split-section {
+			flex-direction: row;
+			align-items: var(--vertical-align, center);
+			padding: var(--split-section-padding, 4rem 2rem);
+		}
+
+		.split-section.reverse {
+			flex-direction: row-reverse;
+		}
+
+		.content-wrapper {
+			flex-basis: var(--content-flex-basis, 50%);
+			flex-shrink: 0;
+		}
+
+		.media-wrapper {
+			flex-basis: var(--media-flex-basis, 50%);
+			flex-shrink: 0;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.split-section {
+			padding: var(--split-section-padding, 6rem 4rem);
+		}
+	}
+
+	/* Mobile: content always first, full width */
+	.content-wrapper,
+	.media-wrapper {
+		width: 100%;
+	}
+
+	/* Background decorations */
+	.background-decorations {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.shape {
+		position: absolute;
+		border-radius: 50%;
+		background: var(--split-section-animation-color, rgba(99, 102, 241, 0.1));
+		filter: blur(60px);
+		animation: pulse 4s ease-in-out infinite;
+	}
+
+	.shape-1 {
+		width: 300px;
+		height: 300px;
+		top: -100px;
+		left: -100px;
+		animation-delay: 0s;
+	}
+
+	.shape-2 {
+		width: 400px;
+		height: 400px;
+		bottom: -150px;
+		right: -150px;
+		animation-delay: 1.5s;
+	}
+
+	.shape-3 {
+		width: 250px;
+		height: 250px;
+		top: 50%;
+		right: 10%;
+		animation-delay: 3s;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 0.3;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.6;
+			transform: scale(1.1);
+		}
+	}
+
+	/* Respect prefers-reduced-motion */
+	@media (prefers-reduced-motion: reduce) {
+		.shape {
+			animation: none;
+			opacity: 0.3;
+		}
+	}
+
+	/* Ensure content is above decorations */
+	.content-wrapper,
+	.media-wrapper {
+		position: relative;
+		z-index: 1;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface SplitSectionProps {
+    reverse?: boolean;
+    ratio?: '1:1' | '1:2' | '2:1' | '3:2' | '2:3';
+    background?: string;
+    animated?: boolean;
+    verticalAlign?: 'top' | 'center' | 'bottom';
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    class?: string;
+    content: Snippet;
+    media: Snippet;
+}
+declare const SplitSection: import("svelte").Component<SplitSectionProps, {}, "">;
+type SplitSection = ReturnType<typeof SplitSection>;
+export default SplitSection;

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

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

package/dist/components/SplitSection/index.js

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