@aspect-ops/exon-ui 0.3.0 → 0.4.1

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

package/dist/components/IconFeatureCard/IconFeatureCard.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import type { IconFeatureCardProps } from '../../types/index.js';
+
+	let {
+		icon,
+		iconAlt = '',
+		title,
+		features,
+		topBgColor = '#B85C5C',
+		iconBgColor = 'white',
+		iconSize = '4rem',
+		iconContainerSize = '6rem',
+		titleColor = '#1F2937',
+		titleFontSize = '1.75rem',
+		featureColor = '#4B5563',
+		featureFontSize = '1.125rem',
+		borderRadius = '1rem',
+		padding = '2rem',
+		featureGap = '0.875rem',
+		bulletColor = '#9CA3AF',
+		class: className = ''
+	}: IconFeatureCardProps = $props();
+
+	// Validate required props
+	const hasIcon = $derived(!!icon);
+	const hasTitle = $derived(!!title);
+	const hasFeatures = $derived(features && features.length > 0);
+</script>
+
+<div
+	class="icon-feature-card {className}"
+	style:--top-bg-color={topBgColor}
+	style:--icon-bg-color={iconBgColor}
+	style:--icon-size={iconSize}
+	style:--icon-container-size={iconContainerSize}
+	style:--title-color={titleColor}
+	style:--title-font-size={titleFontSize}
+	style:--feature-color={featureColor}
+	style:--feature-font-size={featureFontSize}
+	style:--border-radius={borderRadius}
+	style:--padding={padding}
+	style:--feature-gap={featureGap}
+	style:--bullet-color={bulletColor}
+>
+	<!-- Top Section: Icon/Badge -->
+	<div class="icon-section">
+		{#if hasIcon}
+			<div class="icon-container">
+				<img src={icon} alt={iconAlt} class="icon-image" />
+			</div>
+		{/if}
+	</div>
+
+	<!-- Bottom Section: Title and Features -->
+	<div class="content-section">
+		{#if hasTitle}
+			<h3 class="card-title">{title}</h3>
+		{/if}
+		{#if hasFeatures}
+			<ul class="features-list">
+				{#each features as feature}
+					<li class="feature-item">{feature}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.icon-feature-card {
+		display: flex;
+		flex-direction: column;
+		border-radius: var(--border-radius);
+		overflow: hidden;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		transition: all 0.3s ease;
+		font-family: inherit;
+		background: white;
+		height: 450px;
+	}
+
+	.icon-feature-card:hover {
+		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+		transform: translateY(-2px);
+	}
+
+	/* Top Section: Icon/Badge - 35% of card */
+	.icon-section {
+		background-color: var(--top-bg-color);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--padding);
+		height: 35%;
+		box-sizing: border-box;
+	}
+
+	.icon-container {
+		width: var(--icon-container-size);
+		height: var(--icon-container-size);
+		background-color: var(--icon-bg-color);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+
+	.icon-image {
+		width: var(--icon-size);
+		height: var(--icon-size);
+		object-fit: contain;
+	}
+
+	/* Bottom Section: Content - 65% of card */
+	.content-section {
+		background-color: white;
+		padding: var(--padding);
+		height: 65%;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.card-title {
+		color: var(--title-color);
+		font-size: var(--title-font-size);
+		font-weight: 600;
+		margin: 0 0 1.5rem 0;
+		line-height: 1.3;
+	}
+
+	.features-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--feature-gap);
+	}
+
+	.feature-item {
+		color: var(--feature-color);
+		font-size: var(--feature-font-size);
+		line-height: 1.6;
+		padding-left: 1.5rem;
+		position: relative;
+	}
+
+	.feature-item::before {
+		content: '•';
+		position: absolute;
+		left: 0;
+		color: var(--bullet-color);
+		font-size: 1.25rem;
+		line-height: 1.6;
+	}
+
+	/* Responsive Design */
+	@media (max-width: 768px) {
+		.icon-feature-card {
+			height: 400px;
+		}
+
+		.card-title {
+			font-size: 1.5rem;
+		}
+
+		.feature-item {
+			font-size: 1rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { IconFeatureCardProps } from '../../types/index.js';
+declare const IconFeatureCard: import("svelte").Component<IconFeatureCardProps, {}, "">;
+type IconFeatureCard = ReturnType<typeof IconFeatureCard>;
+export default IconFeatureCard;

package/dist/components/IconFeatureCard/README.md

@@ -0,0 +1,234 @@
+# IconFeatureCard
+
+A vertical card component featuring an icon section at the top and a feature list below. Perfect for showcasing services, features, or offerings with key highlights displayed as bullet points.
+
+## Features
+
+- Vertical two-section layout (colored icon section + white content section)
+- Top section with centered circular icon/badge on customizable colored background
+- Bottom section with title and bulleted feature list
+- Fully customizable colors and sizing
+- Responsive design with mobile adjustments
+- Hover effects with smooth transitions
+- Accessibility support
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script>
+	import { IconFeatureCard } from '@aspect-ops/exon-ui';
+</script>
+
+<IconFeatureCard
+	icon="/icons/support-24-7.svg"
+	iconAlt="24/7 Support icon"
+	title="Technical Support"
+	features={[
+		'Round-the-clock availability',
+		'Expert technical assistance',
+		'Fast response times',
+		'Multi-channel support'
+	]}
+	topBgColor="#3B82F6"
+/>
+```
+
+### With Custom Colors
+
+```svelte
+<IconFeatureCard
+	icon="/icons/cloud-service.svg"
+	iconAlt="Cloud service icon"
+	title="Cloud Solutions"
+	features={['Scalable infrastructure', 'High availability', 'Automated backups', 'Global CDN']}
+	topBgColor="#10B981"
+	iconBgColor="#D1FAE5"
+	titleColor="#065F46"
+	featureColor="#047857"
+/>
+```
+
+### Custom Sizing
+
+```svelte
+<IconFeatureCard
+	icon="/icons/consulting.svg"
+	iconAlt="Consulting icon"
+	title="Expert Consulting"
+	features={['Strategic planning', 'Industry expertise', 'Best practices', 'Actionable insights']}
+	topBgColor="#8B5CF6"
+	iconSize="5rem"
+	iconContainerSize="7rem"
+	titleFontSize="2rem"
+	padding="2.5rem"
+/>
+```
+
+## Props
+
+| Prop                | Type       | Default      | Description                                  |
+| ------------------- | ---------- | ------------ | -------------------------------------------- |
+| `icon`              | `string`   | **required** | Icon/image URL or path                       |
+| `iconAlt`           | `string`   | `''`         | Alt text for accessibility                   |
+| `title`             | `string`   | **required** | Card title                                   |
+| `features`          | `string[]` | **required** | Array of feature items to display as bullets |
+| `topBgColor`        | `string`   | `'#B85C5C'`  | Background color for top icon section        |
+| `iconBgColor`       | `string`   | `'white'`    | Background color for circular icon container |
+| `iconSize`          | `string`   | `'4rem'`     | Size of the icon/image                       |
+| `iconContainerSize` | `string`   | `'6rem'`     | Size of the circular icon container          |
+| `titleColor`        | `string`   | `'#1F2937'`  | Title text color                             |
+| `titleFontSize`     | `string`   | `'1.75rem'`  | Title font size                              |
+| `featureColor`      | `string`   | `'#4B5563'`  | Feature list text color                      |
+| `featureFontSize`   | `string`   | `'1.125rem'` | Feature list font size                       |
+| `borderRadius`      | `string`   | `'1rem'`     | Card border radius                           |
+| `padding`           | `string`   | `'2rem'`     | Padding for both sections                    |
+| `featureGap`        | `string`   | `'0.875rem'` | Gap between feature list items               |
+| `bulletColor`       | `string`   | `'#9CA3AF'`  | Color of the bullet points                   |
+| `class`             | `string`   | `''`         | Additional CSS classes                       |
+
+## Styling
+
+The component uses CSS custom properties for theming and inherits font-family from the parent.
+
+### Hover Effect
+
+The card has a built-in hover effect that lifts the card slightly and enhances the shadow:
+
+- Transform: `translateY(-2px)`
+- Shadow increases from `0 4px 6px` to `0 8px 12px`
+
+### Layout Proportions
+
+The card maintains a fixed proportion with `box-sizing: border-box` to include padding in calculations:
+
+- **Icon Section (Top)**: Exactly 35% of card height (including padding)
+- **Content Section (Bottom)**: Exactly 65% of card height (including padding)
+- **Card Height**: Fixed at 450px (400px on mobile)
+
+### Icon Section
+
+The icon section features:
+
+- Customizable colored background
+- Centered circular icon container with white background (customizable)
+- Drop shadow on icon container for depth
+- Takes up 35% of card height
+
+### Content Section
+
+The content section features:
+
+- White background
+- Title with configurable color and size
+- Bulleted list with custom bullet color
+- Flexible gap spacing between items
+- Takes up 65% of card height
+
+## Accessibility
+
+- Image `alt` text supported via `iconAlt` prop
+- Semantic HTML with `<h3>` for title and `<ul>/<li>` for features
+- Sufficient color contrast for text
+- Inherits font-family for consistent typography
+- Keyboard navigation friendly
+
+## Responsive Design
+
+- **Desktop:** Full layout with standard sizing
+- **Mobile (≤768px):**
+  - Reduced icon section height (12rem → 10rem)
+  - Smaller title font (1.75rem → 1.5rem)
+  - Smaller feature font (1.125rem → 1rem)
+
+## Examples
+
+### Service Showcase
+
+```svelte
+<div class="services-grid">
+	<IconFeatureCard
+		icon="/icons/support.svg"
+		iconAlt="Support"
+		title="24/7 Support"
+		features={[
+			'Round-the-clock assistance',
+			'Expert support team',
+			'Fast response times',
+			'Multi-channel support'
+		]}
+		topBgColor="#3B82F6"
+	/>
+	<IconFeatureCard
+		icon="/icons/security.svg"
+		iconAlt="Security"
+		title="Enterprise Security"
+		features={[
+			'End-to-end encryption',
+			'SOC 2 compliance',
+			'Regular security audits',
+			'Data protection'
+		]}
+		topBgColor="#10B981"
+	/>
+	<IconFeatureCard
+		icon="/icons/performance.svg"
+		iconAlt="Performance"
+		title="High Performance"
+		features={['Lightning-fast response', '99.9% uptime SLA', 'Global CDN', 'Auto-scaling']}
+		topBgColor="#F59E0B"
+	/>
+</div>
+
+<style>
+	.services-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 2rem;
+	}
+</style>
+```
+
+### Custom Branded Cards
+
+```svelte
+<IconFeatureCard
+	icon="/brand/premium-badge.svg"
+	iconAlt="Premium"
+	title="Premium Plan"
+	features={[
+		'Unlimited projects',
+		'Priority support',
+		'Advanced analytics',
+		'Custom integrations',
+		'Dedicated account manager'
+	]}
+	topBgColor="#6366F1"
+	iconBgColor="#EEF2FF"
+	titleColor="#4338CA"
+	featureColor="#4F46E5"
+	bulletColor="#818CF8"
+	iconSize="4.5rem"
+	iconContainerSize="6.5rem"
+	padding="2.5rem"
+/>
+```
+
+### Compact Variant
+
+```svelte
+<IconFeatureCard
+	icon="/icons/basic.svg"
+	iconAlt="Basic"
+	title="Starter Plan"
+	features={['Up to 5 projects', 'Email support', 'Basic analytics']}
+	topBgColor="#64748B"
+	titleFontSize="1.5rem"
+	featureFontSize="1rem"
+	iconSize="3.5rem"
+	iconContainerSize="5rem"
+	padding="1.5rem"
+	featureGap="0.75rem"
+/>
+```

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

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

package/dist/components/IconFeatureCard/index.js

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