@aspect-ops/exon-ui 0.2.2 → 0.4.0

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

package/dist/components/ImageTextCard/ImageTextCard.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	interface ImageTextCardProps {
+		image: string;
+		imageAlt?: string;
+		title: string;
+		description: string;
+		bgColor?: string;
+		textColor?: string;
+		titleColor?: string;
+		descColor?: string;
+		imageSize?: string;
+		imageShape?: 'circle' | 'square' | 'rounded';
+		reverseLayout?: boolean;
+		cardHeight?: string;
+		padding?: string;
+		gap?: string;
+		titleFontSize?: string;
+		descFontSize?: string;
+		class?: string;
+	}
+
+	let {
+		image,
+		imageAlt = '',
+		title,
+		description,
+		bgColor = '#B85C5C',
+		textColor = 'white',
+		titleColor,
+		descColor,
+		imageSize = '140px',
+		imageShape = 'circle',
+		reverseLayout = false,
+		cardHeight = 'auto',
+		padding = '3rem 4rem',
+		gap = '2.5rem',
+		titleFontSize = '2.25rem',
+		descFontSize = '1.25rem',
+		class: className = ''
+	}: ImageTextCardProps = $props();
+
+	const finalTitleColor = $derived(titleColor || textColor);
+	const finalDescColor = $derived(descColor || textColor);
+</script>
+
+<div
+	class="image-text-card {className}"
+	class:reverse={reverseLayout}
+	style="
+		background-color: {bgColor};
+		height: {cardHeight};
+		padding: {padding};
+		gap: {gap};
+		color: {textColor};
+	"
+>
+	<div class="image-container" style="width: {imageSize}; height: {imageSize};">
+		<img
+			src={image}
+			alt={imageAlt}
+			class="card-image"
+			class:circle={imageShape === 'circle'}
+			class:rounded={imageShape === 'rounded'}
+			class:square={imageShape === 'square'}
+		/>
+	</div>
+
+	<div class="text-content">
+		<h3 class="card-title" style="color: {finalTitleColor}; font-size: {titleFontSize};">
+			{title}
+		</h3>
+		<p class="card-description" style="color: {finalDescColor}; font-size: {descFontSize};">
+			{description}
+		</p>
+	</div>
+</div>
+
+<style>
+	.image-text-card {
+		display: flex;
+		align-items: center;
+		border-radius: 1.75rem;
+		transition: all 0.3s ease;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		font-family: inherit;
+	}
+
+	.image-text-card:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+	}
+
+	.image-text-card.reverse {
+		flex-direction: row-reverse;
+	}
+
+	.image-container {
+		flex-shrink: 0;
+	}
+
+	.card-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.card-image.circle {
+		border-radius: 50%;
+	}
+
+	.card-image.rounded {
+		border-radius: 1rem;
+	}
+
+	.card-image.square {
+		border-radius: 0;
+	}
+
+	.text-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.card-title {
+		margin: 0 0 1rem 0;
+		font-weight: 700;
+		line-height: 1.2;
+	}
+
+	.card-description {
+		margin: 0;
+		line-height: 1.7;
+		font-weight: 400;
+	}
+
+	/* Mobile: Stack vertically on tablets and below */
+	@media (max-width: 768px) {
+		.image-text-card {
+			flex-direction: column;
+			text-align: center;
+			gap: 2rem !important;
+			padding: 2rem !important;
+		}
+
+		.image-text-card.reverse {
+			flex-direction: column;
+		}
+	}
+</style>

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

@@ -0,0 +1,22 @@
+interface ImageTextCardProps {
+    image: string;
+    imageAlt?: string;
+    title: string;
+    description: string;
+    bgColor?: string;
+    textColor?: string;
+    titleColor?: string;
+    descColor?: string;
+    imageSize?: string;
+    imageShape?: 'circle' | 'square' | 'rounded';
+    reverseLayout?: boolean;
+    cardHeight?: string;
+    padding?: string;
+    gap?: string;
+    titleFontSize?: string;
+    descFontSize?: string;
+    class?: string;
+}
+declare const ImageTextCard: import("svelte").Component<ImageTextCardProps, {}, "">;
+type ImageTextCard = ReturnType<typeof ImageTextCard>;
+export default ImageTextCard;