@aspect-ops/exon-ui 0.2.1 → 0.3.0

package/dist/components/AspectRatio/AspectRatio.svelte

@@ -29,6 +29,7 @@
 		position: relative;
 		width: 100%;
 		font-family: inherit;
+		box-sizing: border-box;
 	}
 
 	.aspect-ratio > :global(*) {

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';

package/dist/components/Card/FlipCard.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	interface Props {
+		/** Manually control flipped state */
+		flipped?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Front side content */
+		front?: import('svelte').Snippet;
+		/** Back side content */
+		back?: import('svelte').Snippet;
+	}
+
+	let { flipped = $bindable(false), class: className = '', front, back }: Props = $props();
+
+	function handleClick() {
+		flipped = !flipped;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === ' ' || event.key === 'Enter') {
+			event.preventDefault();
+			flipped = !flipped;
+		}
+	}
+</script>
+
+<div
+	class="flip-card {flipped ? 'flip-card--flipped' : ''} {className}"
+	role="button"
+	tabindex="0"
+	aria-pressed={flipped}
+	aria-label={flipped ? 'Flip card to front' : 'Flip card to back'}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	<div class="flip-card__inner">
+		<div class="flip-card__face flip-card__front">
+			{#if front}
+				{@render front()}
+			{/if}
+		</div>
+		<div class="flip-card__face flip-card__back">
+			{#if back}
+				{@render back()}
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.flip-card {
+		perspective: 1000px;
+		position: relative;
+		width: 100%;
+		min-height: 12.5rem;
+		cursor: pointer;
+		font-family: inherit;
+		outline: none;
+	}
+
+	.flip-card:focus-visible {
+		outline: 2px solid var(--color-primary, #007bff);
+		outline-offset: 2px;
+	}
+
+	.flip-card__inner {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: inherit;
+		transition: transform 0.6s;
+		transform-style: preserve-3d;
+	}
+
+	.flip-card--flipped .flip-card__inner {
+		transform: rotateY(180deg);
+	}
+
+	.flip-card__face {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		min-height: inherit;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		background: var(--color-bg-card, #ffffff);
+		border-radius: var(--radius-lg, 0.5rem);
+		overflow: hidden;
+		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)
+		);
+	}
+
+	.flip-card__front {
+		z-index: 2;
+	}
+
+	.flip-card__back {
+		transform: rotateY(180deg);
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.flip-card__face {
+			background: var(--color-bg-card, #1e1e1e);
+			box-shadow: var(
+				--shadow-md,
+				0 4px 6px -1px rgba(0, 0, 0, 0.3),
+				0 2px 4px -1px rgba(0, 0, 0, 0.2)
+			);
+		}
+	}
+
+	/* Reduced motion fallback */
+	@media (prefers-reduced-motion: reduce) {
+		.flip-card__inner {
+			transition: opacity 0.3s;
+			transform: none;
+		}
+
+		.flip-card--flipped .flip-card__inner {
+			transform: none;
+		}
+
+		.flip-card__front {
+			opacity: 1;
+			transition: opacity 0.3s;
+		}
+
+		.flip-card--flipped .flip-card__front {
+			opacity: 0;
+			pointer-events: none;
+		}
+
+		.flip-card__back {
+			transform: none;
+			opacity: 0;
+			transition: opacity 0.3s;
+		}
+
+		.flip-card--flipped .flip-card__back {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	/* Ensure touch targets meet 44px minimum */
+	@media (hover: none) and (pointer: coarse) {
+		.flip-card {
+			min-height: 2.75rem; /* 44px */
+		}
+	}
+</style>

package/dist/components/Card/FlipCard.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    /** Manually control flipped state */
+    flipped?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Front side content */
+    front?: import('svelte').Snippet;
+    /** Back side content */
+    back?: import('svelte').Snippet;
+}
+declare const FlipCard: import("svelte").Component<Props, {}, "flipped">;
+type FlipCard = ReturnType<typeof FlipCard>;
+export default FlipCard;

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

@@ -2,3 +2,4 @@ export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardBody } from './CardBody.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
+export { default as FlipCard } from './FlipCard.svelte';

package/dist/components/Card/index.js

@@ -2,3 +2,4 @@ export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardBody } from './CardBody.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
+export { default as FlipCard } from './FlipCard.svelte';

package/dist/components/Container/Container.svelte

@@ -22,6 +22,7 @@
 		width: 100%;
 		padding: var(--space-md, 1rem);
 		font-family: inherit;
+		box-sizing: border-box;
 	}
 
 	.container[data-centered='true'] {