@aspect-ops/exon-ui 0.2.2 → 0.3.0

package/dist/components/CTASection/CTASection.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface CTASectionProps {
+		title: string;
+		description?: string;
+		variant?: 'default' | 'gradient' | 'image' | 'split';
+		background?: string;
+		align?: 'left' | 'center' | 'right';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		actions: Snippet;
+		icon?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		variant = 'default',
+		background,
+		align = 'center',
+		size = 'md',
+		class: className = '',
+		actions,
+		icon
+	}: CTASectionProps = $props();
+
+	const sizeClasses = {
+		sm: 'cta-section--sm',
+		md: 'cta-section--md',
+		lg: 'cta-section--lg'
+	};
+</script>
+
+<section
+	class="cta-section cta-section--{variant} cta-section--{align} {sizeClasses[size]} {className}"
+	style:--cta-background={background}
+>
+	<div class="cta-section__container">
+		{#if variant === 'split' && icon}
+			<div class="cta-section__split">
+				<div class="cta-section__content">
+					<h2 class="cta-section__title">{title}</h2>
+					{#if description}
+						<p class="cta-section__description">{description}</p>
+					{/if}
+					<div class="cta-section__actions">
+						{@render actions()}
+					</div>
+				</div>
+				<div class="cta-section__icon">
+					{@render icon()}
+				</div>
+			</div>
+		{:else}
+			<div class="cta-section__content">
+				{#if icon && variant !== 'split'}
+					<div class="cta-section__icon">
+						{@render icon()}
+					</div>
+				{/if}
+				<h2 class="cta-section__title">{title}</h2>
+				{#if description}
+					<p class="cta-section__description">{description}</p>
+				{/if}
+				<div class="cta-section__actions">
+					{@render actions()}
+				</div>
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.cta-section {
+		--cta-bg: var(--color-primary, #0066cc);
+		--cta-text-color: var(--color-on-primary, #ffffff);
+		--cta-padding: 4rem;
+		--cta-max-width: 1200px;
+		--cta-gradient-from: var(--color-primary, #0066cc);
+		--cta-gradient-to: var(--color-primary-dark, #004999);
+
+		position: relative;
+		padding: var(--cta-padding) 1.5rem;
+		color: var(--cta-text-color);
+		overflow: hidden;
+	}
+
+	/* Variant: Default */
+	.cta-section--default {
+		background-color: var(--cta-background, var(--cta-bg));
+	}
+
+	/* Variant: Gradient */
+	.cta-section--gradient {
+		background: linear-gradient(
+			135deg,
+			var(--cta-background, var(--cta-gradient-from)),
+			var(--cta-gradient-to)
+		);
+	}
+
+	/* Variant: Image */
+	.cta-section--image {
+		background-image: var(--cta-background);
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	.cta-section--image::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 0;
+	}
+
+	.cta-section--image .cta-section__container {
+		position: relative;
+		z-index: 1;
+	}
+
+	/* Variant: Split */
+	.cta-section--split {
+		background-color: var(--cta-background, var(--cta-bg));
+	}
+
+	.cta-section__split {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 2rem;
+		align-items: center;
+	}
+
+	@media (min-width: 768px) {
+		.cta-section__split {
+			grid-template-columns: 1fr 1fr;
+			gap: 3rem;
+		}
+	}
+
+	/* Size variants */
+	.cta-section--sm {
+		--cta-padding: 2rem;
+	}
+
+	.cta-section--md {
+		--cta-padding: 4rem;
+	}
+
+	.cta-section--lg {
+		--cta-padding: 6rem;
+	}
+
+	/* Container */
+	.cta-section__container {
+		max-width: var(--cta-max-width);
+		margin: 0 auto;
+	}
+
+	/* Content */
+	.cta-section__content {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	/* Alignment */
+	.cta-section--left .cta-section__content {
+		align-items: flex-start;
+		text-align: left;
+	}
+
+	.cta-section--center .cta-section__content {
+		align-items: center;
+		text-align: center;
+	}
+
+	.cta-section--right .cta-section__content {
+		align-items: flex-end;
+		text-align: right;
+	}
+
+	/* Title */
+	.cta-section__title {
+		margin: 0;
+		font-size: clamp(1.75rem, 4vw, 2.5rem);
+		font-weight: 700;
+		line-height: 1.2;
+		color: inherit;
+	}
+
+	/* Description */
+	.cta-section__description {
+		margin: 0;
+		font-size: clamp(1rem, 2vw, 1.25rem);
+		line-height: 1.6;
+		max-width: 48rem;
+		opacity: 0.95;
+	}
+
+	/* Actions */
+	.cta-section__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	.cta-section--left .cta-section__actions {
+		justify-content: flex-start;
+	}
+
+	.cta-section--center .cta-section__actions {
+		justify-content: center;
+	}
+
+	.cta-section--right .cta-section__actions {
+		justify-content: flex-end;
+	}
+
+	/* Icon */
+	.cta-section__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 0.5rem;
+	}
+
+	.cta-section--split .cta-section__icon {
+		margin-bottom: 0;
+		min-height: 300px;
+	}
+
+	.cta-section--left .cta-section__icon {
+		margin-left: 0;
+		margin-right: auto;
+	}
+
+	.cta-section--center .cta-section__icon {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.cta-section--right .cta-section__icon {
+		margin-left: auto;
+		margin-right: 0;
+	}
+
+	/* Focus visible for interactive elements */
+	.cta-section__actions :global(a:focus-visible),
+	.cta-section__actions :global(button:focus-visible) {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Mobile optimization */
+	@media (max-width: 767px) {
+		.cta-section {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+
+		.cta-section--sm {
+			--cta-padding: 1.5rem;
+		}
+
+		.cta-section--md {
+			--cta-padding: 2.5rem;
+		}
+
+		.cta-section--lg {
+			--cta-padding: 4rem;
+		}
+
+		.cta-section__actions {
+			width: 100%;
+		}
+
+		.cta-section__actions :global(a),
+		.cta-section__actions :global(button) {
+			min-height: 44px;
+			min-width: 44px;
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.cta-section--default {
+			--cta-bg: var(--color-primary-dark, #004999);
+		}
+
+		.cta-section--image::before {
+			background: rgba(0, 0, 0, 0.65);
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface CTASectionProps {
+    title: string;
+    description?: string;
+    variant?: 'default' | 'gradient' | 'image' | 'split';
+    background?: string;
+    align?: 'left' | 'center' | 'right';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    actions: Snippet;
+    icon?: Snippet;
+}
+declare const CTASection: import("svelte").Component<CTASectionProps, {}, "">;
+type CTASection = ReturnType<typeof CTASection>;
+export default CTASection;

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

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

package/dist/components/CTASection/index.js

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