@aspect-ops/exon-ui 0.2.2 → 0.3.0

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,444 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface TimelineItem {
+		title: string;
+		description?: string;
+		date?: string;
+		icon?: string | Snippet;
+		status?: 'completed' | 'current' | 'upcoming';
+	}
+
+	export interface TimelineProps {
+		items: TimelineItem[];
+		variant?: 'vertical' | 'horizontal';
+		alternating?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		connectorStyle?: 'solid' | 'dashed' | 'dotted';
+		class?: string;
+	}
+
+	let {
+		items,
+		variant = 'vertical',
+		alternating = false,
+		size = 'md',
+		connectorStyle = 'solid',
+		class: className = ''
+	}: TimelineProps = $props();
+
+	const getStatusLabel = (status?: string): string => {
+		switch (status) {
+			case 'completed':
+				return 'Completed';
+			case 'current':
+				return 'Current step';
+			case 'upcoming':
+				return 'Upcoming';
+			default:
+				return '';
+		}
+	};
+
+	const isSnippet = (icon: any): icon is Snippet => {
+		return typeof icon === 'function';
+	};
+</script>
+
+<ol
+	class="timeline {variant} {size} connector-{connectorStyle} {className}"
+	class:alternating={alternating && variant === 'vertical'}
+	role="list"
+>
+	{#each items as item, index}
+		{@const isAlternate = alternating && variant === 'vertical' && index % 2 === 1}
+		{@const statusLabel = getStatusLabel(item.status)}
+
+		<li
+			class="timeline-item"
+			class:alternate={isAlternate}
+			class:status-completed={item.status === 'completed'}
+			class:status-current={item.status === 'current'}
+			class:status-upcoming={item.status === 'upcoming'}
+			aria-current={item.status === 'current' ? 'step' : undefined}
+			aria-label={statusLabel ? `${item.title} - ${statusLabel}` : item.title}
+		>
+			<div class="timeline-marker">
+				<div class="timeline-dot">
+					{#if item.icon}
+						<div class="timeline-icon">
+							{#if typeof item.icon === 'string'}
+								<span class="icon-text">{item.icon}</span>
+							{:else if isSnippet(item.icon)}
+								{@render item.icon()}
+							{/if}
+						</div>
+					{/if}
+				</div>
+				{#if index < items.length - 1}
+					<div class="timeline-connector" aria-hidden="true"></div>
+				{/if}
+			</div>
+
+			<div class="timeline-content">
+				{#if item.date}
+					<time class="timeline-date" datetime={item.date}>{item.date}</time>
+				{/if}
+				<h3 class="timeline-title">{item.title}</h3>
+				{#if item.description}
+					<p class="timeline-description">{item.description}</p>
+				{/if}
+			</div>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.timeline {
+		--timeline-line-color: var(--color-border, #e5e7eb);
+		--timeline-dot-size: 1rem;
+		--timeline-completed-color: var(--color-success, #10b981);
+		--timeline-current-color: var(--color-primary, #3b82f6);
+		--timeline-upcoming-color: var(--color-text-muted, #9ca3af);
+		--timeline-gap: 1.5rem;
+
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		position: relative;
+	}
+
+	/* Size variants */
+	.timeline.sm {
+		--timeline-dot-size: 0.75rem;
+		--timeline-gap: 1rem;
+	}
+
+	.timeline.sm .timeline-title {
+		font-size: 0.875rem;
+	}
+
+	.timeline.sm .timeline-description,
+	.timeline.sm .timeline-date {
+		font-size: 0.75rem;
+	}
+
+	.timeline.lg {
+		--timeline-dot-size: 1.25rem;
+		--timeline-gap: 2rem;
+	}
+
+	.timeline.lg .timeline-title {
+		font-size: 1.125rem;
+	}
+
+	/* Vertical layout (default) */
+	.timeline.vertical {
+		display: flex;
+		flex-direction: column;
+		gap: var(--timeline-gap);
+	}
+
+	.timeline.vertical .timeline-item {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 1rem;
+		position: relative;
+	}
+
+	.timeline.vertical .timeline-marker {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		position: relative;
+	}
+
+	.timeline.vertical .timeline-connector {
+		width: 2px;
+		flex: 1;
+		margin-top: 0.5rem;
+		background-color: var(--timeline-line-color);
+	}
+
+	.timeline.vertical.connector-dashed .timeline-connector {
+		background: repeating-linear-gradient(
+			to bottom,
+			var(--timeline-line-color) 0,
+			var(--timeline-line-color) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
+
+	.timeline.vertical.connector-dotted .timeline-connector {
+		background: repeating-linear-gradient(
+			to bottom,
+			var(--timeline-line-color) 0,
+			var(--timeline-line-color) 2px,
+			transparent 2px,
+			transparent 6px
+		);
+	}
+
+	/* Alternating layout */
+	.timeline.alternating .timeline-item.alternate {
+		grid-template-columns: 1fr auto;
+		direction: rtl;
+	}
+
+	.timeline.alternating .timeline-item.alternate .timeline-content {
+		direction: ltr;
+		text-align: right;
+	}
+
+	.timeline.alternating .timeline-item.alternate .timeline-date {
+		text-align: right;
+	}
+
+	/* Horizontal layout */
+	.timeline.horizontal {
+		display: flex;
+		flex-direction: row;
+		gap: var(--timeline-gap);
+		overflow-x: auto;
+		padding-bottom: 1rem;
+	}
+
+	.timeline.horizontal .timeline-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		min-width: 8rem;
+		flex-shrink: 0;
+	}
+
+	.timeline.horizontal .timeline-marker {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		width: 100%;
+	}
+
+	.timeline.horizontal .timeline-connector {
+		height: 2px;
+		flex: 1;
+		margin-left: 0.5rem;
+		background-color: var(--timeline-line-color);
+	}
+
+	.timeline.horizontal.connector-dashed .timeline-connector {
+		background: repeating-linear-gradient(
+			to right,
+			var(--timeline-line-color) 0,
+			var(--timeline-line-color) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
+
+	.timeline.horizontal.connector-dotted .timeline-connector {
+		background: repeating-linear-gradient(
+			to right,
+			var(--timeline-line-color) 0,
+			var(--timeline-line-color) 2px,
+			transparent 2px,
+			transparent 6px
+		);
+	}
+
+	.timeline.horizontal .timeline-content {
+		margin-top: 0.75rem;
+		text-align: center;
+	}
+
+	/* Timeline dot */
+	.timeline-dot {
+		width: var(--timeline-dot-size);
+		height: var(--timeline-dot-size);
+		border-radius: 50%;
+		background-color: var(--timeline-upcoming-color);
+		border: 2px solid currentColor;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		position: relative;
+		z-index: 1;
+	}
+
+	.timeline-item.status-completed .timeline-dot {
+		background-color: var(--timeline-completed-color);
+		color: var(--timeline-completed-color);
+	}
+
+	.timeline-item.status-current .timeline-dot {
+		background-color: var(--timeline-current-color);
+		color: var(--timeline-current-color);
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	.timeline-item.status-upcoming .timeline-dot {
+		background-color: var(--color-background, #ffffff);
+		color: var(--timeline-upcoming-color);
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+		}
+		50% {
+			box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1);
+		}
+	}
+
+	/* Timeline icon */
+	.timeline-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		font-size: 0.625rem;
+	}
+
+	.icon-text {
+		line-height: 1;
+	}
+
+	/* Timeline content */
+	.timeline-content {
+		min-width: 0;
+		padding-top: 0.125rem;
+	}
+
+	.timeline-date {
+		display: block;
+		font-size: 0.875rem;
+		color: var(--timeline-upcoming-color);
+		margin-bottom: 0.25rem;
+	}
+
+	.timeline-title {
+		font-size: 1rem;
+		font-weight: 600;
+		color: var(--color-text, #1f2937);
+		margin: 0 0 0.25rem 0;
+		line-height: 1.5;
+	}
+
+	.timeline-item.status-current .timeline-title {
+		font-weight: 700;
+		color: var(--timeline-current-color);
+	}
+
+	.timeline-description {
+		font-size: 0.875rem;
+		color: var(--color-text-secondary, #6b7280);
+		margin: 0;
+		line-height: 1.5;
+	}
+
+	/* Responsive: horizontal becomes vertical on mobile */
+	@media (max-width: 640px) {
+		.timeline.horizontal {
+			flex-direction: column;
+			gap: var(--timeline-gap);
+		}
+
+		.timeline.horizontal .timeline-item {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: 1rem;
+			min-width: auto;
+			align-items: start;
+		}
+
+		.timeline.horizontal .timeline-marker {
+			flex-direction: column;
+			width: auto;
+		}
+
+		.timeline.horizontal .timeline-connector {
+			width: 2px;
+			height: auto;
+			flex: 1;
+			margin-left: 0;
+			margin-top: 0.5rem;
+		}
+
+		.timeline.horizontal.connector-dashed .timeline-connector {
+			background: repeating-linear-gradient(
+				to bottom,
+				var(--timeline-line-color) 0,
+				var(--timeline-line-color) 4px,
+				transparent 4px,
+				transparent 8px
+			);
+		}
+
+		.timeline.horizontal.connector-dotted .timeline-connector {
+			background: repeating-linear-gradient(
+				to bottom,
+				var(--timeline-line-color) 0,
+				var(--timeline-line-color) 2px,
+				transparent 2px,
+				transparent 6px
+			);
+		}
+
+		.timeline.horizontal .timeline-content {
+			margin-top: 0;
+			text-align: left;
+		}
+
+		/* Alternating becomes single-side on mobile */
+		.timeline.alternating .timeline-item.alternate {
+			grid-template-columns: auto 1fr;
+			direction: ltr;
+		}
+
+		.timeline.alternating .timeline-item.alternate .timeline-content {
+			text-align: left;
+		}
+
+		.timeline.alternating .timeline-item.alternate .timeline-date {
+			text-align: left;
+		}
+	}
+
+	/* Accessibility: Focus styles */
+	.timeline-item:focus-visible {
+		outline: 2px solid var(--timeline-current-color);
+		outline-offset: 2px;
+		border-radius: 0.25rem;
+	}
+
+	/* Touch targets */
+	@media (hover: none) {
+		.timeline-item {
+			min-height: 44px;
+		}
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.timeline {
+			--timeline-line-color: var(--color-border-dark, #374151);
+			--timeline-upcoming-color: var(--color-text-muted-dark, #6b7280);
+		}
+
+		.timeline-title {
+			color: var(--color-text-dark, #f9fafb);
+		}
+
+		.timeline-description {
+			color: var(--color-text-secondary-dark, #9ca3af);
+		}
+
+		.timeline-item.status-upcoming .timeline-dot {
+			background-color: var(--color-background-dark, #1f2937);
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export interface TimelineItem {
+    title: string;
+    description?: string;
+    date?: string;
+    icon?: string | Snippet;
+    status?: 'completed' | 'current' | 'upcoming';
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    variant?: 'vertical' | 'horizontal';
+    alternating?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    connectorStyle?: 'solid' | 'dashed' | 'dotted';
+    class?: string;
+}
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

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

@@ -0,0 +1,2 @@
+export { default as Timeline } from './Timeline.svelte';
+export type { TimelineProps, TimelineItem } from './Timeline.svelte';

package/dist/components/Timeline/index.js

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

package/dist/index.d.ts

@@ -89,4 +89,20 @@ 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 { GlobalHeader } from './components/GlobalHeader/index.js';
+export type { GlobalHeaderProps, NavItem as GlobalHeaderNavItem } from './components/GlobalHeader/index.js';
+export { CTASection } from './components/CTASection/index.js';
+export type { CTASectionProps } from './components/CTASection/index.js';
+export { LogoCloud } from './components/LogoCloud/index.js';
+export type { LogoCloudProps, LogoItem } from './components/LogoCloud/index.js';
+export { ServiceCard } from './components/ServiceCard/index.js';
+export type { ServiceCardProps } from './components/ServiceCard/index.js';
+export { SplitSection } from './components/SplitSection/index.js';
+export type { SplitSectionProps } from './components/SplitSection/index.js';
+export { Timeline } from './components/Timeline/index.js';
+export type { TimelineProps, TimelineItem } from './components/Timeline/index.js';
 export type { ButtonProps, ButtonVariant, ButtonSize, TypographyProps, TypographyVariant, IconProps, IconSize, BadgeProps, BadgeVariant, LinkProps, InputSize, TextInputType, FormFieldProps, TextInputProps, TextareaProps, SelectOption, SelectProps, CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps, NumberInputProps, PaginationProps, 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, 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, CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, FlipDirection, FlipTrigger, 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, ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps, SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './types/index.js';

package/dist/index.js

@@ -98,3 +98,12 @@ 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 { GlobalHeader } from './components/GlobalHeader/index.js';
+export { CTASection } from './components/CTASection/index.js';
+export { LogoCloud } from './components/LogoCloud/index.js';
+export { ServiceCard } from './components/ServiceCard/index.js';
+export { SplitSection } from './components/SplitSection/index.js';
+export { Timeline } from './components/Timeline/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aspect-ops/exon-ui",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"description": "Reusable Svelte UI components for web and Capacitor mobile apps",
 	"author": "Exon Team",
 	"license": "MIT",