@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/dist/components/ImageTextCard/README.md

@@ -0,0 +1,177 @@
+# ImageTextCard
+
+A horizontal card component featuring an icon/image on the left and title/description text on the right, all on a colored background. Perfect for showcasing features, services, or benefits with visual icons.
+
+## Features
+
+- Horizontal layout with icon and text content
+- Three image shape options (circle, square, rounded)
+- Reverse layout support (image on right)
+- Fully customizable colors and sizing
+- Responsive design (stacks vertically on mobile)
+- Hover effects with smooth transitions
+- Accessibility support
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script>
+	import { ImageTextCard } from '@aspect-ops/exon-ui';
+</script>
+
+<ImageTextCard
+	image="/icon-process.svg"
+	imageAlt="Process icon"
+	title="Process Harmonization"
+	description="Align processes across your organization for improved efficiency and consistency."
+	bgColor="#B85C5C"
+/>
+```
+
+### With Custom Colors
+
+```svelte
+<ImageTextCard
+	image="/icon-digital.svg"
+	imageAlt="Digital transformation icon"
+	title="Digital Transformation"
+	description="Drive seamless digital transformation with expert solutions and strategic guidance."
+	bgColor="#3B5998"
+	textColor="white"
+/>
+```
+
+### Rounded Image
+
+```svelte
+<ImageTextCard
+	image="/product-photo.jpg"
+	imageAlt="Product"
+	title="Our Product"
+	description="Discover the features that make our product stand out."
+	imageShape="rounded"
+	bgColor="#10B981"
+/>
+```
+
+### Reverse Layout
+
+```svelte
+<ImageTextCard
+	image="/icon-support.svg"
+	imageAlt="Support icon"
+	title="24/7 Support"
+	description="Get help whenever you need it with our round-the-clock support team."
+	reverseLayout={true}
+	bgColor="#6366F1"
+/>
+```
+
+## Props
+
+| Prop            | Type                                | Default       | Description                             |
+| --------------- | ----------------------------------- | ------------- | --------------------------------------- |
+| `image`         | `string`                            | **required**  | Image URL or path                       |
+| `imageAlt`      | `string`                            | `''`          | Alt text for accessibility              |
+| `title`         | `string`                            | **required**  | Card title                              |
+| `description`   | `string`                            | **required**  | Card description text                   |
+| `bgColor`       | `string`                            | `'#B85C5C'`   | Background color                        |
+| `textColor`     | `string`                            | `'white'`     | Default text color                      |
+| `titleColor`    | `string`                            | `undefined`   | Title color (overrides textColor)       |
+| `descColor`     | `string`                            | `undefined`   | Description color (overrides textColor) |
+| `imageSize`     | `string`                            | `'140px'`     | Size of the image (width and height)    |
+| `imageShape`    | `'circle' \| 'square' \| 'rounded'` | `'circle'`    | Image shape style                       |
+| `reverseLayout` | `boolean`                           | `false`       | Flip image and text positions           |
+| `cardHeight`    | `string`                            | `'auto'`      | Card height                             |
+| `padding`       | `string`                            | `'3rem 4rem'` | Card padding                            |
+| `gap`           | `string`                            | `'2.5rem'`    | Gap between image and text              |
+| `titleFontSize` | `string`                            | `'2.25rem'`   | Title font size                         |
+| `descFontSize`  | `string`                            | `'1.25rem'`   | Description font size                   |
+| `class`         | `string`                            | `''`          | Additional CSS classes                  |
+
+## Styling
+
+The component uses inline styles for theming but also responds to the parent's font-family.
+
+### 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`
+
+## Accessibility
+
+- Image `alt` text supported via `imageAlt` prop
+- Semantic HTML with `<h3>` for title and `<p>` for description
+- Sufficient color contrast (white text on colored backgrounds)
+- Inherits font-family for consistent typography
+
+## Responsive Design
+
+- **Desktop (769px+):** Horizontal layout with image on left/right
+- **Tablet & Mobile (≤768px):** Stacks vertically with centered text
+- **Mobile adjustments:** Reduced padding (2rem) and gap (2rem)
+
+## Examples
+
+### Feature Showcase
+
+```svelte
+<div class="features-grid">
+	<ImageTextCard
+		image="/icons/speed.svg"
+		imageAlt="Speed icon"
+		title="Lightning Fast"
+		description="Optimized performance for the best user experience."
+		bgColor="#EF4444"
+	/>
+	<ImageTextCard
+		image="/icons/secure.svg"
+		imageAlt="Security icon"
+		title="Secure by Default"
+		description="Built-in security features to protect your data."
+		bgColor="#3B82F6"
+	/>
+	<ImageTextCard
+		image="/icons/scalable.svg"
+		imageAlt="Scalability icon"
+		title="Infinitely Scalable"
+		description="Grows with your business, from startup to enterprise."
+		bgColor="#10B981"
+	/>
+</div>
+```
+
+### Service Cards
+
+```svelte
+<ImageTextCard
+	image="/services/consulting.jpg"
+	imageAlt="Consulting"
+	title="Expert Consulting"
+	description="Get personalized guidance from our team of industry experts."
+	imageShape="rounded"
+	bgColor="#8B5CF6"
+	imageSize="140px"
+	padding="2.5rem"
+/>
+```
+
+### Custom Typography
+
+```svelte
+<ImageTextCard
+	image="/icon-analytics.svg"
+	imageAlt="Analytics icon"
+	title="Data Analytics"
+	description="Transform raw data into actionable insights with our advanced analytics platform."
+	bgColor="#059669"
+	titleFontSize="2rem"
+	descFontSize="1.25rem"
+	titleColor="#F0FDF4"
+	descColor="#D1FAE5"
+/>
+```

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

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

package/dist/components/ImageTextCard/index.js

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

package/dist/components/LogoCloud/LogoCloud.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+	export interface LogoItem {
+		src: string;
+		alt: string;
+		href?: string;
+	}
+
+	export interface LogoCloudProps {
+		logos: LogoItem[];
+		columns?: 2 | 3 | 4 | 5 | 6;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'grid' | 'scroll' | 'marquee';
+		grayscale?: boolean;
+		hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+		gap?: 'sm' | 'md' | 'lg' | 'xl';
+		title?: string;
+		subtitle?: string;
+		class?: string;
+	}
+
+	let {
+		logos,
+		columns = 4,
+		size = 'md',
+		variant = 'grid',
+		grayscale = false,
+		hoverEffect = 'scale',
+		gap = 'md',
+		title,
+		subtitle,
+		class: className = ''
+	}: LogoCloudProps = $props();
+
+	const sizeMap = {
+		sm: '2rem',
+		md: '3rem',
+		lg: '4rem'
+	};
+
+	const gapMap = {
+		sm: '1rem',
+		md: '2rem',
+		lg: '3rem',
+		xl: '4rem'
+	};
+
+	// For marquee variant, duplicate logos for seamless infinite scroll
+	const displayLogos = $derived(variant === 'marquee' ? [...logos, ...logos] : logos);
+</script>
+
+<div class="logo-cloud-wrapper {className}">
+	{#if title || subtitle}
+		<div class="logo-cloud-header">
+			{#if title}
+				<h2 class="logo-cloud-title">{title}</h2>
+			{/if}
+			{#if subtitle}
+				<p class="logo-cloud-subtitle">{subtitle}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="logo-cloud logo-cloud--{variant} logo-cloud--{size} logo-cloud--gap-{gap} logo-cloud--hover-{hoverEffect}"
+		class:logo-cloud--grayscale={grayscale}
+		style="--logo-cloud-height: {sizeMap[size]}; --logo-cloud-gap: {gapMap[
+			gap
+		]}; --logo-cloud-columns: {columns};"
+		aria-label={title || 'Partner logos'}
+		role="region"
+	>
+		<div class="logo-cloud-container">
+			{#each displayLogos as logo, index}
+				<div class="logo-cloud-item" aria-hidden={variant === 'marquee' && index >= logos.length}>
+					{#if logo.href}
+						<a href={logo.href} class="logo-cloud-link" target="_blank" rel="noopener noreferrer">
+							<img
+								src={logo.src}
+								alt={logo.alt}
+								class="logo-cloud-image"
+								loading="lazy"
+								decoding="async"
+							/>
+						</a>
+					{:else}
+						<img
+							src={logo.src}
+							alt={logo.alt}
+							class="logo-cloud-image"
+							loading="lazy"
+							decoding="async"
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.logo-cloud-wrapper {
+		width: 100%;
+	}
+
+	.logo-cloud-header {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.logo-cloud-title {
+		font-size: 2rem;
+		font-weight: 700;
+		margin: 0 0 0.5rem 0;
+		color: var(--logo-cloud-title-color, var(--text-primary, #1a1a1a));
+	}
+
+	.logo-cloud-subtitle {
+		font-size: 1rem;
+		margin: 0;
+		color: var(--logo-cloud-subtitle-color, var(--text-secondary, #666));
+	}
+
+	.logo-cloud {
+		width: 100%;
+		--logo-cloud-gap: 2rem;
+		--logo-cloud-height: 3rem;
+		--logo-cloud-columns: 4;
+		--logo-cloud-grayscale-opacity: 0.6;
+		--logo-cloud-transition: all 0.3s ease;
+	}
+
+	/* Grid variant */
+	.logo-cloud--grid .logo-cloud-container {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: var(--logo-cloud-gap);
+		align-items: center;
+		justify-items: center;
+	}
+
+	@media (min-width: 768px) {
+		.logo-cloud--grid .logo-cloud-container {
+			grid-template-columns: repeat(var(--logo-cloud-columns), 1fr);
+		}
+	}
+
+	/* Scroll variant */
+	.logo-cloud--scroll {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		scrollbar-color: var(--scrollbar-thumb, #ccc) var(--scrollbar-track, #f0f0f0);
+	}
+
+	.logo-cloud--scroll .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		padding-bottom: 1rem;
+		min-width: min-content;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar {
+		height: 0.5rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-track {
+		background: var(--scrollbar-track, #f0f0f0);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb {
+		background: var(--scrollbar-thumb, #ccc);
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+		background: var(--scrollbar-thumb-hover, #999);
+	}
+
+	/* Marquee variant */
+	.logo-cloud--marquee {
+		overflow: hidden;
+		position: relative;
+	}
+
+	.logo-cloud--marquee .logo-cloud-container {
+		display: flex;
+		gap: var(--logo-cloud-gap);
+		animation: marquee 30s linear infinite;
+		width: fit-content;
+	}
+
+	@keyframes marquee {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(-50%);
+		}
+	}
+
+	.logo-cloud--marquee:hover .logo-cloud-container,
+	.logo-cloud--marquee:focus-within .logo-cloud-container {
+		animation-play-state: paused;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.logo-cloud--marquee .logo-cloud-container {
+			animation: none;
+		}
+	}
+
+	/* Logo items */
+	.logo-cloud-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: var(--logo-cloud-transition);
+		flex-shrink: 0;
+	}
+
+	.logo-cloud--scroll .logo-cloud-item,
+	.logo-cloud--marquee .logo-cloud-item {
+		min-width: calc(var(--logo-cloud-height) * 2);
+	}
+
+	.logo-cloud-link {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		width: 100%;
+		height: 100%;
+		transition: var(--logo-cloud-transition);
+	}
+
+	.logo-cloud-link:focus {
+		outline: 2px solid var(--focus-ring-color, #0066ff);
+		outline-offset: 0.25rem;
+		border-radius: 0.25rem;
+	}
+
+	.logo-cloud-image {
+		height: var(--logo-cloud-height);
+		width: auto;
+		max-width: 100%;
+		object-fit: contain;
+		transition: var(--logo-cloud-transition);
+	}
+
+	/* Grayscale mode */
+	.logo-cloud--grayscale .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--grayscale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--grayscale .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* Hover effects */
+	/* Scale effect */
+	.logo-cloud--hover-scale .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-scale .logo-cloud-link:focus .logo-cloud-image {
+		transform: scale(1.1);
+	}
+
+	/* Lift effect */
+	.logo-cloud--hover-lift .logo-cloud-item:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:hover,
+	.logo-cloud--hover-lift .logo-cloud-link:focus {
+		transform: translateY(-0.5rem);
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+	}
+
+	/* Glow effect */
+	.logo-cloud--hover-glow .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-glow .logo-cloud-link:focus .logo-cloud-image {
+		filter: drop-shadow(0 0 1rem rgba(0, 102, 255, 0.3));
+	}
+
+	/* Color effect (similar to grayscale but forces it) */
+	.logo-cloud--hover-color .logo-cloud-image {
+		filter: grayscale(100%);
+		opacity: var(--logo-cloud-grayscale-opacity);
+	}
+
+	.logo-cloud--hover-color .logo-cloud-item:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:hover .logo-cloud-image,
+	.logo-cloud--hover-color .logo-cloud-link:focus .logo-cloud-image {
+		filter: grayscale(0%);
+		opacity: 1;
+	}
+
+	/* None effect - no additional styles needed */
+	.logo-cloud--hover-none .logo-cloud-item:hover,
+	.logo-cloud--hover-none .logo-cloud-link:hover {
+		transform: none;
+		box-shadow: none;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.logo-cloud-title {
+			color: var(--logo-cloud-title-color, var(--text-primary, #ffffff));
+		}
+
+		.logo-cloud-subtitle {
+			color: var(--logo-cloud-subtitle-color, var(--text-secondary, #a0a0a0));
+		}
+
+		.logo-cloud--scroll {
+			scrollbar-color: var(--scrollbar-thumb, #555) var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-track {
+			background: var(--scrollbar-track, #2a2a2a);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb {
+			background: var(--scrollbar-thumb, #555);
+		}
+
+		.logo-cloud--scroll::-webkit-scrollbar-thumb:hover {
+			background: var(--scrollbar-thumb-hover, #777);
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+export interface LogoItem {
+    src: string;
+    alt: string;
+    href?: string;
+}
+export interface LogoCloudProps {
+    logos: LogoItem[];
+    columns?: 2 | 3 | 4 | 5 | 6;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'grid' | 'scroll' | 'marquee';
+    grayscale?: boolean;
+    hoverEffect?: 'scale' | 'lift' | 'glow' | 'color' | 'none';
+    gap?: 'sm' | 'md' | 'lg' | 'xl';
+    title?: string;
+    subtitle?: string;
+    class?: string;
+}
+declare const LogoCloud: import("svelte").Component<LogoCloudProps, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

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

@@ -0,0 +1,2 @@
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { LogoItem, LogoCloudProps } from './LogoCloud.svelte';

package/dist/components/LogoCloud/index.js

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