@aspect-ops/exon-ui 0.2.2 → 0.4.0

package/README.md

@@ -1202,51 +1202,6 @@ Pure SVG doughnut chart with interactive legend (no external dependencies).
 | `showLegend` | `boolean`  | `true`          | Show legend               |
 | `showTotal`  | `boolean`  | `true`          | Show center total         |
 
-### Mermaid
-
-Render Mermaid diagrams with customizable theming.
-
-**Note:** Requires `mermaid` package: `npm install mermaid`
-
-```svelte
-<script>
-	import { Mermaid } from '@aspect-ops/exon-ui';
-
-	const diagram = `flowchart TD
-    A[Start] --> B{Decision}
-    B -->|Yes| C[Action 1]
-    B -->|No| D[Action 2]
-    C --> E[End]
-    D --> E`;
-</script>
-
-<!-- Using code prop -->
-<Mermaid code={diagram} />
-
-<!-- Using slot -->
-<Mermaid>flowchart LR A --> B --> C</Mermaid>
-```
-
-**Props:**
-
-| Prop    | Type     | Default       | Description            |
-| ------- | -------- | ------------- | ---------------------- |
-| `code`  | `string` | -             | Mermaid diagram code   |
-| `theme` | `object` | ExonPro theme | Custom theme variables |
-
-**Theme variables:**
-
-```javascript
-const theme = {
-	primaryColor: '#4654A3',
-	primaryTextColor: '#270949',
-	primaryBorderColor: '#4654A3',
-	lineColor: '#270949',
-	secondaryColor: '#FF3131',
-	tertiaryColor: '#f3f4f6'
-};
-```
-
 ## Theming & Customization
 
 ### Quick Setup

package/dist/components/BottomNav/BottomNavItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { BottomNavItemProps } from '../../types/index.js';
 
-	interface Props extends BottomNavItemProps {
+	interface Props extends Omit<BottomNavItemProps, 'icon'> {
+		icon: import('svelte').Snippet;
 		onclick?: () => void;
 		children?: import('svelte').Snippet;
 	}
@@ -25,7 +26,7 @@
 		class:bottom-nav-item--active={active}
 		aria-current={active ? 'page' : undefined}
 	>
-		<span class="bottom-nav-item__icon">{icon}</span>
+		<span class="bottom-nav-item__icon">{@render icon()}</span>
 		{#if children}
 			<span class="bottom-nav-item__label">{@render children()}</span>
 		{:else}
@@ -45,7 +46,7 @@
 		aria-current={active ? 'page' : undefined}
 		{onclick}
 	>
-		<span class="bottom-nav-item__icon">{icon}</span>
+		<span class="bottom-nav-item__icon">{@render icon()}</span>
 		{#if children}
 			<span class="bottom-nav-item__label">{@render children()}</span>
 		{:else}

package/dist/components/BottomNav/BottomNavItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { BottomNavItemProps } from '../../types/index.js';
-interface Props extends BottomNavItemProps {
+interface Props extends Omit<BottomNavItemProps, 'icon'> {
+    icon: import('svelte').Snippet;
     onclick?: () => void;
     children?: import('svelte').Snippet;
 }

package/dist/components/CTASection/CTASection.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface CTASectionProps {
+		title: string;
+		description?: string;
+		variant?: 'default' | 'gradient' | 'image' | 'split';
+		background?: string;
+		align?: 'left' | 'center' | 'right';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		actions: Snippet;
+		icon?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		variant = 'default',
+		background,
+		align = 'center',
+		size = 'md',
+		class: className = '',
+		actions,
+		icon
+	}: CTASectionProps = $props();
+
+	const sizeClasses = {
+		sm: 'cta-section--sm',
+		md: 'cta-section--md',
+		lg: 'cta-section--lg'
+	};
+</script>
+
+<section
+	class="cta-section cta-section--{variant} cta-section--{align} {sizeClasses[size]} {className}"
+	style:--cta-background={background}
+>
+	<div class="cta-section__container">
+		{#if variant === 'split' && icon}
+			<div class="cta-section__split">
+				<div class="cta-section__content">
+					<h2 class="cta-section__title">{title}</h2>
+					{#if description}
+						<p class="cta-section__description">{description}</p>
+					{/if}
+					<div class="cta-section__actions">
+						{@render actions()}
+					</div>
+				</div>
+				<div class="cta-section__icon">
+					{@render icon()}
+				</div>
+			</div>
+		{:else}
+			<div class="cta-section__content">
+				{#if icon && variant !== 'split'}
+					<div class="cta-section__icon">
+						{@render icon()}
+					</div>
+				{/if}
+				<h2 class="cta-section__title">{title}</h2>
+				{#if description}
+					<p class="cta-section__description">{description}</p>
+				{/if}
+				<div class="cta-section__actions">
+					{@render actions()}
+				</div>
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.cta-section {
+		--cta-bg: var(--color-primary, #0066cc);
+		--cta-text-color: var(--color-on-primary, #ffffff);
+		--cta-padding: 4rem;
+		--cta-max-width: 1200px;
+		--cta-gradient-from: var(--color-primary, #0066cc);
+		--cta-gradient-to: var(--color-primary-dark, #004999);
+
+		position: relative;
+		padding: var(--cta-padding) 1.5rem;
+		color: var(--cta-text-color);
+		overflow: hidden;
+	}
+
+	/* Variant: Default */
+	.cta-section--default {
+		background-color: var(--cta-background, var(--cta-bg));
+	}
+
+	/* Variant: Gradient */
+	.cta-section--gradient {
+		background: linear-gradient(
+			135deg,
+			var(--cta-background, var(--cta-gradient-from)),
+			var(--cta-gradient-to)
+		);
+	}
+
+	/* Variant: Image */
+	.cta-section--image {
+		background-image: var(--cta-background);
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	.cta-section--image::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 0;
+	}
+
+	.cta-section--image .cta-section__container {
+		position: relative;
+		z-index: 1;
+	}
+
+	/* Variant: Split */
+	.cta-section--split {
+		background-color: var(--cta-background, var(--cta-bg));
+	}
+
+	.cta-section__split {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 2rem;
+		align-items: center;
+	}
+
+	@media (min-width: 768px) {
+		.cta-section__split {
+			grid-template-columns: 1fr 1fr;
+			gap: 3rem;
+		}
+	}
+
+	/* Size variants */
+	.cta-section--sm {
+		--cta-padding: 2rem;
+	}
+
+	.cta-section--md {
+		--cta-padding: 4rem;
+	}
+
+	.cta-section--lg {
+		--cta-padding: 6rem;
+	}
+
+	/* Container */
+	.cta-section__container {
+		max-width: var(--cta-max-width);
+		margin: 0 auto;
+	}
+
+	/* Content */
+	.cta-section__content {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	/* Alignment */
+	.cta-section--left .cta-section__content {
+		align-items: flex-start;
+		text-align: left;
+	}
+
+	.cta-section--center .cta-section__content {
+		align-items: center;
+		text-align: center;
+	}
+
+	.cta-section--right .cta-section__content {
+		align-items: flex-end;
+		text-align: right;
+	}
+
+	/* Title */
+	.cta-section__title {
+		margin: 0;
+		font-size: clamp(1.75rem, 4vw, 2.5rem);
+		font-weight: 700;
+		line-height: 1.2;
+		color: inherit;
+	}
+
+	/* Description */
+	.cta-section__description {
+		margin: 0;
+		font-size: clamp(1rem, 2vw, 1.25rem);
+		line-height: 1.6;
+		max-width: 48rem;
+		opacity: 0.95;
+	}
+
+	/* Actions */
+	.cta-section__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		margin-top: 0.5rem;
+	}
+
+	.cta-section--left .cta-section__actions {
+		justify-content: flex-start;
+	}
+
+	.cta-section--center .cta-section__actions {
+		justify-content: center;
+	}
+
+	.cta-section--right .cta-section__actions {
+		justify-content: flex-end;
+	}
+
+	/* Icon */
+	.cta-section__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 0.5rem;
+	}
+
+	.cta-section--split .cta-section__icon {
+		margin-bottom: 0;
+		min-height: 300px;
+	}
+
+	.cta-section--left .cta-section__icon {
+		margin-left: 0;
+		margin-right: auto;
+	}
+
+	.cta-section--center .cta-section__icon {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.cta-section--right .cta-section__icon {
+		margin-left: auto;
+		margin-right: 0;
+	}
+
+	/* Focus visible for interactive elements */
+	.cta-section__actions :global(a:focus-visible),
+	.cta-section__actions :global(button:focus-visible) {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Mobile optimization */
+	@media (max-width: 767px) {
+		.cta-section {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
+
+		.cta-section--sm {
+			--cta-padding: 1.5rem;
+		}
+
+		.cta-section--md {
+			--cta-padding: 2.5rem;
+		}
+
+		.cta-section--lg {
+			--cta-padding: 4rem;
+		}
+
+		.cta-section__actions {
+			width: 100%;
+		}
+
+		.cta-section__actions :global(a),
+		.cta-section__actions :global(button) {
+			min-height: 44px;
+			min-width: 44px;
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.cta-section--default {
+			--cta-bg: var(--color-primary-dark, #004999);
+		}
+
+		.cta-section--image::before {
+			background: rgba(0, 0, 0, 0.65);
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface CTASectionProps {
+    title: string;
+    description?: string;
+    variant?: 'default' | 'gradient' | 'image' | 'split';
+    background?: string;
+    align?: 'left' | 'center' | 'right';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    actions: Snippet;
+    icon?: Snippet;
+}
+declare const CTASection: import("svelte").Component<CTASectionProps, {}, "">;
+type CTASection = ReturnType<typeof CTASection>;
+export default CTASection;

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

@@ -0,0 +1,2 @@
+export { default as CTASection } from './CTASection.svelte';
+export type { CTASectionProps } from './CTASection.svelte';

package/dist/components/CTASection/index.js

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

package/dist/components/DoughnutChart/DoughnutChart.svelte

@@ -49,6 +49,10 @@
 	// Calculate total
 	const total = $derived(data.reduce((sum, item) => sum + item.value, 0));
 
+	// Calculate inner radius for doughnut (must be before arcs)
+	const innerRadius = $derived((size / 2 - 10) * (1 - thickness));
+	const outerRadius = $derived(size / 2 - 10);
+
 	// Calculate arc data
 	interface ArcData extends DataItem {
 		percentage: number;
@@ -87,10 +91,6 @@
 		return result;
 	});
 
-	// Calculate inner radius for doughnut
-	const innerRadius = $derived((size / 2 - 10) * (1 - thickness));
-	const outerRadius = $derived(size / 2 - 10);
-
 	// Helper to convert polar to cartesian coordinates
 	function polarToCartesian(
 		centerX: number,

package/dist/components/FlexibleGrid/FlexibleGrid.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import type {
+		SpacingToken,
+		FlexibleGridCell,
+		FlexibleGridRow,
+		FlexibleGridProps
+	} from '../../types/index.js';
+
+	interface Props extends Omit<FlexibleGridProps, 'children'> {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		rows,
+		gap = 'xs', // Use design token by default
+		cellHeight = '80px',
+		defaultBgColor = '#6B7A99',
+		defaultTextColor = 'white',
+		columns = 12,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Convert SpacingToken to CSS value if needed
+	const getGapValue = (gapValue: SpacingToken | string): string => {
+		const spacingMap: Record<SpacingToken, string> = {
+			xs: 'var(--space-xs, 0.25rem)',
+			sm: 'var(--space-sm, 0.5rem)',
+			md: 'var(--space-md, 1rem)',
+			lg: 'var(--space-lg, 1.5rem)',
+			xl: 'var(--space-xl, 2rem)',
+			'2xl': 'var(--space-2xl, 3rem)',
+			'3xl': 'var(--space-3xl, 4rem)'
+		};
+		return spacingMap[gapValue as SpacingToken] || gapValue;
+	};
+</script>
+
+<div class="flexible-grid {className}" style="gap: {getGapValue(gap)};">
+	{#each rows as row, rowIndex}
+		<div
+			class="grid-row {row.class || ''}"
+			style="gap: {getGapValue(gap)}; grid-template-columns: repeat({columns}, 1fr);"
+		>
+			{#each row.cells as cell, cellIndex}
+				<div
+					class="grid-cell {cell.class || ''}"
+					style="
+						grid-column: span {cell.span};
+						height: {cellHeight};
+						background-color: {cell.bgColor || defaultBgColor};
+						color: {cell.textColor || defaultTextColor};
+					"
+				>
+					{@html cell.content}
+				</div>
+			{/each}
+		</div>
+	{/each}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.flexible-grid {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		background-color: transparent;
+		font-family: inherit;
+	}
+
+	.grid-row {
+		display: grid;
+		width: 100%;
+	}
+
+	.grid-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 2rem;
+		font-weight: 600;
+		border-radius: 4px;
+		transition: transform 0.2s ease;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.grid-cell:hover {
+		transform: scale(1.02);
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 768px) {
+		.grid-cell {
+			font-size: 1.5rem;
+			min-height: 60px;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.grid-cell {
+			font-size: 1rem;
+			min-height: 50px;
+		}
+
+		.grid-row {
+			grid-template-columns: repeat(6, 1fr) !important;
+		}
+
+		.grid-cell {
+			/* On mobile, adjust span to fit 6 columns */
+			grid-column: span min(6, attr(data-span integer, 1)) !important;
+		}
+	}
+</style>

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

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