@aspect-ops/exon-ui 0.2.1 → 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

@@ -52,16 +52,22 @@ export { ProgressBar, ProgressCircle, Spinner } from './components/Progress/inde
 export { Tooltip } from './components/Tooltip/index.js';
 export { Popover, PopoverTrigger, PopoverContent } from './components/Popover/index.js';
 export { Skeleton } from './components/Skeleton/index.js';
-export { Card, CardHeader, CardBody, CardFooter } from './components/Card/index.js';
+export { StatusBanner } from './components/StatusBanner/index.js';
+export { Card, CardHeader, CardBody, CardFooter, FlipCard } from './components/Card/index.js';
 export { Avatar, AvatarGroup } from './components/Avatar/index.js';
 export { Tag } from './components/Tag/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
+export { PageHeader } from './components/PageHeader/index.js';
 export { List, ListItem } from './components/List/index.js';
+export { StatCircle } from './components/StatCircle/index.js';
 export { Table, TableHead, TableHeader, TableBody, TableRow, TableCell } from './components/Table/index.js';
 export { Accordion, AccordionItem } from './components/Accordion/index.js';
 export { Slider } from './components/Slider/index.js';
 export { Carousel, CarouselSlide } from './components/Carousel/index.js';
 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 { Container } from './components/Container/index.js';
 export { Grid } from './components/Grid/index.js';
 export { GridItem } from './components/Grid/index.js';
@@ -83,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 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, CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps, 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';
+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

@@ -58,17 +58,23 @@ export { ProgressBar, ProgressCircle, Spinner } from './components/Progress/inde
 export { Tooltip } from './components/Tooltip/index.js';
 export { Popover, PopoverTrigger, PopoverContent } from './components/Popover/index.js';
 export { Skeleton } from './components/Skeleton/index.js';
+export { StatusBanner } from './components/StatusBanner/index.js';
 // Data Display Components
-export { Card, CardHeader, CardBody, CardFooter } from './components/Card/index.js';
+export { Card, CardHeader, CardBody, CardFooter, FlipCard } from './components/Card/index.js';
 export { Avatar, AvatarGroup } from './components/Avatar/index.js';
 export { Tag } from './components/Tag/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
+export { PageHeader } from './components/PageHeader/index.js';
 export { List, ListItem } from './components/List/index.js';
+export { StatCircle } from './components/StatCircle/index.js';
 export { Table, TableHead, TableHeader, TableBody, TableRow, TableCell } from './components/Table/index.js';
 export { Accordion, AccordionItem } from './components/Accordion/index.js';
 export { Slider } from './components/Slider/index.js';
 export { Carousel, CarouselSlide } from './components/Carousel/index.js';
 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';
 // Layout Components
 export { Container } from './components/Container/index.js';
 export { Grid } from './components/Grid/index.js';
@@ -92,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/dist/types/data-display.d.ts

@@ -13,6 +13,12 @@ export interface CardBodyProps {
 export interface CardFooterProps {
     class?: string;
 }
+export interface FlipCardProps {
+    flipped?: boolean;
+    class?: string;
+    front?: import('svelte').Snippet;
+    back?: import('svelte').Snippet;
+}
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'circle' | 'square';
 export interface AvatarProps {
@@ -45,6 +51,24 @@ export interface EmptyStateProps {
     size?: EmptyStateSize;
     class?: string;
 }
+export interface PageHeaderProps {
+    greeting?: string;
+    userName: string;
+    avatarSrc?: string;
+    avatarInitials?: string;
+    class?: string;
+}
+export type StatCircleColor = 'default' | 'primary' | 'warning' | 'error' | 'success';
+export type StatCircleSize = 'sm' | 'md' | 'lg';
+export interface StatCircleProps {
+    value: number | string;
+    label: string;
+    color?: StatCircleColor;
+    size?: StatCircleSize;
+    clickable?: boolean;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+}
 export interface ListProps {
     dividers?: boolean;
     class?: string;
@@ -159,3 +183,51 @@ export interface ImageProps {
     aspectRatio?: string;
     class?: string;
 }
+export type StatusBadgeColor = 'success' | 'warning' | 'error' | 'info' | 'default';
+export type StatusBadgeSize = 'sm' | 'md' | 'lg';
+export interface StatusBadgeProps {
+    status: string;
+    colorMap?: Record<string, StatusBadgeColor>;
+    size?: StatusBadgeSize;
+    dot?: boolean;
+    uppercase?: boolean;
+    class?: string;
+}
+export type StatsCardColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export interface StatsCardTrend {
+    value: number;
+    direction: 'up' | 'down';
+}
+export interface StatsCardProps {
+    label: string;
+    value: number | string;
+    color?: StatsCardColor;
+    selected?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    trend?: StatsCardTrend;
+    loading?: boolean;
+    class?: string;
+}
+export type DataTableSortOrder = 'asc' | 'desc';
+export type DataTableColumnAlign = 'left' | 'center' | 'right';
+export interface DataTableColumn {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: DataTableColumnAlign;
+    cell?: import('svelte').Snippet<[value: unknown, row: unknown]>;
+}
+export interface DataTableProps {
+    data: unknown[];
+    columns: DataTableColumn[];
+    sortBy?: string;
+    sortOrder?: DataTableSortOrder;
+    onsort?: (column: string, order: DataTableSortOrder) => void;
+    loading?: boolean;
+    loadingRows?: number;
+    rowHover?: boolean;
+    striped?: boolean;
+    stickyHeader?: boolean;
+    class?: string;
+}

package/dist/types/feedback.d.ts

@@ -90,3 +90,13 @@ export interface SkeletonProps {
     height?: string;
     class?: string;
 }
+export type StatusBannerStatus = 'online' | 'offline' | 'warning' | 'error' | 'reconnecting';
+export type StatusBannerPosition = 'fixed' | 'sticky' | 'static';
+export interface StatusBannerProps {
+    status: StatusBannerStatus;
+    message?: string;
+    description?: string;
+    dismissible?: boolean;
+    position?: StatusBannerPosition;
+    class?: string;
+}

package/dist/types/index.d.ts

@@ -127,8 +127,8 @@ export interface SwitchProps {
     class?: string;
 }
 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 } from './feedback.js';
-export type { CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps } from './data-display.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 { 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';