@dryui/ui 0.2.1 → 0.3.0

package/dist/accordion/accordion-trigger.svelte

@@ -26,7 +26,15 @@
 	{...rest}
 >
 	{@render children()}
-	<svg data-indicator xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+	<svg
+		data-indicator
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
+	>
 </button>
 
 <style>

package/dist/accordion/index.d.ts

@@ -1,16 +1,30 @@
-export type {
-	AccordionRootProps,
-	AccordionItemProps,
-	AccordionTriggerProps,
-	AccordionContentProps
-} from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface AccordionRootProps extends HTMLAttributes<HTMLDivElement> {
+    type?: 'single' | 'multiple';
+    value?: string[];
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
+}
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+    children: Snippet;
+}
+export interface AccordionTriggerProps extends HTMLButtonAttributes {
+    children: Snippet;
+}
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
 import AccordionRoot from './accordion-root.svelte';
 import AccordionItem from './accordion-item.svelte';
 import AccordionTrigger from './accordion-trigger.svelte';
 import AccordionContent from './accordion-content.svelte';
 export declare const Accordion: {
-	Root: typeof AccordionRoot;
-	Item: typeof AccordionItem;
-	Trigger: typeof AccordionTrigger;
-	Content: typeof AccordionContent;
+    Root: typeof AccordionRoot;
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
 };

package/dist/adjust/adjust.svelte

@@ -54,7 +54,7 @@
 	}
 </script>
 
-<div data-adjust class={className} use:applyStyles {...rest}>
+<div {@attach applyStyles} data-adjust class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/adjust/index.d.ts

@@ -3,15 +3,15 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { BlendMode } from '@dryui/primitives/adjust';
 export type { BlendMode };
 export interface AdjustProps extends HTMLAttributes<HTMLDivElement> {
-	brightness?: number;
-	contrast?: number;
-	saturate?: number;
-	hueRotate?: number;
-	grayscale?: number;
-	sepia?: number;
-	invert?: number;
-	blur?: number;
-	blendMode?: BlendMode;
-	children: Snippet;
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    hueRotate?: number;
+    grayscale?: number;
+    sepia?: number;
+    invert?: number;
+    blur?: number;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
 export { default as Adjust } from './adjust.svelte';

package/dist/alert/index.d.ts

@@ -1,20 +1,14 @@
-export type {
-	AlertVariant,
-	AlertRootProps,
-	AlertIconProps,
-	AlertTitleProps,
-	AlertDescriptionProps,
-	AlertCloseProps
-} from '@dryui/primitives';
+export type { AlertVariant } from './context.svelte.js';
+export type { AlertRootProps, AlertIconProps, AlertTitleProps, AlertDescriptionProps, AlertCloseProps } from '@dryui/primitives';
 import AlertRoot from './alert-root.svelte';
 import AlertIcon from './alert-icon.svelte';
 import AlertTitle from './alert-title.svelte';
 import AlertDescription from './alert-description.svelte';
 import AlertClose from './alert-close.svelte';
 export declare const Alert: {
-	Root: typeof AlertRoot;
-	Icon: typeof AlertIcon;
-	Title: typeof AlertTitle;
-	Description: typeof AlertDescription;
-	Close: typeof AlertClose;
+    Root: typeof AlertRoot;
+    Icon: typeof AlertIcon;
+    Title: typeof AlertTitle;
+    Description: typeof AlertDescription;
+    Close: typeof AlertClose;
 };

package/dist/alert-dialog/index.d.ts

@@ -1,14 +1,4 @@
-export type {
-	AlertDialogRootProps,
-	AlertDialogTriggerProps,
-	AlertDialogContentProps,
-	AlertDialogOverlayProps,
-	AlertDialogHeaderProps,
-	AlertDialogBodyProps,
-	AlertDialogFooterProps,
-	AlertDialogActionProps,
-	AlertDialogCancelProps
-} from '@dryui/primitives';
+export type { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogContentProps, AlertDialogOverlayProps, AlertDialogHeaderProps, AlertDialogBodyProps, AlertDialogFooterProps, AlertDialogActionProps, AlertDialogCancelProps } from '@dryui/primitives';
 import AlertDialogRoot from './alert-dialog-root.svelte';
 import AlertDialogTrigger from './alert-dialog-trigger.svelte';
 import AlertDialogContent from './alert-dialog-content.svelte';
@@ -19,13 +9,13 @@ import AlertDialogFooter from './alert-dialog-footer.svelte';
 import AlertDialogAction from './alert-dialog-action.svelte';
 import AlertDialogCancel from './alert-dialog-cancel.svelte';
 export declare const AlertDialog: {
-	Root: typeof AlertDialogRoot;
-	Trigger: typeof AlertDialogTrigger;
-	Content: typeof AlertDialogContent;
-	Overlay: typeof AlertDialogOverlay;
-	Header: typeof AlertDialogHeader;
-	Body: typeof AlertDialogBody;
-	Footer: typeof AlertDialogFooter;
-	Action: typeof AlertDialogAction;
-	Cancel: typeof AlertDialogCancel;
+    Root: typeof AlertDialogRoot;
+    Trigger: typeof AlertDialogTrigger;
+    Content: typeof AlertDialogContent;
+    Overlay: typeof AlertDialogOverlay;
+    Header: typeof AlertDialogHeader;
+    Body: typeof AlertDialogBody;
+    Footer: typeof AlertDialogFooter;
+    Action: typeof AlertDialogAction;
+    Cancel: typeof AlertDialogCancel;
 };

package/dist/alpha-slider/index.d.ts

@@ -1,9 +1,9 @@
 export interface AlphaSliderProps {
-	value?: number;
-	color?: string;
-	min?: number;
-	max?: number;
-	step?: number;
-	onchange?: (value: number) => void;
+    value?: number;
+    color?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    onchange?: (value: number) => void;
 }
 export { default as AlphaSlider } from './alpha-slider.svelte';

package/dist/aspect-ratio/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
-	ratio?: number;
-	children: Snippet;
+    ratio?: number;
+    children: Snippet;
 }
 export { default as AspectRatio } from './aspect-ratio.svelte';

package/dist/aurora/aurora.svelte

@@ -7,6 +7,7 @@
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 		speed?: 'slow' | 'normal' | 'fast' | number;
+		motion?: 'auto' | 'never';
 		intensity?: number;
 		waviness?: number;
 		colorSpace?: 'srgb' | 'oklch' | 'oklab';
@@ -18,6 +19,7 @@
 	let {
 		palette = 'cosmic',
 		speed = 'normal',
+		motion = 'auto',
 		intensity = 80,
 		waviness = 50,
 		colorSpace = 'srgb',
@@ -29,8 +31,19 @@
 		...rest
 	}: Props = $props();
 
+	let rootNode = $state<HTMLElement | null>(null);
 	let prefersReducedMotion = $state(false);
-	let animated = $state(false);
+	let supportsAnimation = $state(false);
+	let documentVisible = $state(true);
+	let inViewport = $state(true);
+	let animated = $derived.by(
+		() =>
+			motion !== 'never' &&
+			supportsAnimation &&
+			!prefersReducedMotion &&
+			documentVisible &&
+			inViewport
+	);
 
 	const speedDuration = $derived.by(() => {
 		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
@@ -51,6 +64,8 @@
 			observeReducedMotionPreference,
 			getReducedMotionPreference
 		} = await_motion();
+
+		supportsAnimation = supportsPropertyRegistration();
 		registerPropertyOnce({
 			name: '--dry-aurora-angle',
 			syntax: '<angle>',
@@ -64,20 +79,38 @@
 			initialValue: '0%'
 		});
 
+		documentVisible = document.visibilityState === 'visible';
+		const handleVisibilityChange = () => {
+			documentVisible = document.visibilityState === 'visible';
+		};
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
 		const updateAnimatedState = (matches: boolean) => {
 			prefersReducedMotion = matches;
-			animated = !matches && supportsPropertyRegistration();
 		};
-
 		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
+		let stopViewportObserver = () => {};
+
+		if (rootNode && 'IntersectionObserver' in window) {
+			const observer = new IntersectionObserver(
+				([entry]) => {
+					inViewport = entry?.isIntersecting ?? true;
+				},
+				{ threshold: 0.12 }
+			);
+			observer.observe(rootNode);
+			stopViewportObserver = () => observer.disconnect();
+		}
 
-		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
-			animated = false;
-			return stopMotionObserver;
+		if (!supportsAnimation || getReducedMotionPreference()) {
+			inViewport = true;
 		}
 
-		animated = true;
-		return stopMotionObserver;
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+			stopMotionObserver();
+			stopViewportObserver();
+		};
 	});
 
 	function await_motion() {
@@ -130,6 +163,15 @@
 		});
 	}
 
+	function captureRoot(node: HTMLElement) {
+		rootNode = node;
+		return () => {
+			if (rootNode === node) {
+				rootNode = null;
+			}
+		};
+	}
+
 	function applyBackdropStyles(node: HTMLElement) {
 		$effect(() => {
 			if (blendMode) node.style.setProperty('--_aurora-backdrop-blend', blendMode);
@@ -142,6 +184,8 @@
 </script>
 
 <div
+	{@attach captureRoot}
+	{@attach applyRootStyles}
 	data-aurora
 	class={className}
 	data-palette={paletteName}
@@ -149,9 +193,8 @@
 	data-reduced-motion={prefersReducedMotion || undefined}
 	data-color-space={colorSpace}
 	{...rest}
-	use:applyRootStyles
 >
-	<div data-aurora-backdrop aria-hidden="true" use:applyBackdropStyles>
+	<div {@attach applyBackdropStyles} data-aurora-backdrop aria-hidden="true">
 		<span data-aurora-layer data-layer="one"></span>
 		<span data-aurora-layer data-layer="two"></span>
 		<span data-aurora-layer data-layer="three"></span>
@@ -235,7 +278,6 @@
 		transform: translate3d(var(--dry-aurora-shift), 0, 0) rotate(var(--dry-aurora-angle));
 		transform-origin: center;
 		mix-blend-mode: screen;
-		will-change: transform, opacity;
 	}
 
 	[data-aurora-layer][data-layer='one'] {
@@ -259,6 +301,10 @@
 		filter: blur(calc(52px * (0.5 + var(--dry-aurora-waviness, 50) / 100)));
 	}
 
+	[data-aurora][data-animated] [data-aurora-layer] {
+		will-change: transform, opacity;
+	}
+
 	[data-aurora][data-animated] [data-aurora-layer][data-layer='one'] {
 		animation: aurora-one var(--dry-aurora-duration) var(--dry-ease-spring-soft) infinite alternate;
 	}
@@ -295,6 +341,7 @@
 	}
 
 	[data-aurora][data-animated] [data-aurora-backdrop]::after {
+		will-change: opacity, transform;
 		animation: aurora-glow calc(var(--dry-aurora-duration) * 1.8) ease-in-out infinite alternate;
 	}
 

package/dist/aurora/aurora.svelte.d.ts

@@ -4,6 +4,7 @@ import type { BlendMode } from '@dryui/primitives/aurora';
 interface Props extends HTMLAttributes<HTMLDivElement> {
 	palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 	speed?: 'slow' | 'normal' | 'fast' | number;
+	motion?: 'auto' | 'never';
 	intensity?: number;
 	waviness?: number;
 	colorSpace?: 'srgb' | 'oklch' | 'oklab';

package/dist/aurora/index.d.ts

@@ -5,15 +5,17 @@ export type { BlendMode };
 export type AuroraNamedPalette = 'sunrise' | 'ocean' | 'forest' | 'cosmic';
 export type AuroraPalette = AuroraNamedPalette | readonly [string, string, string];
 export type AuroraSpeed = 'slow' | 'normal' | 'fast' | number;
+export type AuroraMotion = 'auto' | 'never';
 export type AuroraColorSpace = 'srgb' | 'oklch' | 'oklab';
 export interface AuroraProps extends HTMLAttributes<HTMLDivElement> {
-	palette?: AuroraPalette;
-	speed?: AuroraSpeed;
-	intensity?: number;
-	waviness?: number;
-	colorSpace?: AuroraColorSpace;
-	blendMode?: BlendMode;
-	layerOpacity?: number;
-	children?: Snippet;
+    palette?: AuroraPalette;
+    speed?: AuroraSpeed;
+    motion?: AuroraMotion;
+    intensity?: number;
+    waviness?: number;
+    colorSpace?: AuroraColorSpace;
+    blendMode?: BlendMode;
+    layerOpacity?: number;
+    children?: Snippet;
 }
 export { default as Aurora } from './aurora.svelte';

package/dist/avatar/index.d.ts

@@ -1,6 +1,13 @@
-import type { AvatarProps as PrimitiveAvatarProps } from '@dryui/primitives';
-export interface AvatarProps extends PrimitiveAvatarProps {
-	size?: 'sm' | 'md' | 'lg';
-	shape?: 'circle' | 'square';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'circle' | 'square';
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    badge?: Snippet;
+    children?: Snippet | undefined;
 }
 export { default as Avatar } from './avatar.svelte';

package/dist/badge/index.d.ts

@@ -2,8 +2,8 @@ import type { BadgeProps as PrimitiveBadgeProps } from '@dryui/primitives';
 import type { AliasableColor } from '../internal/color-aliases.js';
 export type BadgeColor = AliasableColor;
 export interface BadgeProps extends PrimitiveBadgeProps {
-	variant?: 'solid' | 'outline' | 'soft' | 'dot';
-	color?: BadgeColor;
-	size?: 'sm' | 'md';
+    variant?: 'solid' | 'outline' | 'soft' | 'dot';
+    color?: BadgeColor;
+    size?: 'sm' | 'md';
 }
 export { default as Badge } from './badge.svelte';

package/dist/beam/index.d.ts

@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { BlendMode } from '@dryui/primitives/beam';
 export type { BlendMode };
 export interface BeamProps extends HTMLAttributes<HTMLDivElement> {
-	color?: string;
-	width?: number;
-	angle?: number;
-	speed?: number;
-	intensity?: number;
-	blendMode?: BlendMode;
-	children?: Snippet;
+    color?: string;
+    width?: number;
+    angle?: number;
+    speed?: number;
+    intensity?: number;
+    blendMode?: BlendMode;
+    children?: Snippet;
 }
 export { default as Beam } from './beam.svelte';

package/dist/breadcrumb/index.d.ts

@@ -1,19 +1,31 @@
-export type {
-	BreadcrumbRootProps,
-	BreadcrumbListProps,
-	BreadcrumbItemProps,
-	BreadcrumbLinkProps,
-	BreadcrumbSeparatorProps
-} from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+export interface BreadcrumbRootProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+}
+export interface BreadcrumbListProps extends HTMLAttributes<HTMLOListElement> {
+    children: Snippet;
+}
+export interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
+    children: Snippet;
+}
+export interface BreadcrumbLinkProps extends HTMLAnchorAttributes {
+    href?: string;
+    current?: boolean;
+    children: Snippet;
+}
+export interface BreadcrumbSeparatorProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
+    children?: Snippet | undefined;
+}
 import BreadcrumbRoot from './breadcrumb-root.svelte';
 import BreadcrumbList from './breadcrumb-list.svelte';
 import BreadcrumbItem from './breadcrumb-item.svelte';
 import BreadcrumbLink from './breadcrumb-link.svelte';
 import BreadcrumbSeparator from './breadcrumb-separator.svelte';
 export declare const Breadcrumb: {
-	Root: typeof BreadcrumbRoot;
-	List: typeof BreadcrumbList;
-	Item: typeof BreadcrumbItem;
-	Link: typeof BreadcrumbLink;
-	Separator: typeof BreadcrumbSeparator;
+    Root: typeof BreadcrumbRoot;
+    List: typeof BreadcrumbList;
+    Item: typeof BreadcrumbItem;
+    Link: typeof BreadcrumbLink;
+    Separator: typeof BreadcrumbSeparator;
 };

package/dist/button/button.svelte

@@ -50,7 +50,11 @@
 	}
 </script>
 
-<span class="wrapper" data-in-group={groupCtx ? '' : undefined} data-group-orientation={groupCtx?.orientation}>
+<span
+	class="wrapper"
+	data-in-group={groupCtx ? '' : undefined}
+	data-group-orientation={groupCtx?.orientation}
+>
 	{#if href !== undefined}
 		<a
 			{...rest as AnchorRest}

package/dist/button/index.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonProps as PrimitiveButtonProps } from '@dryui/primitives';
 export interface ButtonProps extends PrimitiveButtonProps {
-	variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
-	size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
-	color?: 'primary' | 'danger';
+    variant?: 'solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link' | 'bare';
+    size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+    color?: 'primary' | 'danger';
 }
 export { default as Button } from './button.svelte';

package/dist/button-group/index.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonGroupProps as PrimitiveButtonGroupProps } from '@dryui/primitives';
 export interface ButtonGroupProps extends PrimitiveButtonGroupProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export { default as ButtonGroup } from './button-group.svelte';

package/dist/calendar/index.d.ts

@@ -1,11 +1,4 @@
-export type {
-	CalendarRootProps,
-	CalendarHeaderProps,
-	CalendarGridProps,
-	CalendarPrevProps,
-	CalendarNextProps,
-	CalendarHeadingProps
-} from '@dryui/primitives';
+export type { CalendarRootProps, CalendarHeaderProps, CalendarGridProps, CalendarPrevProps, CalendarNextProps, CalendarHeadingProps } from '@dryui/primitives';
 import CalendarRoot from './calendar-root.svelte';
 import CalendarHeader from './calendar-header.svelte';
 import CalendarGrid from './calendar-grid.svelte';
@@ -13,10 +6,10 @@ import CalendarPrev from './calendar-prev.svelte';
 import CalendarNext from './calendar-next.svelte';
 import CalendarHeading from './calendar-heading.svelte';
 export declare const Calendar: {
-	Root: typeof CalendarRoot;
-	Header: typeof CalendarHeader;
-	Grid: typeof CalendarGrid;
-	Prev: typeof CalendarPrev;
-	Next: typeof CalendarNext;
-	Heading: typeof CalendarHeading;
+    Root: typeof CalendarRoot;
+    Header: typeof CalendarHeader;
+    Grid: typeof CalendarGrid;
+    Prev: typeof CalendarPrev;
+    Next: typeof CalendarNext;
+    Heading: typeof CalendarHeading;
 };

package/dist/card/index.d.ts

@@ -1,31 +1,31 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface CardRootProps extends HTMLAttributes<HTMLElement> {
-	as?: 'div' | 'a' | 'button';
-	selected?: boolean;
-	disabled?: boolean;
-	orientation?: 'vertical' | 'horizontal';
-	variant?: 'default' | 'elevated' | 'interactive';
-	size?: 'default' | 'sm';
-	children: Snippet;
+    as?: 'div' | 'a' | 'button';
+    selected?: boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    variant?: 'default' | 'elevated' | 'interactive';
+    size?: 'default' | 'sm';
+    children: Snippet;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
-	noPadding?: boolean;
+    children: Snippet;
+    noPadding?: boolean;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
 import CardRoot from './card-root.svelte';
 import CardHeader from './card-header.svelte';
 import CardContent from './card-content.svelte';
 import CardFooter from './card-footer.svelte';
 export declare const Card: {
-	Root: typeof CardRoot;
-	Header: typeof CardHeader;
-	Content: typeof CardContent;
-	Footer: typeof CardFooter;
+    Root: typeof CardRoot;
+    Header: typeof CardHeader;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
 };

package/dist/carousel/index.d.ts

@@ -1,12 +1,4 @@
-export type {
-	CarouselRootProps,
-	CarouselViewportProps,
-	CarouselSlideProps,
-	CarouselPrevProps,
-	CarouselNextProps,
-	CarouselDotsProps,
-	CarouselThumbnailsProps
-} from '@dryui/primitives';
+export type { CarouselRootProps, CarouselViewportProps, CarouselSlideProps, CarouselPrevProps, CarouselNextProps, CarouselDotsProps, CarouselThumbnailsProps } from '@dryui/primitives';
 import CarouselRoot from './carousel-root.svelte';
 import CarouselViewport from './carousel-viewport.svelte';
 import CarouselSlide from './carousel-slide.svelte';
@@ -15,11 +7,11 @@ import CarouselNext from './carousel-next.svelte';
 import CarouselDots from './carousel-dots.svelte';
 import CarouselThumbnails from './carousel-thumbnails.svelte';
 export declare const Carousel: {
-	Root: typeof CarouselRoot;
-	Viewport: typeof CarouselViewport;
-	Slide: typeof CarouselSlide;
-	Prev: typeof CarouselPrev;
-	Next: typeof CarouselNext;
-	Dots: typeof CarouselDots;
-	Thumbnails: typeof CarouselThumbnails;
+    Root: typeof CarouselRoot;
+    Viewport: typeof CarouselViewport;
+    Slide: typeof CarouselSlide;
+    Prev: typeof CarouselPrev;
+    Next: typeof CarouselNext;
+    Dots: typeof CarouselDots;
+    Thumbnails: typeof CarouselThumbnails;
 };