@aspect-ops/exon-ui 0.2.0 → 0.2.1

package/dist/components/Mermaid/Mermaid.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	interface ThemeVariables {
+		primaryColor?: string;
+		primaryTextColor?: string;
+		primaryBorderColor?: string;
+		lineColor?: string;
+		secondaryColor?: string;
+		tertiaryColor?: string;
+		background?: string;
+		mainBkg?: string;
+		nodeBorder?: string;
+		clusterBkg?: string;
+		titleColor?: string;
+		edgeLabelBackground?: string;
+	}
+
+	interface Props {
+		/** Mermaid diagram code. If not provided, uses slot content */
+		code?: string;
+		/** Custom theme variables */
+		theme?: ThemeVariables;
+		/** Custom class */
+		class?: string;
+		/** Slot content for diagram code */
+		children?: Snippet;
+	}
+
+	// Default ExonPro theme
+	const defaultTheme: ThemeVariables = {
+		primaryColor: '#4654A3',
+		primaryTextColor: '#270949',
+		primaryBorderColor: '#4654A3',
+		lineColor: '#270949',
+		secondaryColor: '#FF3131',
+		tertiaryColor: '#f3f4f6'
+	};
+
+	let { code, theme = defaultTheme, class: className = '', children }: Props = $props();
+
+	let containerRef: HTMLDivElement | undefined = $state();
+	let slotRef: HTMLDivElement | undefined = $state();
+	let isLoading = $state(true);
+	let hasError = $state(false);
+	let errorMessage = $state('');
+	let renderedSvg = $state('');
+
+	// Get diagram code from prop or slot
+	function getDiagramCode(): string {
+		if (code) return code;
+		if (slotRef) {
+			return slotRef.textContent?.trim() || '';
+		}
+		return '';
+	}
+
+	onMount(async () => {
+		try {
+			// Dynamically import mermaid (type assertion for dynamic import)
+			const mermaidModule = await import('mermaid');
+			const mermaid = mermaidModule.default;
+
+			// Initialize mermaid with theme
+			mermaid.initialize({
+				startOnLoad: false,
+				theme: 'base',
+				themeVariables: { ...defaultTheme, ...theme },
+				securityLevel: 'loose',
+				fontFamily: 'inherit'
+			});
+
+			const diagramCode = getDiagramCode();
+			if (!diagramCode) {
+				hasError = true;
+				errorMessage = 'No diagram code provided';
+				isLoading = false;
+				return;
+			}
+
+			// Generate unique ID
+			const id = `mermaid-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+
+			// Render the diagram
+			const { svg } = await mermaid.render(id, diagramCode);
+			renderedSvg = svg;
+		} catch (error) {
+			hasError = true;
+			errorMessage = error instanceof Error ? error.message : 'Failed to render diagram';
+		} finally {
+			isLoading = false;
+		}
+	});
+</script>
+
+<div class="mermaid-container {className}" bind:this={containerRef}>
+	<!-- Hidden slot for extracting diagram code -->
+	<div bind:this={slotRef} style="display: none;">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if isLoading}
+		<div class="mermaid-loading">
+			<div class="mermaid-spinner"></div>
+			<span>Rendering diagram...</span>
+		</div>
+	{:else if hasError}
+		<div class="mermaid-error" role="alert">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<circle cx="12" cy="12" r="10" />
+				<line x1="12" y1="8" x2="12" y2="12" />
+				<line x1="12" y1="16" x2="12.01" y2="16" />
+			</svg>
+			<div>
+				<strong>Failed to render diagram</strong>
+				<p>{errorMessage}</p>
+			</div>
+		</div>
+	{:else}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		<div class="mermaid-diagram">{@html renderedSvg}</div>
+	{/if}
+</div>
+
+<style>
+	.mermaid-container {
+		width: 100%;
+		font-family: inherit;
+	}
+
+	/* Loading */
+	.mermaid-loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-md, 1rem);
+		padding: var(--space-xl, 2rem);
+		color: var(--color-text-muted, #6b7280);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.mermaid-spinner {
+		width: 2rem;
+		height: 2rem;
+		border: 3px solid var(--color-border, #e5e7eb);
+		border-top-color: var(--color-primary, #3b82f6);
+		border-radius: var(--radius-full, 9999px);
+		animation: spin 0.75s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Error */
+	.mermaid-error {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--space-md, 1rem);
+		padding: var(--space-md, 1rem);
+		background: var(--color-error-bg, #fee2e2);
+		color: var(--color-error, #dc2626);
+		border-radius: var(--radius-md, 0.375rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.mermaid-error svg {
+		flex-shrink: 0;
+		margin-top: 2px;
+	}
+
+	.mermaid-error strong {
+		display: block;
+		font-weight: var(--font-semibold, 600);
+	}
+
+	.mermaid-error p {
+		margin: var(--space-xs, 0.25rem) 0 0;
+		opacity: 0.9;
+	}
+
+	/* Diagram */
+	.mermaid-diagram {
+		width: 100%;
+		overflow-x: auto;
+	}
+
+	.mermaid-diagram :global(svg) {
+		max-width: 100%;
+		height: auto;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+interface ThemeVariables {
+    primaryColor?: string;
+    primaryTextColor?: string;
+    primaryBorderColor?: string;
+    lineColor?: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    background?: string;
+    mainBkg?: string;
+    nodeBorder?: string;
+    clusterBkg?: string;
+    titleColor?: string;
+    edgeLabelBackground?: string;
+}
+interface Props {
+    /** Mermaid diagram code. If not provided, uses slot content */
+    code?: string;
+    /** Custom theme variables */
+    theme?: ThemeVariables;
+    /** Custom class */
+    class?: string;
+    /** Slot content for diagram code */
+    children?: Snippet;
+}
+declare const Mermaid: import("svelte").Component<Props, {}, "">;
+type Mermaid = ReturnType<typeof Mermaid>;
+export default Mermaid;

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

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

package/dist/components/Mermaid/index.js

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

package/dist/components/Mermaid/mermaid.d.ts

@@ -0,0 +1,21 @@
+// Type declarations for mermaid
+declare module 'mermaid' {
+	interface MermaidConfig {
+		startOnLoad?: boolean;
+		theme?: string;
+		themeVariables?: Record<string, string | undefined>;
+		securityLevel?: string;
+		fontFamily?: string;
+	}
+
+	interface RenderResult {
+		svg: string;
+	}
+
+	const mermaid: {
+		initialize: (config: MermaidConfig) => void;
+		render: (id: string, code: string) => Promise<RenderResult>;
+	};
+
+	export default mermaid;
+}

package/dist/components/Popover/PopoverTrigger.svelte

@@ -9,6 +9,4 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<BitsPopover.Trigger class={className}>
-	{@render children?.()}
-</BitsPopover.Trigger>
+<BitsPopover.Trigger child={children}></BitsPopover.Trigger>

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';
@@ -74,4 +77,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, 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';

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';
@@ -83,3 +86,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/index.d.ts

@@ -131,4 +131,4 @@ export type { AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData,
 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 { 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.1",
 	"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",