@aspect-ops/exon-ui 0.2.0 → 0.2.2

package/dist/components/ViewCounter/ViewCounter.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/** Unique identifier for the content being viewed */
+		slug: string;
+		/** Whether to show the "views" label */
+		showLabel?: boolean;
+		/** Whether to track the view (POST to API) or just display */
+		trackView?: boolean;
+		/** Custom class */
+		class?: string;
+		/** Callback to get current view count */
+		onGetCount?: (slug: string) => Promise<number>;
+		/** Callback to track/increment view */
+		onTrackView?: (slug: string) => Promise<number>;
+	}
+
+	let {
+		slug,
+		showLabel = true,
+		trackView = true,
+		class: className = '',
+		onGetCount,
+		onTrackView
+	}: Props = $props();
+
+	let viewCount = $state<number | null>(null);
+	let isLoading = $state(true);
+	let hasError = $state(false);
+
+	// Format large numbers (1K, 1M, etc.)
+	function formatCount(count: number): string {
+		if (count >= 1000000) {
+			return (count / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+		}
+		if (count >= 1000) {
+			return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+		}
+		return count.toString();
+	}
+
+	// Check if already viewed in this session
+	function hasViewedInSession(): boolean {
+		if (typeof window === 'undefined') return false;
+		const viewed = sessionStorage.getItem(`viewed_${slug}`);
+		return viewed === 'true';
+	}
+
+	// Mark as viewed in session
+	function markViewedInSession(): void {
+		if (typeof window !== 'undefined') {
+			sessionStorage.setItem(`viewed_${slug}`, 'true');
+		}
+	}
+
+	onMount(async () => {
+		try {
+			// If tracking is enabled and not already viewed
+			if (trackView && onTrackView && !hasViewedInSession()) {
+				viewCount = await onTrackView(slug);
+				markViewedInSession();
+			} else if (onGetCount) {
+				// Just get the count without tracking
+				viewCount = await onGetCount(slug);
+			} else {
+				// No callbacks provided, show 0
+				viewCount = 0;
+			}
+		} catch {
+			hasError = true;
+			viewCount = 0;
+		} finally {
+			isLoading = false;
+		}
+	});
+
+	const formattedCount = $derived(viewCount !== null ? formatCount(viewCount) : '—');
+</script>
+
+<span class="view-counter {className}" class:view-counter--loading={isLoading}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="view-counter__icon"
+		aria-hidden="true"
+	>
+		<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+		<circle cx="12" cy="12" r="3" />
+	</svg>
+	<span class="view-counter__count">
+		{#if isLoading}
+			<span class="view-counter__skeleton"></span>
+		{:else}
+			{formattedCount}
+		{/if}
+	</span>
+	{#if showLabel}
+		<span class="view-counter__label">views</span>
+	{/if}
+</span>
+
+<style>
+	.view-counter {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text-muted, #6b7280);
+		font-family: inherit;
+	}
+
+	.view-counter__icon {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+
+	.view-counter__count {
+		font-weight: var(--font-medium, 500);
+		min-width: 1.5rem;
+	}
+
+	.view-counter__label {
+		opacity: 0.8;
+	}
+
+	.view-counter__skeleton {
+		display: inline-block;
+		width: 2rem;
+		height: 1em;
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted, #f3f4f6) 25%,
+			var(--color-border, #e5e7eb) 50%,
+			var(--color-bg-muted, #f3f4f6) 75%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-pulse 1.5s ease-in-out infinite;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	@keyframes skeleton-pulse {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+interface Props {
+    /** Unique identifier for the content being viewed */
+    slug: string;
+    /** Whether to show the "views" label */
+    showLabel?: boolean;
+    /** Whether to track the view (POST to API) or just display */
+    trackView?: boolean;
+    /** Custom class */
+    class?: string;
+    /** Callback to get current view count */
+    onGetCount?: (slug: string) => Promise<number>;
+    /** Callback to track/increment view */
+    onTrackView?: (slug: string) => Promise<number>;
+}
+declare const ViewCounter: import("svelte").Component<Props, {}, "">;
+type ViewCounter = ReturnType<typeof ViewCounter>;
+export default ViewCounter;

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

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

package/dist/components/ViewCounter/index.js

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

package/dist/index.d.ts

@@ -19,6 +19,9 @@ export { OTPInput } from './components/OTPInput/index.js';
 export { TimePicker } from './components/TimePicker/index.js';
 export { Rating } from './components/Rating/index.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/index.js';
+export { NumberInput } from './components/NumberInput/index.js';
+export { Pagination } from './components/Pagination/index.js';
+export { Chip, ChipGroup } from './components/Chip/index.js';
 export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TabList } from './components/Tabs/TabList.svelte';
 export { default as TabTrigger } from './components/Tabs/TabTrigger.svelte';
@@ -49,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';
@@ -74,4 +83,10 @@ export { ActionSheet, ActionSheetItem } from './components/ActionSheet/index.js'
 export { PullToRefresh } from './components/PullToRefresh/index.js';
 export { SwipeActions, SwipeAction } from './components/SwipeActions/index.js';
 export { FAB, FABGroup } from './components/FAB/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, 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 { 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 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

@@ -23,6 +23,9 @@ export { OTPInput } from './components/OTPInput/index.js';
 export { TimePicker } from './components/TimePicker/index.js';
 export { Rating } from './components/Rating/index.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/index.js';
+export { NumberInput } from './components/NumberInput/index.js';
+export { Pagination } from './components/Pagination/index.js';
+export { Chip, ChipGroup } from './components/Chip/index.js';
 // Navigation Components
 export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TabList } from './components/Tabs/TabList.svelte';
@@ -55,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';
@@ -83,3 +92,9 @@ export { ActionSheet, ActionSheetItem } from './components/ActionSheet/index.js'
 export { PullToRefresh } from './components/PullToRefresh/index.js';
 export { SwipeActions, SwipeAction } from './components/SwipeActions/index.js';
 export { FAB, FABGroup } from './components/FAB/index.js';
+// Website Components
+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';

package/dist/styles/tokens.css

@@ -153,7 +153,8 @@
 	 * Scale: 1.2 → 1.25
 	 * ======================================== */
 
-	--font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	--font-family:
+		'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 	--font-family-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
 
 	/* Fluid type scale */

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 } from './input.js';
+export type { SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupItemProps, NumberInputProps, PaginationProps } from './input.js';

package/dist/types/input.d.ts

@@ -80,3 +80,23 @@ export interface ToggleGroupItemProps {
     disabled?: boolean;
     class?: string;
 }
+export interface NumberInputProps {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    id?: string;
+    error?: boolean;
+    class?: string;
+    onValueChange?: (value: number | null) => void;
+}
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    siblingCount?: number;
+    onPageChange?: (page: number) => void;
+    class?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aspect-ops/exon-ui",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "Reusable Svelte UI components for web and Capacitor mobile apps",
 	"author": "Exon Team",
 	"license": "MIT",
@@ -98,6 +98,7 @@
 		"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",
@@ -110,7 +111,8 @@
 		"vitest": "^2.0.0"
 	},
 	"dependencies": {
-		"bits-ui": "^1.0.0"
+		"bits-ui": "^1.0.0",
+		"lucide-svelte": "^0.562.0"
 	},
 	"publishConfig": {
 		"access": "public"