@aspect-ops/exon-ui 0.3.0 → 0.4.0

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;

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/Sidebar/SidebarGroup.svelte

@@ -13,10 +13,7 @@
 		children
 	}: Props = $props();
 
-	let collapsed = $state<boolean>();
-	$effect(() => {
-		collapsed = defaultCollapsed;
-	});
+	let collapsed = $state<boolean>(() => defaultCollapsed);
 
 	function toggleCollapse() {
 		if (collapsible) {

package/dist/index.d.ts

@@ -68,9 +68,14 @@ export { Image } from './components/Image/index.js';
 export { StatusBadge } from './components/StatusBadge/index.js';
 export { StatsCard } from './components/StatsCard/index.js';
 export { DataTable } from './components/DataTable/index.js';
+export { ImageTextCard } from './components/ImageTextCard/index.js';
+export type { ImageTextCardProps } from './components/ImageTextCard/index.js';
+export { IconFeatureCard } from './components/IconFeatureCard/index.js';
+export type { IconFeatureCardProps } from './components/IconFeatureCard/index.js';
 export { Container } from './components/Container/index.js';
 export { Grid } from './components/Grid/index.js';
 export { GridItem } from './components/Grid/index.js';
+export { FlexibleGrid } from './components/FlexibleGrid/index.js';
 export { Stack } from './components/Stack/index.js';
 export { Divider } from './components/Divider/index.js';
 export { Spacer } from './components/Spacer/index.js';
@@ -87,12 +92,13 @@ export { Chatbot, ChatMessage } from './components/Chatbot/index.js';
 export type { ChatMessage as ChatMessageType, MessageRole, LeadData, ChatbotProps } from './components/Chatbot/types.js';
 export { ContactForm } from './components/ContactForm/index.js';
 export { ViewCounter } from './components/ViewCounter/index.js';
-export { Mermaid } from './components/Mermaid/index.js';
 export { DoughnutChart } from './components/DoughnutChart/index.js';
 export { TestimonialCard } from './components/TestimonialCard/index.js';
 export type { TestimonialCardProps } from './components/TestimonialCard/index.js';
 export { Hero } from './components/Hero/index.js';
 export type { HeroProps } from './components/Hero/index.js';
+export { HeroLeftAligned } from './components/HeroLeftAligned/index.js';
+export type { HeroLeftAlignedProps } from './components/HeroLeftAligned/index.js';
 export { GlobalHeader } from './components/GlobalHeader/index.js';
 export type { GlobalHeaderProps, NavItem as GlobalHeaderNavItem } from './components/GlobalHeader/index.js';
 export { CTASection } from './components/CTASection/index.js';

package/dist/index.js

@@ -75,10 +75,13 @@ export { Image } from './components/Image/index.js';
 export { StatusBadge } from './components/StatusBadge/index.js';
 export { StatsCard } from './components/StatsCard/index.js';
 export { DataTable } from './components/DataTable/index.js';
+export { ImageTextCard } from './components/ImageTextCard/index.js';
+export { IconFeatureCard } from './components/IconFeatureCard/index.js';
 // Layout Components
 export { Container } from './components/Container/index.js';
 export { Grid } from './components/Grid/index.js';
 export { GridItem } from './components/Grid/index.js';
+export { FlexibleGrid } from './components/FlexibleGrid/index.js';
 export { Stack } from './components/Stack/index.js';
 export { Divider } from './components/Divider/index.js';
 export { Spacer } from './components/Spacer/index.js';
@@ -96,11 +99,11 @@ export { FAB, FABGroup } from './components/FAB/index.js';
 export { Chatbot, ChatMessage } from './components/Chatbot/index.js';
 export { ContactForm } from './components/ContactForm/index.js';
 export { ViewCounter } from './components/ViewCounter/index.js';
-export { Mermaid } from './components/Mermaid/index.js';
 export { DoughnutChart } from './components/DoughnutChart/index.js';
 // Section Components (Website Sections)
 export { TestimonialCard } from './components/TestimonialCard/index.js';
 export { Hero } from './components/Hero/index.js';
+export { HeroLeftAligned } from './components/HeroLeftAligned/index.js';
 export { GlobalHeader } from './components/GlobalHeader/index.js';
 export { CTASection } from './components/CTASection/index.js';
 export { LogoCloud } from './components/LogoCloud/index.js';

package/dist/types/index.d.ts

@@ -129,6 +129,54 @@ export interface SwitchProps {
 export type { TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps, StepperOrientation, StepperProps, StepperStepProps } from './navigation.js';
 export type { AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData, ToastProps, ToastContainerProps, ModalSize, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ProgressSize, ProgressBarProps, ProgressCircleProps, SpinnerProps, TooltipSide, TooltipProps, PopoverSide, PopoverProps, PopoverTriggerProps, PopoverContentProps, SkeletonVariant, SkeletonProps, StatusBannerStatus, StatusBannerPosition, StatusBannerProps } from './feedback.js';
 export type { CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, FlipCardProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, PageHeaderProps, StatCircleColor, StatCircleSize, StatCircleProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps, StatusBadgeColor, StatusBadgeSize, StatusBadgeProps, StatsCardColor, StatsCardTrend, StatsCardProps, DataTableSortOrder, DataTableColumnAlign, DataTableColumn, DataTableProps } from './data-display.js';
-export type { ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps } from './layout.js';
+export type { ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps, FlexibleGridCell, FlexibleGridRow, FlexibleGridProps } from './layout.js';
 export type { SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './mobile.js';
 export type { SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps, NumberInputProps, PaginationProps } from './input.js';
+export interface HeroLeftAlignedProps {
+    title: string;
+    subtitle?: string;
+    backgroundImage?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    overlayOpacity?: number;
+    height?: string;
+    class?: string;
+}
+export 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;
+}
+export interface IconFeatureCardProps {
+    icon: string;
+    iconAlt?: string;
+    title: string;
+    features: string[];
+    topBgColor?: string;
+    iconBgColor?: string;
+    iconSize?: string;
+    iconContainerSize?: string;
+    titleColor?: string;
+    titleFontSize?: string;
+    featureColor?: string;
+    featureFontSize?: string;
+    borderRadius?: string;
+    padding?: string;
+    featureGap?: string;
+    bulletColor?: string;
+    class?: string;
+}

package/dist/types/layout.d.ts

@@ -55,3 +55,23 @@ export interface BoxProps {
     as?: keyof HTMLElementTagNameMap;
     class?: string;
 }
+export interface FlexibleGridCell {
+    span: number;
+    content: string;
+    bgColor?: string;
+    textColor?: string;
+    class?: string;
+}
+export interface FlexibleGridRow {
+    cells: FlexibleGridCell[];
+    class?: string;
+}
+export interface FlexibleGridProps {
+    rows: FlexibleGridRow[];
+    gap?: SpacingToken | string;
+    cellHeight?: string;
+    defaultBgColor?: string;
+    defaultTextColor?: string;
+    columns?: number;
+    class?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aspect-ops/exon-ui",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Reusable Svelte UI components for web and Capacitor mobile apps",
 	"author": "Exon Team",
 	"license": "MIT",
@@ -41,6 +41,14 @@
 			"types": "./dist/components/Link/index.d.ts",
 			"svelte": "./dist/components/Link/index.js"
 		},
+		"./FlexibleGrid": {
+			"types": "./dist/components/FlexibleGrid/index.d.ts",
+			"svelte": "./dist/components/FlexibleGrid/index.js"
+		},
+		"./HeroLeftAligned": {
+			"types": "./dist/components/HeroLeftAligned/index.d.ts",
+			"svelte": "./dist/components/HeroLeftAligned/index.js"
+		},
 		"./styles": "./dist/styles/tokens.css",
 		"./package.json": "./package.json"
 	},
@@ -98,7 +106,6 @@
 		"husky": "^9.1.7",
 		"jsdom": "^25.0.0",
 		"lint-staged": "^16.2.7",
-		"mermaid": "^11.12.2",
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"publint": "^0.2.0",