@aspect-ops/exon-ui 0.0.2 → 0.1.0

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

@@ -0,0 +1,17 @@
+import type { InputSize } from '../../types/index.js';
+interface Props {
+    value?: string;
+    format?: '12h' | '24h';
+    minuteStep?: number;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: InputSize;
+    placeholder?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

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

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

package/dist/components/TimePicker/index.js

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

package/dist/components/Toast/Toast.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ToastVariant } from '../../types/index.js';
+
+	interface Props {
+		id: string;
+		message: string;
+		variant?: ToastVariant;
+		dismissible?: boolean;
+		progress?: boolean;
+		duration?: number;
+		action?: {
+			label: string;
+			onClick: () => void;
+		};
+		onDismiss?: (id: string) => void;
+		class?: string;
+	}
+
+	let {
+		id,
+		message,
+		variant = 'info',
+		dismissible = true,
+		progress = true,
+		duration = 5000,
+		action,
+		onDismiss,
+		class: className = ''
+	}: Props = $props();
+
+	let visible = $state(false);
+	let progressValue = $state(100);
+	let timeoutId: number | undefined;
+	let intervalId: number | undefined;
+
+	onMount(() => {
+		// Trigger slide-in animation
+		visible = true;
+
+		// Start progress bar animation if enabled
+		if (progress && duration > 0) {
+			const startTime = Date.now();
+			intervalId = window.setInterval(() => {
+				const elapsed = Date.now() - startTime;
+				const remaining = Math.max(0, ((duration - elapsed) / duration) * 100);
+				progressValue = remaining;
+
+				if (remaining <= 0) {
+					clearInterval(intervalId);
+				}
+			}, 16); // ~60fps
+		}
+
+		// Auto-dismiss after duration
+		if (duration > 0) {
+			timeoutId = window.setTimeout(() => {
+				handleDismiss();
+			}, duration);
+		}
+
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+			if (intervalId) clearInterval(intervalId);
+		};
+	});
+
+	function handleDismiss() {
+		visible = false;
+		// Wait for animation to complete before calling onDismiss
+		setTimeout(() => {
+			onDismiss?.(id);
+		}, 300);
+	}
+
+	function handleAction() {
+		action?.onClick();
+		handleDismiss();
+	}
+</script>
+
+<div
+	class="toast toast--{variant} {visible ? 'toast--visible' : ''} {className}"
+	role="status"
+	aria-live="polite"
+>
+	<div class="toast__content">
+		<div class="toast__message">{message}</div>
+
+		{#if action}
+			<button type="button" class="toast__action" onclick={handleAction}>
+				{action.label}
+			</button>
+		{/if}
+	</div>
+
+	{#if dismissible}
+		<button type="button" class="toast__close" onclick={handleDismiss} aria-label="Dismiss toast">
+			×
+		</button>
+	{/if}
+
+	{#if progress && duration > 0}
+		<div class="toast__progress">
+			<div class="toast__progress-bar" style="width: {progressValue}%"></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.toast {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		min-width: 18.75rem;
+		max-width: 25rem;
+		padding: var(--space-md, 1rem);
+		border-radius: var(--radius-md, 0.375rem);
+		box-shadow:
+			0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.1),
+			0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		opacity: 0;
+		transform: translateY(0.5rem);
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
+	}
+
+	.toast--visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.toast__content {
+		display: flex;
+		align-items: center;
+		gap: var(--space-md, 1rem);
+		flex: 1;
+	}
+
+	.toast__message {
+		flex: 1;
+	}
+
+	.toast__action {
+		flex-shrink: 0;
+		padding: 0.25rem 0.75rem;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: rgba(255, 255, 255, 0.2);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		min-height: 2.75rem;
+		min-width: 2.75rem;
+	}
+
+	.toast__action:hover {
+		background: rgba(255, 255, 255, 0.3);
+	}
+
+	.toast__action:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	.toast__close {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.75rem;
+		height: 2.75rem;
+		margin: -0.5rem -0.5rem -0.5rem 0.5rem;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		background: transparent;
+		font-family: inherit;
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.toast__close:hover {
+		background: rgba(255, 255, 255, 0.1);
+	}
+
+	.toast__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	.toast__progress {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 0.25rem;
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
+		overflow: hidden;
+	}
+
+	.toast__progress-bar {
+		height: 100%;
+		background: currentColor;
+		transition: width 0.016s linear;
+	}
+
+	/* Info variant */
+	.toast--info {
+		background-color: var(--color-info, #3b82f6);
+		color: white;
+	}
+
+	/* Success variant */
+	.toast--success {
+		background-color: var(--color-success, #10b981);
+		color: white;
+	}
+
+	/* Warning variant */
+	.toast--warning {
+		background-color: var(--color-warning, #f59e0b);
+		color: white;
+	}
+
+	/* Error variant */
+	.toast--error {
+		background-color: var(--color-error, #ef4444);
+		color: white;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { ToastVariant } from '../../types/index.js';
+interface Props {
+    id: string;
+    message: string;
+    variant?: ToastVariant;
+    dismissible?: boolean;
+    progress?: boolean;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onDismiss?: (id: string) => void;
+    class?: string;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toast/ToastContainer.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Toast from './Toast.svelte';
+	import { toast } from './toast.js';
+	import type { ToastPosition } from '../../types/index.js';
+
+	interface Props {
+		position?: ToastPosition;
+		class?: string;
+	}
+
+	let { position = 'bottom-right', class: className = '' }: Props = $props();
+
+	let mounted = $state(false);
+	let toasts = $state<typeof $toast>([]);
+
+	// Subscribe to toast store
+	const unsubscribe = toast.subscribe((value) => {
+		toasts = value;
+	});
+
+	onMount(() => {
+		mounted = true;
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleDismiss(id: string) {
+		toast.remove(id);
+	}
+</script>
+
+{#if mounted}
+	<div class="toast-container toast-container--{position} {className}">
+		{#each toasts as toastData (toastData.id)}
+			<Toast
+				id={toastData.id}
+				message={toastData.message}
+				variant={toastData.variant}
+				dismissible={toastData.dismissible}
+				progress={true}
+				duration={toastData.duration}
+				action={toastData.action}
+				onDismiss={handleDismiss}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.toast-container {
+		position: fixed;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md, 1rem);
+		pointer-events: none;
+		font-family:
+			-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	}
+
+	.toast-container :global(*) {
+		pointer-events: auto;
+	}
+
+	/* Position variants */
+	.toast-container--top {
+		top: var(--space-lg, 1.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		padding-top: env(safe-area-inset-top, 0);
+	}
+
+	.toast-container--top-left {
+		top: var(--space-lg, 1.5rem);
+		left: var(--space-lg, 1.5rem);
+		padding-top: env(safe-area-inset-top, 0);
+		padding-left: env(safe-area-inset-left, 0);
+	}
+
+	.toast-container--top-right {
+		top: var(--space-lg, 1.5rem);
+		right: var(--space-lg, 1.5rem);
+		padding-top: env(safe-area-inset-top, 0);
+		padding-right: env(safe-area-inset-right, 0);
+	}
+
+	.toast-container--bottom {
+		bottom: var(--space-lg, 1.5rem);
+		left: 50%;
+		transform: translateX(-50%);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	.toast-container--bottom-left {
+		bottom: var(--space-lg, 1.5rem);
+		left: var(--space-lg, 1.5rem);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		padding-left: env(safe-area-inset-left, 0);
+	}
+
+	.toast-container--bottom-right {
+		bottom: var(--space-lg, 1.5rem);
+		right: var(--space-lg, 1.5rem);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		padding-right: env(safe-area-inset-right, 0);
+	}
+</style>

package/dist/components/Toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToastPosition } from '../../types/index.js';
+interface Props {
+    position?: ToastPosition;
+    class?: string;
+}
+declare const ToastContainer: import("svelte").Component<Props, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

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

@@ -0,0 +1,3 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.js';

package/dist/components/Toast/index.js

@@ -0,0 +1,3 @@
+export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.js';

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,13 @@
+import type { ToastData } from '../../types/index.js';
+export declare const toast: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ToastData[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    add: (options: Omit<ToastData, "id"> & {
+        id?: string;
+    }) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    info: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    success: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    warning: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+    error: (message: string, options?: Partial<Omit<ToastData, "id" | "message" | "variant">>) => string;
+};

package/dist/components/Toast/toast.js

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+// Create the toast store
+function createToastStore() {
+    const { subscribe, update } = writable([]);
+    // Generate unique ID
+    function generateId() {
+        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    // Add a toast
+    function add(options) {
+        const id = options.id || generateId();
+        const duration = options.duration ?? 5000;
+        const toastData = {
+            ...options,
+            id,
+            duration,
+            variant: options.variant || 'info',
+            dismissible: options.dismissible ?? true
+        };
+        update((toasts) => [...toasts, toastData]);
+        return id;
+    }
+    // Remove a specific toast
+    function remove(id) {
+        update((toasts) => toasts.filter((t) => t.id !== id));
+    }
+    // Clear all toasts
+    function clear() {
+        update(() => []);
+    }
+    // Convenience methods for different variants
+    function info(message, options) {
+        return add({ message, variant: 'info', ...options });
+    }
+    function success(message, options) {
+        return add({ message, variant: 'success', ...options });
+    }
+    function warning(message, options) {
+        return add({ message, variant: 'warning', ...options });
+    }
+    function error(message, options) {
+        return add({ message, variant: 'error', ...options });
+    }
+    return {
+        subscribe,
+        add,
+        remove,
+        clear,
+        info,
+        success,
+        warning,
+        error
+    };
+}
+export const toast = createToastStore();

package/dist/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { TooltipProps } from '../../types/index.js';
+	import { Tooltip as BitsTooltip } from 'bits-ui';
+
+	interface Props extends TooltipProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { content, side = 'top', delay = 300, class: className = '', children }: Props = $props();
+</script>
+
+<BitsTooltip.Provider>
+	<BitsTooltip.Root delayDuration={delay}>
+		<BitsTooltip.Trigger child={children}></BitsTooltip.Trigger>
+		<BitsTooltip.Portal>
+			<BitsTooltip.Content {side} class="tooltip-content {className}">
+				{content}
+			</BitsTooltip.Content>
+		</BitsTooltip.Portal>
+	</BitsTooltip.Root>
+</BitsTooltip.Provider>
+
+<style>
+	/* Tooltip content */
+	:global(.tooltip-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		background: var(--exon-tooltip-bg, var(--exon-color-neutral-900, #1f2937));
+		color: var(--exon-tooltip-text, white);
+		font-size: 0.75rem;
+		padding: 0.375rem 0.625rem;
+		border-radius: var(--exon-radius-sm, 0.25rem);
+		max-width: 15rem;
+		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+		z-index: 200;
+		/* Prevent text wrapping issues */
+		word-wrap: break-word;
+		line-height: 1.4;
+	}
+
+	/* Fade-in animation */
+	:global(.tooltip-content[data-state='delayed-open']) {
+		animation: tooltip-fade-in 150ms ease-out;
+	}
+
+	:global(.tooltip-content[data-state='closed']) {
+		animation: tooltip-fade-out 100ms ease-in;
+	}
+
+	@keyframes -global-tooltip-fade-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes -global-tooltip-fade-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipProps, TooltipSide } from '../../types/feedback.js';

package/dist/components/Tooltip/index.js

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

package/dist/index.d.ts

@@ -12,6 +12,10 @@ export { default as CheckboxGroup } from './components/Checkbox/CheckboxGroup.sv
 export { default as Radio } from './components/Radio/Radio.svelte';
 export { default as RadioGroup } from './components/Radio/RadioGroup.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { SearchInput } from './components/SearchInput/index.js';
+export { DatePicker } from './components/DatePicker/index.js';
+export { FileUpload } from './components/FileUpload/index.js';
+export { OTPInput } from './components/OTPInput/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';
@@ -34,4 +38,37 @@ export { default as NavItem } from './components/Navbar/NavItem.svelte';
 export { default as Sidebar } from './components/Sidebar/Sidebar.svelte';
 export { default as SidebarItem } from './components/Sidebar/SidebarItem.svelte';
 export { default as SidebarGroup } from './components/Sidebar/SidebarGroup.svelte';
-export type { ButtonProps, ButtonVariant, ButtonSize, TypographyProps, TypographyVariant, IconProps, IconSize, BadgeProps, BadgeVariant, LinkProps, InputSize, TextInputType, FormFieldProps, TextInputProps, TextareaProps, SelectOption, SelectProps, CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, 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 } from './types/index.js';
+export { Stepper, StepperStep } from './components/Stepper/index.js';
+export { default as Alert } from './components/Alert/Alert.svelte';
+export { Toast, ToastContainer, toast } from './components/Toast/index.js';
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal/index.js';
+export { ProgressBar, ProgressCircle, Spinner } from './components/Progress/index.js';
+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 { Avatar, AvatarGroup } from './components/Avatar/index.js';
+export { Tag } from './components/Tag/index.js';
+export { EmptyState } from './components/EmptyState/index.js';
+export { List, ListItem } from './components/List/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 { Container } from './components/Container/index.js';
+export { Grid } from './components/Grid/index.js';
+export { GridItem } from './components/Grid/index.js';
+export { Stack } from './components/Stack/index.js';
+export { Divider } from './components/Divider/index.js';
+export { Spacer } from './components/Spacer/index.js';
+export { AspectRatio } from './components/AspectRatio/index.js';
+export { Center } from './components/Center/index.js';
+export { Box } from './components/Box/index.js';
+export { default as SafeArea } from './components/SafeArea/SafeArea.svelte';
+export { BottomSheet, BottomSheetHeader, BottomSheetBody } from './components/BottomSheet/index.js';
+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, 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

@@ -16,6 +16,10 @@ export { default as CheckboxGroup } from './components/Checkbox/CheckboxGroup.sv
 export { default as Radio } from './components/Radio/Radio.svelte';
 export { default as RadioGroup } from './components/Radio/RadioGroup.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
+export { SearchInput } from './components/SearchInput/index.js';
+export { DatePicker } from './components/DatePicker/index.js';
+export { FileUpload } from './components/FileUpload/index.js';
+export { OTPInput } from './components/OTPInput/index.js';
 // Navigation Components
 export { default as Tabs } from './components/Tabs/Tabs.svelte';
 export { default as TabList } from './components/Tabs/TabList.svelte';
@@ -39,3 +43,40 @@ export { default as NavItem } from './components/Navbar/NavItem.svelte';
 export { default as Sidebar } from './components/Sidebar/Sidebar.svelte';
 export { default as SidebarItem } from './components/Sidebar/SidebarItem.svelte';
 export { default as SidebarGroup } from './components/Sidebar/SidebarGroup.svelte';
+export { Stepper, StepperStep } from './components/Stepper/index.js';
+// Feedback Components
+export { default as Alert } from './components/Alert/Alert.svelte';
+export { Toast, ToastContainer, toast } from './components/Toast/index.js';
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal/index.js';
+export { ProgressBar, ProgressCircle, Spinner } from './components/Progress/index.js';
+export { Tooltip } from './components/Tooltip/index.js';
+export { Popover, PopoverTrigger, PopoverContent } from './components/Popover/index.js';
+export { Skeleton } from './components/Skeleton/index.js';
+// Data Display Components
+export { Card, CardHeader, CardBody, CardFooter } 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 { List, ListItem } from './components/List/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';
+// Layout Components
+export { Container } from './components/Container/index.js';
+export { Grid } from './components/Grid/index.js';
+export { GridItem } from './components/Grid/index.js';
+export { Stack } from './components/Stack/index.js';
+export { Divider } from './components/Divider/index.js';
+export { Spacer } from './components/Spacer/index.js';
+export { AspectRatio } from './components/AspectRatio/index.js';
+export { Center } from './components/Center/index.js';
+export { Box } from './components/Box/index.js';
+// Mobile Components
+export { default as SafeArea } from './components/SafeArea/SafeArea.svelte';
+export { BottomSheet, BottomSheetHeader, BottomSheetBody } from './components/BottomSheet/index.js';
+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';