@aspect-ops/exon-ui 0.2.2 → 0.4.0

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

@@ -0,0 +1,3 @@
+declare const GlobalHeader: import("svelte").Component<any, {}, "">;
+type GlobalHeader = ReturnType<typeof GlobalHeader>;
+export default GlobalHeader;

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

@@ -0,0 +1,2 @@
+export { default as GlobalHeader } from './GlobalHeader.svelte';
+export type { GlobalHeaderProps, NavItem } from './GlobalHeader.svelte';

package/dist/components/GlobalHeader/index.js

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

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/HeroLeftAligned/HeroLeftAligned.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import type { HeroLeftAlignedProps } from '../../types/index.js';
+
+	interface Props extends HeroLeftAlignedProps {
+		children?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		subtitle,
+		backgroundImage,
+		backgroundColor = 'var(--color-primary, #3b82f6)',
+		textColor = 'var(--color-text-inverse, #ffffff)',
+		overlayOpacity = 0.7,
+		height = 'auto',
+		class: className = '',
+		children,
+		actions
+	}: Props = $props();
+</script>
+
+<section
+	class="hero-left-aligned {className}"
+	style="background-color: {backgroundColor}; color: {textColor}; --overlay-opacity: {overlayOpacity}; min-height: {height};"
+	role="banner"
+>
+	<!-- Background Image with Overlay -->
+	{#if backgroundImage}
+		<div
+			class="hero-left-aligned__background"
+			style="background-image: url({backgroundImage});"
+			aria-hidden="true"
+		></div>
+		<div class="hero-left-aligned__overlay" style="background-color: {backgroundColor};"></div>
+	{/if}
+
+	<!-- Content Container -->
+	<div class="hero-left-aligned__container">
+		<div class="hero-left-aligned__content">
+			<!-- Title -->
+			<h1 class="hero-left-aligned__title">
+				{@html title}
+			</h1>
+
+			<!-- Subtitle -->
+			{#if subtitle}
+				<p class="hero-left-aligned__subtitle">
+					{@html subtitle}
+				</p>
+			{/if}
+
+			<!-- Custom Content Slot -->
+			{#if children}
+				<div class="hero-left-aligned__body">
+					{@render children()}
+				</div>
+			{/if}
+
+			<!-- Actions (Buttons) -->
+			{#if actions}
+				<div class="hero-left-aligned__actions">
+					{@render actions()}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+<style>
+	.hero-left-aligned {
+		position: relative;
+		overflow: hidden;
+		min-height: 700px;
+		font-family: var(--font-family, system-ui, sans-serif);
+		animation: heroFadeIn 1s ease-out;
+	}
+
+	@keyframes heroFadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.hero-left-aligned__background {
+		position: absolute;
+		inset: 0;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: 120% center;
+		opacity: calc(1 - var(--overlay-opacity, 0.7));
+	}
+
+	.hero-left-aligned__overlay {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to right, var(--color-primary, currentColor) 0%, transparent 60%);
+		opacity: 0.85;
+	}
+
+	.hero-left-aligned__container {
+		position: relative;
+		z-index: 10;
+		max-width: var(--max-width, 80rem);
+		margin: 0 auto;
+		padding: var(--space-xl, 3rem) var(--space-lg, 1.5rem);
+		padding-right: var(--space-2xl, 4rem);
+	}
+
+	.hero-left-aligned__content {
+		max-width: 64rem;
+		text-align: left;
+	}
+
+	.hero-left-aligned__title {
+		font-size: var(--text-5xl, 3rem);
+		font-weight: 700;
+		line-height: 1.1;
+		letter-spacing: -0.02em;
+		margin-bottom: var(--space-lg, 1.5rem);
+		color: inherit;
+	}
+
+	.hero-left-aligned__subtitle {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		line-height: 1.6;
+		margin-bottom: var(--space-xl, 3rem);
+		max-width: 48rem;
+		opacity: 0.95;
+	}
+
+	.hero-left-aligned__body {
+		margin-bottom: var(--space-xl, 3rem);
+	}
+
+	.hero-left-aligned__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-md, 1rem);
+	}
+
+	/* Responsive Styles */
+	@media (min-width: 768px) {
+		.hero-left-aligned__container {
+			padding: var(--space-2xl, 4rem) var(--space-xl, 3rem);
+			padding-right: var(--space-3xl, 6rem);
+		}
+
+		.hero-left-aligned__title {
+			font-size: var(--text-6xl, 3.75rem);
+			margin-bottom: var(--space-xl, 3rem);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.hero-left-aligned__container {
+			padding: var(--space-3xl, 6rem) var(--space-2xl, 4rem);
+		}
+
+		.hero-left-aligned__title {
+			font-size: var(--text-7xl, 4.5rem);
+		}
+
+		.hero-left-aligned__subtitle {
+			font-size: var(--text-xl, 1.25rem);
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.hero-left-aligned {
+			--color-primary: var(--color-primary-dark, #3b82f6);
+			--color-text-inverse: var(--color-text-inverse-dark, #f9fafb);
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { HeroLeftAlignedProps } from '../../types/index.js';
+interface Props extends HeroLeftAlignedProps {
+    children?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+}
+declare const HeroLeftAligned: import("svelte").Component<Props, {}, "">;
+type HeroLeftAligned = ReturnType<typeof HeroLeftAligned>;
+export default HeroLeftAligned;

package/dist/components/HeroLeftAligned/README.md

@@ -0,0 +1,168 @@
+# HeroLeftAligned
+
+A hero section component with left-aligned content, optional background image, and customizable actions. Perfect for landing pages and website headers.
+
+## Features
+
+- Left-aligned text layout
+- Optional background image with overlay
+- Customizable colors and opacity
+- Flexible content with snippets
+- Responsive design
+- Fade-in animation
+- Full accessibility support
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script>
+	import { HeroLeftAligned, Button } from '@aspect-ops/exon-ui';
+</script>
+
+<HeroLeftAligned
+	title="Welcome to Our Platform"
+	subtitle="Build amazing web applications with our UI library"
+	backgroundColor="#3b82f6"
+>
+	{#snippet actions()}
+		<Button variant="primary">Get Started</Button>
+		<Button variant="outline">Learn More</Button>
+	{/snippet}
+</HeroLeftAligned>
+```
+
+### With Background Image
+
+```svelte
+<HeroLeftAligned
+	title="Transform Your Business"
+	subtitle="Powerful tools to help you succeed"
+	backgroundImage="/hero-bg.jpg"
+	backgroundColor="#002147"
+	overlayOpacity={0.7}
+>
+	{#snippet actions()}
+		<Button variant="primary">Start Free Trial</Button>
+		<Button variant="secondary">Watch Demo</Button>
+	{/snippet}
+</HeroLeftAligned>
+```
+
+### With Custom Content
+
+```svelte
+<HeroLeftAligned title="Advanced Analytics" subtitle="Get insights from your data">
+	{#snippet children()}
+		<ul class="feature-list">
+			<li>Real-time data processing</li>
+			<li>Beautiful visualizations</li>
+			<li>Custom reports</li>
+		</ul>
+	{/snippet}
+
+	{#snippet actions()}
+		<Button variant="primary">Try It Now</Button>
+	{/snippet}
+</HeroLeftAligned>
+```
+
+## Props
+
+| Prop              | Type     | Default                     | Description                             |
+| ----------------- | -------- | --------------------------- | --------------------------------------- |
+| `title`           | `string` | **required**                | Main heading text (supports HTML)       |
+| `subtitle`        | `string` | `undefined`                 | Subheading text (supports HTML)         |
+| `backgroundImage` | `string` | `undefined`                 | URL to background image                 |
+| `backgroundColor` | `string` | `var(--color-primary)`      | Background color                        |
+| `textColor`       | `string` | `var(--color-text-inverse)` | Text color                              |
+| `overlayOpacity`  | `number` | `0.7`                       | Overlay opacity (0-1)                   |
+| `height`          | `string` | `auto`                      | Minimum height (e.g., '500px', '100vh') |
+| `class`           | `string` | `''`                        | Additional CSS classes                  |
+
+## Snippets
+
+### `children`
+
+Custom content area between subtitle and actions.
+
+```svelte
+{#snippet children()}
+	<p>Your custom content here</p>
+{/snippet}
+```
+
+### `actions`
+
+Action buttons area (typically buttons or links).
+
+```svelte
+{#snippet actions()}
+	<Button>Primary Action</Button>
+	<Button variant="outline">Secondary Action</Button>
+{/snippet}
+```
+
+## Styling
+
+The component uses CSS custom properties that can be customized:
+
+```css
+.hero-left-aligned {
+	--color-primary: #3b82f6;
+	--color-text-inverse: #ffffff;
+	--font-family: system-ui, sans-serif;
+	--max-width: 80rem;
+	--space-xl: 3rem;
+	--text-5xl: 3rem;
+}
+```
+
+## Accessibility
+
+- Uses semantic `<section>` with `role="banner"`
+- Proper heading hierarchy with `<h1>`
+- Background images marked with `aria-hidden="true"`
+- Supports HTML in title/subtitle for semantic markup
+
+## Examples
+
+### Landing Page Hero
+
+```svelte
+<HeroLeftAligned
+	title="Build <strong>Faster</strong> with Exon UI"
+	subtitle="60+ production-ready components for Svelte applications"
+	backgroundImage="/hero-pattern.svg"
+	height="100vh"
+>
+	{#snippet actions()}
+		<Button size="lg" variant="primary">Get Started</Button>
+		<Button size="lg" variant="outline">View Docs</Button>
+	{/snippet}
+</HeroLeftAligned>
+```
+
+### Product Launch
+
+```svelte
+<HeroLeftAligned
+	title="Introducing Our New Product"
+	subtitle="The next generation of productivity tools"
+	backgroundColor="#6366f1"
+	overlayOpacity={0.8}
+>
+	{#snippet children()}
+		<div class="stats">
+			<div>10k+ Users</div>
+			<div>99% Uptime</div>
+			<div>24/7 Support</div>
+		</div>
+	{/snippet}
+
+	{#snippet actions()}
+		<Button variant="primary">Join Waitlist</Button>
+	{/snippet}
+</HeroLeftAligned>
+```

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

@@ -0,0 +1,2 @@
+export { default as HeroLeftAligned } from './HeroLeftAligned.svelte';
+export type { HeroLeftAlignedProps } from '../../types/index.js';

package/dist/components/HeroLeftAligned/index.js

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