@aspect-ops/exon-ui 0.2.1 → 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/Icon/Icon.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { IconSize } from '../../types/index.js';
+	import type { ComponentType } from 'svelte';
 
 	interface Props {
-		name: string;
+		icon: ComponentType;
 		size?: IconSize;
 		class?: string;
 		'aria-label'?: string;
@@ -10,38 +11,34 @@
 	}
 
 	let {
-		name,
+		icon: IconComponent,
 		size = 'md',
 		class: className = '',
 		'aria-label': ariaLabel,
 		'aria-hidden': ariaHidden = !ariaLabel
 	}: Props = $props();
 
-	// Size map aligned with typography scale
-	const sizeMap: Record<IconSize, string> = {
-		xs: '0.75rem',
-		sm: '1rem',
-		md: '1.25rem',
-		lg: '1.5rem',
-		xl: '2rem'
+	// Size map aligned with typography scale (in pixels for Lucide)
+	const sizeMap: Record<IconSize, number> = {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24,
+		xl: 32
 	};
 </script>
 
-<svg
+<IconComponent
+	size={sizeMap[size]}
 	class="icon icon--{size} {className}"
-	style="--icon-size: {sizeMap[size]}"
 	aria-label={ariaLabel}
 	aria-hidden={ariaHidden}
 	role={ariaLabel ? 'img' : undefined}
->
-	<use href="#{name}" />
-</svg>
+/>
 
 <style>
-	.icon {
-		width: var(--icon-size);
-		height: var(--icon-size);
-		fill: currentColor;
+	:global(.icon) {
 		flex-shrink: 0;
+		color: currentColor;
 	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { IconSize } from '../../types/index.js';
+import type { ComponentType } from 'svelte';
 interface Props {
-    name: string;
+    icon: ComponentType;
     size?: IconSize;
     class?: string;
     'aria-label'?: string;