@saasflare/ui 3.2.0 → 3.3.0

package/dist/index.d.ts

@@ -324,6 +324,32 @@ declare function useInterval(callback: () => void, delay: number | null, options
  */
 declare function useFocusTrap<T extends HTMLElement = HTMLElement>(active: boolean): (node: T | null) => void;
 
+/** Return value of the useCountdown hook. */
+interface CountdownValue {
+    /** Days remaining. */
+    days: number;
+    /** Hours remaining (0–23). */
+    hours: number;
+    /** Minutes remaining (0–59). */
+    minutes: number;
+    /** Seconds remaining (0–59). */
+    seconds: number;
+    /** Total milliseconds remaining. */
+    totalMs: number;
+    /** Whether the target date has passed. */
+    isExpired: boolean;
+}
+/**
+ * Returns a live countdown to a target date, updating every second.
+ *
+ * @param {Date | string | number} target - The target date/time
+ * @returns {CountdownValue} The current countdown values
+ *
+ * @example
+ * const { days, hours, minutes, seconds } = useCountdown('2026-12-31T00:00:00');
+ */
+declare function useCountdown(target: Date | string | number): CountdownValue;
+
 /** Options for {@link useFileDialog}. */
 interface UseFileDialogOptions {
     /** MIME types or extensions to filter (matches `<input accept>`). */
@@ -369,7 +395,7 @@ declare function useFileDialog(options?: UseFileDialogOptions): UseFileDialogRet
  *   Use `useReducedMotion()` to disable springs when the user prefers reduced motion.
  *
  * @example
- * import { spring, useReducedMotion } from "@saasflare/core";
+ * import { spring, useReducedMotion } from "@saasflare/ui";
  * const reduced = useReducedMotion();
  * <motion.div transition={reduced ? { duration: 0 } : spring} />
  */
@@ -2400,6 +2426,1109 @@ interface AuroraBackgroundProps extends Omit<ComponentProps<"div">, keyof Saasfl
  */
 declare function AuroraBackground({ colors, intensity, className, children, surface, radius, animated, ...props }: AuroraBackgroundProps): react_jsx_runtime.JSX.Element;
 
+/** Props for the AudioPlayer component. */
+interface AudioPlayerProps extends SaasflareComponentProps {
+    /** Audio source URL. */
+    src: string;
+    /** Track title. */
+    title?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Styled audio player with play/pause, seek, and time display.
+ *
+ * @component
+ * @package ui
+ */
+declare function AudioPlayer({ src, title, className, surface, radius, animated, }: AudioPlayerProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the BentoGrid container. */
+interface BentoGridProps {
+    /** Grid items. */
+    children: ReactNode;
+    /** Number of columns at md+ breakpoint. Default: `3` */
+    columns?: 2 | 3 | 4;
+    /** Gap between items in Tailwind spacing units (4 = 1rem). Default: `4` */
+    gap?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Responsive bento-style grid container with staggered item entrance.
+ *
+ * - Items animate in with a staggered fade+slide
+ * - Supports 2, 3, or 4 column layouts (1 column on mobile)
+ * - Items can span multiple columns/rows via BentoGridItem
+ *
+ * @component
+ * @package ui
+ */
+declare function BentoGrid({ children, columns, gap, className, }: BentoGridProps): react_jsx_runtime.JSX.Element;
+/** Props for a BentoGridItem. */
+interface BentoGridItemProps extends SaasflareComponentProps {
+    /** Item content. */
+    children: ReactNode;
+    /** Number of columns to span (1–4). Default: `1` */
+    colSpan?: 1 | 2 | 3 | 4;
+    /** Number of rows to span (1–3). Default: `1` */
+    rowSpan?: 1 | 2 | 3;
+    /** Stagger delay index (multiply by 0.08 for delay). Default: `0` */
+    index?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Individual item within a BentoGrid.
+ *
+ * - Supports column and row spanning
+ * - Animates in with a staggered fade + vertical slide
+ * - Pass `index` for stagger ordering
+ *
+ * @component
+ * @package ui
+ */
+declare function BentoGridItem({ children, colSpan, rowSpan, index, className, surface, radius, animated, }: BentoGridItemProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the BlurFade component. */
+interface BlurFadeProps {
+    /** Content to animate. */
+    children: ReactNode;
+    /** Animation delay in seconds (use for staggering). Default: `0` */
+    delay?: number;
+    /** Initial blur amount in pixels. Default: `8` */
+    blur?: number;
+    /** Vertical offset in pixels. Default: `12` */
+    yOffset?: number;
+    /** Animation duration in seconds. Default: `0.5` */
+    duration?: number;
+    /** Whether animation triggers only once. Default: `true` */
+    once?: boolean;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Entrance animation that combines blur, opacity, and vertical slide.
+ *
+ * - Great for staggered reveals: pass incrementing `delay` values
+ * - Blur clears simultaneously with the fade for a cohesive effect
+ * - Renders children statically when reduced motion is preferred
+ * - Uses Intersection Observer to trigger on viewport entry
+ *
+ * @component
+ * @package ui
+ */
+declare function BlurFade({ children, delay, blur, yOffset, duration, once, className, }: BlurFadeProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the BorderBeam component. */
+interface BorderBeamProps {
+    /** Beam color. Default: `"hsl(var(--primary))"` */
+    color?: string;
+    /** Tail fade color. Default: `"transparent"` */
+    colorFrom?: string;
+    /** Animation cycle duration in seconds. Default: `6` */
+    duration?: number;
+    /** Beam length in pixels. Default: `150` */
+    size?: number;
+    /** Border radius to follow (CSS value). Default: `"inherit"` */
+    borderRadius?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Glowing beam that orbits the border of its parent container.
+ *
+ * - Place inside a `position: relative; overflow: hidden` parent
+ * - CSS-only animation (no JS animation loop)
+ * - Renders nothing when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function BorderBeam({ color, colorFrom, duration, size, borderRadius, className, }: BorderBeamProps): react_jsx_runtime.JSX.Element | null;
+
+/** Props for the Compare component. */
+interface CompareProps {
+    /** Content shown on the left (before) side. */
+    before: ReactNode;
+    /** Content shown on the right (after) side. */
+    after: ReactNode;
+    /** Label for the before side. */
+    beforeLabel?: string;
+    /** Label for the after side. */
+    afterLabel?: string;
+    /** Initial divider position as percentage (0–100). Default: `50` */
+    initialPosition?: number;
+    /** CSS aspect-ratio for the container. Default: `"16/9"` */
+    aspectRatio?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Draggable before/after comparison slider.
+ *
+ * - Pointer-based dragging (works on mouse and touch)
+ * - Optional before/after labels
+ * - Content is clipped, not resized
+ * - Fully accessible with keyboard support
+ *
+ * @component
+ * @package ui
+ */
+declare function Compare({ before, after, beforeLabel, afterLabel, initialPosition, aspectRatio, className, }: CompareProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Confetti component. */
+interface ConfettiProps {
+    /** Whether the confetti burst is active. */
+    active: boolean;
+    /** Number of confetti particles. Default: `40` */
+    count?: number;
+    /** Array of CSS colors for particles. */
+    colors?: string[];
+    /** Duration in milliseconds before auto-cleanup. Default: `3000` */
+    duration?: number;
+    /** Callback when animation completes. */
+    onComplete?: () => void;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Confetti burst animation overlay.
+ *
+ * - CSS-only particles with randomized trajectories
+ * - Fires once when `active` becomes `true`
+ * - Calls `onComplete` when the animation finishes
+ * - Renders nothing when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function Confetti({ active, count, colors, duration, onComplete, className, }: ConfettiProps): react_jsx_runtime.JSX.Element | null;
+
+/** Props for the Countdown component. */
+interface CountdownProps {
+    /** Number of days remaining. */
+    days: number;
+    /** Number of hours remaining (0–23). */
+    hours: number;
+    /** Number of minutes remaining (0–59). */
+    minutes: number;
+    /** Number of seconds remaining (0–59). */
+    seconds: number;
+    /** Show the labels below each box. Default: `true` */
+    showLabels?: boolean;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Countdown display with segmented boxes for each time unit.
+ *
+ * @component
+ * @package ui
+ */
+declare function Countdown({ days, hours, minutes, seconds, showLabels, className, }: CountdownProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the SafariMock component. */
+interface SafariMockProps {
+    /** Content to display inside the browser frame. */
+    children: ReactNode;
+    /** URL text shown in the address bar. Default: `"https://example.com"` */
+    url?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Safari-style browser frame for wrapping screenshots.
+ *
+ * - CSS-only traffic lights (red/yellow/green dots)
+ * - Address bar with optional URL text
+ * - Rounded corners matching macOS window chrome
+ *
+ * @component
+ * @package ui
+ */
+declare function SafariMock({ children, url, className, }: SafariMockProps): react_jsx_runtime.JSX.Element;
+/** Props for the IPhoneMock component. */
+interface IPhoneMockProps {
+    /** Content to display inside the phone frame. */
+    children: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * iPhone-style device frame for wrapping mobile screenshots.
+ *
+ * - CSS-only frame with rounded corners and notch
+ * - Status bar with time and signal indicators
+ * - Aspect ratio matches iPhone 15 Pro proportions
+ *
+ * @component
+ * @package ui
+ */
+declare function IPhoneMock({ children, className, }: IPhoneMockProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Dock container. */
+interface DockProps extends SaasflareComponentProps {
+    /** Dock items. */
+    children: ReactNode;
+    /** Maximum scale factor for magnified items. Default: `1.5` */
+    magnification?: number;
+    /** Mouse proximity distance in pixels that triggers magnification. Default: `100` */
+    distance?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Horizontal dock bar with proximity-based item magnification.
+ *
+ * - Items scale up as the mouse approaches them
+ * - Uses spring physics for smooth, elastic scaling
+ * - Falls back to a static icon bar when reduced motion is preferred
+ * - Tracks mouse X position across the entire dock
+ *
+ * @component
+ * @package ui
+ */
+declare function Dock({ children, magnification, distance, className, surface, radius, animated, }: DockProps): react_jsx_runtime.JSX.Element;
+/** Props for a DockItem. */
+interface DockItemProps {
+    /** Icon or content inside the dock item. */
+    children: ReactNode;
+    /** Tooltip label for the item. */
+    label: string;
+    /** Click handler. */
+    onClick?: () => void;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Individual item within a Dock.
+ *
+ * - Magnifies based on mouse proximity using spring interpolation
+ * - Shows a tooltip label on hover
+ * - Renders at static base size when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function DockItem({ children, label, onClick, className, }: DockItemProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the FeatureCard component. */
+interface FeatureCardProps extends SaasflareComponentProps {
+    /** Icon element displayed at the top. */
+    icon?: ReactNode;
+    /** Feature title. */
+    title: string;
+    /** Feature description text. */
+    description: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Feature card with icon, title, and description.
+ *
+ * @component
+ * @package ui
+ */
+declare function FeatureCard({ icon, title, description, className, surface, radius, animated, }: FeatureCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the FlipWords component. */
+interface FlipWordsProps {
+    /** Array of words to cycle through. */
+    words: string[];
+    /** Cycle interval in milliseconds. Default: `2500` */
+    interval?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Inline word rotator with vertical flip animation.
+ *
+ * - Words flip upward with a spring transition
+ * - Container width matches the longest word to prevent layout shifts
+ * - Falls back to showing the first word statically when reduced motion is preferred
+ * - Renders inline, so it can be placed mid-sentence
+ *
+ * @component
+ * @package ui
+ */
+declare function FlipWords({ words, interval, className, }: FlipWordsProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the GalleryLightbox component. */
+interface GalleryLightboxProps {
+    /** Array of image URLs. */
+    images: string[];
+    /** Whether the lightbox is open. */
+    open: boolean;
+    /** Current image index. */
+    index: number;
+    /** Called when the lightbox should close. */
+    onClose: () => void;
+    /** Called when the index changes. */
+    onIndexChange: (index: number) => void;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Fullscreen image lightbox with keyboard navigation.
+ *
+ * @component
+ * @package ui
+ */
+declare function GalleryLightbox({ images, open, index, onClose, onIndexChange, className, }: GalleryLightboxProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the GlowingEffect component. */
+interface GlowingEffectProps {
+    /** Glow color. Default: `"hsl(var(--primary))"` */
+    color?: string;
+    /** Glow spread diameter in pixels. Default: `150` */
+    spread?: number;
+    /** Blur radius in pixels. Default: `20` */
+    blur?: number;
+    /** Glow opacity (0–1). Default: `0.4` */
+    opacity?: number;
+    /** Border radius to match parent (CSS value). Default: `"inherit"` */
+    borderRadius?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Mouse-following glow effect for container borders.
+ *
+ * - Tracks mouse position and renders a radial gradient at cursor
+ * - Only glows along the border (uses inset mask to hollow out center)
+ * - Fades out when the mouse leaves
+ * - Renders nothing when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function GlowingEffect({ color, spread, blur, opacity, borderRadius, className, }: GlowingEffectProps): react_jsx_runtime.JSX.Element | null;
+
+/** Props for the GradientText component. */
+interface GradientTextProps {
+    /** Text content to apply the gradient to. */
+    children: ReactNode;
+    /** Gradient color stops. Default: primary → chart-1 → chart-2 tokens */
+    colors?: string[];
+    /** Whether to animate the gradient position. Default: `true` */
+    animate?: boolean;
+    /** Animation cycle duration in seconds. Default: `6` */
+    speed?: number;
+    /** Gradient direction in degrees. Default: `90` */
+    angle?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Text with a vibrant gradient fill, optionally animated.
+ *
+ * - Uses `background-clip: text` for the gradient effect
+ * - Animates via CSS `@keyframes` (no JS frames)
+ * - Falls back to primary color when reduced motion is preferred
+ * - Renders as an inline `<span>` to nest inside any heading or paragraph
+ *
+ * @component
+ * @package ui
+ */
+declare function GradientText({ children, colors, animate, speed, angle, className, }: GradientTextProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the HeroVideoDialog component. */
+interface HeroVideoDialogProps {
+    /** Video embed URL (YouTube/Vimeo embed or direct video URL). */
+    videoSrc: string;
+    /** Poster thumbnail image URL. */
+    thumbnailSrc: string;
+    /** Alt text for the thumbnail image. */
+    thumbnailAlt: string;
+    /** CSS aspect-ratio for the thumbnail. Default: `"16/9"` */
+    aspectRatio?: string;
+    /** Additional class names for the container. */
+    className?: string;
+}
+/**
+ * Hero video section with click-to-play dialog.
+ *
+ * - Shows a thumbnail with a centered play button
+ * - Opens a modal dialog with the embedded video on click
+ * - Animated with spring physics (scale + fade)
+ * - Accessible: focus management, keyboard close, aria labels
+ *
+ * @component
+ * @package ui
+ */
+declare function HeroVideoDialog({ videoSrc, thumbnailSrc, thumbnailAlt, aspectRatio, className, }: HeroVideoDialogProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Hotspot container. */
+interface HotspotProps {
+    /** Background content (image, illustration, etc.) plus HotspotMarker children. */
+    children: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Container for positioned hotspot markers.
+ *
+ * @component
+ * @package ui
+ */
+declare function Hotspot({ children, className }: HotspotProps): react_jsx_runtime.JSX.Element;
+/** Props for a HotspotMarker. */
+interface HotspotMarkerProps {
+    /** Horizontal position as percentage (0–100). */
+    x: number;
+    /** Vertical position as percentage (0–100). */
+    y: number;
+    /** Tooltip label text. */
+    label: string;
+    /** Detailed description shown in the tooltip. */
+    description?: string;
+    /** Marker dot color. Default: `"hsl(var(--primary))"` */
+    color?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Pulsing dot marker with hover tooltip at an absolute position.
+ *
+ * @component
+ * @package ui
+ */
+declare function HotspotMarker({ x, y, label, description, color, className, }: HotspotMarkerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @fileoverview Image that swaps to an alternate source on hover.
+ * @author Saasflare™
+ * Crossfades between a primary and alternate image on mouse hover.
+ * @module packages/ui/components/ui/image-swap-hover
+ * @package ui
+ *
+ * @component
+ * @example
+ * import { ImageSwapHover } from '@saasflare/ui';
+ * <ImageSwapHover
+ *   src="/product-front.jpg"
+ *   hoverSrc="/product-back.jpg"
+ *   alt="Product view"
+ * />
+ */
+/** Props for the ImageSwapHover component. */
+interface ImageSwapHoverProps {
+    /** Default image source. */
+    src: string;
+    /** Image source to show on hover. */
+    hoverSrc: string;
+    /** Alt text for both images. */
+    alt: string;
+    /** CSS aspect-ratio. Default: `"1/1"` */
+    aspectRatio?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Image that crossfades to an alternate source on hover.
+ *
+ * @component
+ * @package ui
+ */
+declare function ImageSwapHover({ src, hoverSrc, alt, aspectRatio, className, }: ImageSwapHoverProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Marquee component. */
+interface MarqueeProps {
+    /** Items to scroll infinitely. */
+    children: ReactNode;
+    /** Reverse scroll direction. Default: `false` */
+    reverse?: boolean;
+    /** Scroll duration in seconds for one full cycle. Default: `40` */
+    speed?: number;
+    /** Pause scrolling on hover. Default: `true` */
+    pauseOnHover?: boolean;
+    /** Gap between items in pixels. Default: `48` */
+    gap?: number;
+    /** Number of times to duplicate the content strip. Default: `2` */
+    repeat?: number;
+    /** Enable vertical scrolling instead of horizontal. Default: `false` */
+    vertical?: boolean;
+    /** Additional class names for the container. */
+    className?: string;
+}
+/**
+ * Infinite-scrolling content ticker.
+ *
+ * - Pure CSS animation (no JS frames, no Framer Motion overhead)
+ * - Duplicates children to create a seamless loop
+ * - Pauses on hover for readability (configurable)
+ * - Falls back to static flex row when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function Marquee({ children, reverse, speed, pauseOnHover, gap, repeat, vertical, className, }: MarqueeProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the MouseGradientBlob component. */
+interface MouseGradientBlobProps {
+    /** Diameter of the blob in pixels. Default: `500` */
+    size?: number;
+    /** Gradient color stops. Default: primary + chart-2 tokens */
+    colors?: [string, string];
+    /** Opacity of the blob (0–1). Default: `0.15` */
+    opacity?: number;
+    /** Blur radius in pixels. Default: `80` */
+    blur?: number;
+    /** Additional class names for the container */
+    className?: string;
+}
+/**
+ * Ambient gradient blob that follows the mouse.
+ *
+ * - Uses spring physics for smooth, organic motion
+ * - Fades out when the mouse leaves the container
+ * - Renders nothing when reduced motion is preferred
+ * - Uses `pointer-events: none` so it never blocks interaction
+ *
+ * @component
+ * @package ui
+ */
+declare function MouseGradientBlob({ size, colors, opacity, blur, className, }: MouseGradientBlobProps): react_jsx_runtime.JSX.Element | null;
+
+/** Props for the MovingBorder component. */
+interface MovingBorderProps {
+    /** Content inside the border. */
+    children: ReactNode;
+    /** Gradient colors for the rotating border. */
+    colors?: string[];
+    /** Rotation cycle duration in seconds. Default: `6` */
+    duration?: number;
+    /** Border width in pixels. Default: `1.5` */
+    borderWidth?: number;
+    /** Border radius (CSS value). Default: `"0.75rem"` */
+    borderRadius?: string;
+    /** Additional class names for the outer wrapper. */
+    className?: string;
+}
+/**
+ * Wrapper with a continuously rotating gradient border.
+ *
+ * - Uses a conic-gradient that rotates via CSS animation
+ * - Inner content sits on top with a solid background
+ * - Renders a static border when reduced motion is preferred
+ * - Works on any element (buttons, cards, containers)
+ *
+ * @component
+ * @package ui
+ */
+declare function MovingBorder({ children, colors, duration, borderWidth, borderRadius, className, }: MovingBorderProps): react_jsx_runtime.JSX.Element;
+
+/** Animation variant presets for page transitions. */
+declare const VARIANTS: {
+    readonly fade: {
+        readonly initial: {
+            readonly opacity: 0;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+        };
+    };
+    readonly slideUp: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+    };
+    readonly slideDown: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly y: -16;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly y: 0;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly y: 16;
+        };
+    };
+    readonly scale: {
+        readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.96;
+        };
+        readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+        };
+        readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.96;
+        };
+    };
+};
+/** Props for the PageTransition component. */
+interface PageTransitionProps {
+    /** Child content to animate. */
+    children: ReactNode;
+    /** Animation preset. Default: `"fade"` */
+    variant?: keyof typeof VARIANTS;
+    /** Transition duration in seconds. Default: `0.3` */
+    duration?: number;
+    /** Unique key for AnimatePresence (use pathname). Default: none */
+    transitionKey?: string;
+    /** Additional class names for the motion wrapper. */
+    className?: string;
+}
+/**
+ * Page transition wrapper with configurable enter/exit animations.
+ *
+ * - Provides `fade`, `slideUp`, `slideDown`, and `scale` presets
+ * - Renders children directly (no animation) when reduced motion is preferred
+ * - Use `transitionKey` (typically the pathname) to trigger re-animation on route changes
+ *
+ * @component
+ * @package ui
+ */
+declare function PageTransition({ children, variant, duration, transitionKey, className, }: PageTransitionProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the ParallaxSection component. */
+interface ParallaxSectionProps {
+    /** Content to apply parallax to. */
+    children: ReactNode;
+    /** Parallax speed factor. 0 = fixed, 0.5 = half speed, 1 = no parallax. Default: `0.5` */
+    speed?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Section wrapper that applies scroll-based parallax to its children.
+ *
+ * - Children translate vertically based on scroll position and speed factor
+ * - Falls back to static rendering when reduced motion is preferred
+ * - Overflow hidden to prevent content leaking during parallax
+ *
+ * @component
+ * @package ui
+ */
+declare function ParallaxSection({ children, speed, className, }: ParallaxSectionProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the ParticlesBackground component. */
+interface ParticlesBackgroundProps {
+    /** Number of particles. Default: `20` */
+    count?: number;
+    /** CSS color of particles. Default: `"hsl(var(--primary))"` */
+    color?: string;
+    /** Maximum particle diameter in pixels. Default: `4` */
+    maxSize?: number;
+    /** Minimum particle diameter in pixels. Default: `1` */
+    minSize?: number;
+    /** Maximum particle opacity (0–1). Default: `0.3` */
+    maxOpacity?: number;
+    /** Animation speed multiplier. Default: `1` */
+    speed?: number;
+    /** Additional class names for the container. */
+    className?: string;
+}
+/**
+ * Ambient floating particles background.
+ *
+ * - CSS-only animation (no JS animation loop, GPU-composited)
+ * - Deterministic positions (no layout shift between renders)
+ * - Renders nothing when reduced motion is preferred
+ * - Lightweight: no canvas, no WebGL
+ *
+ * @component
+ * @package ui
+ */
+declare function ParticlesBackground({ count, color, maxSize, minSize, maxOpacity, speed, className, }: ParticlesBackgroundProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * @fileoverview Perspective grid background with retro/cyberpunk aesthetic.
+ * @author Saasflare™
+ * A CSS-only perspective grid that fades toward the horizon. Ideal for
+ * hero sections and feature backgrounds.
+ * @module packages/ui/components/ui/retro-grid
+ * @package ui
+ *
+ * @component
+ * @example
+ * import { RetroGrid } from '@saasflare/ui';
+ * <div className="relative min-h-[500px]">
+ *   <RetroGrid />
+ *   <div className="relative z-10">Hero content</div>
+ * </div>
+ *
+ * @example
+ * // Custom grid color and size
+ * <RetroGrid gridColor="hsl(var(--primary))" gridSize={40} angle={70} />
+ */
+/** Props for the RetroGrid component. */
+interface RetroGridProps {
+    /** Grid line color. Default: `"hsl(var(--border))"` */
+    gridColor?: string;
+    /** Grid cell size in pixels. Default: `60` */
+    gridSize?: number;
+    /** Perspective tilt angle in degrees. Default: `65` */
+    angle?: number;
+    /** Grid line opacity (0–1). Default: `0.4` */
+    opacity?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Perspective grid background with vanishing-point effect.
+ *
+ * - CSS-only (repeating linear gradients + perspective transform)
+ * - Fades to transparent at the horizon via mask-image
+ * - No JS, no canvas, no animation — pure visual
+ *
+ * @component
+ * @package ui
+ */
+declare function RetroGrid({ gridColor, gridSize, angle, opacity, className, }: RetroGridProps): react_jsx_runtime.JSX.Element;
+
+/** Direction the element slides in from. */
+type RevealDirection = "up" | "down" | "left" | "right" | "none";
+/** Props for the RevealOnScroll component. */
+interface RevealOnScrollProps {
+    /** Content to reveal. */
+    children: ReactNode;
+    /** Direction the element slides in from. Default: `"up"` */
+    direction?: RevealDirection;
+    /** Animation delay in seconds. Default: `0` */
+    delay?: number;
+    /** Intersection Observer root margin. Default: `"-80px"` */
+    rootMargin?: string;
+    /** Whether the animation triggers only once. Default: `true` */
+    once?: boolean;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Wrapper that animates children into view on scroll intersection.
+ *
+ * - Fades in with an optional directional slide
+ * - Uses a gentle spring for natural motion
+ * - Renders children statically when reduced motion is preferred
+ * - Triggers once by default (configurable via `once`)
+ *
+ * @component
+ * @package ui
+ */
+declare function RevealOnScroll({ children, direction, delay, rootMargin, once, className, }: RevealOnScrollProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the ShimmerButton component. */
+interface ShimmerButtonProps extends ComponentProps<"button"> {
+    /** Button content. */
+    children: ReactNode;
+    /** Color of the shimmer highlight. Default: `"rgba(255,255,255,0.2)"` */
+    shimmerColor?: string;
+    /** Shimmer cycle duration in seconds. Default: `2.5` */
+    speed?: number;
+    /** Background color. Default: `"hsl(var(--primary))"` */
+    background?: string;
+}
+/**
+ * CTA button with a continuously sweeping shimmer effect.
+ *
+ * - Diagonal light sweep loops infinitely
+ * - CSS-only animation (no JS frames)
+ * - Falls back to a static button when reduced motion is preferred
+ * - Inherits standard button props (onClick, disabled, etc.)
+ *
+ * @component
+ * @package ui
+ */
+declare function ShimmerButton({ children, shimmerColor, speed, background, className, ...props }: ShimmerButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Supported social login providers. */
+type SocialProvider$1 = "google" | "apple" | "github" | "microsoft" | "twitter";
+/** Props for the SocialButton component. */
+interface SocialButtonProps extends Omit<ComponentProps<"button">, "children"> {
+    /** Social provider to render. */
+    provider: SocialProvider$1;
+    /** Override the default label text. */
+    label?: string;
+    /** Show only the icon (no text). Default: `false` */
+    iconOnly?: boolean;
+}
+/**
+ * Branded social login button. Visual only — no auth wiring.
+ *
+ * @component
+ * @package ui
+ */
+declare function SocialButton({ provider, label: labelOverride, iconOnly, className, ...props }: SocialButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the SpotlightCard component. */
+interface SpotlightCardProps extends SaasflareComponentProps {
+    /** Card content. */
+    children: ReactNode;
+    /** Spotlight gradient color. Default: `"hsl(var(--primary))"` */
+    spotlightColor?: string;
+    /** Spotlight diameter in pixels. Default: `250` */
+    spotlightSize?: number;
+    /** Spotlight opacity (0–1). Default: `0.08` */
+    spotlightOpacity?: number;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Card with a radial gradient that follows the mouse cursor.
+ *
+ * - Gradient overlay tracks the mouse within the card boundaries
+ * - Fades out when the mouse leaves
+ * - Uses CSS for the gradient (no canvas, no heavy re-renders)
+ * - Falls back to a plain card when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function SpotlightCard({ children, spotlightColor, spotlightSize, spotlightOpacity, className, surface, radius, animated, }: SpotlightCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the StatCard component. */
+interface StatCardProps extends SaasflareComponentProps {
+    /** The stat value (e.g. "10K+", "99.9%", "$2.4M"). */
+    value: string;
+    /** Label describing the stat. */
+    label: string;
+    /** Optional icon displayed above the value. */
+    icon?: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Simple statistic display card for marketing sections.
+ *
+ * @component
+ * @package ui
+ */
+declare function StatCard({ value, label, icon, className, surface, radius, animated, }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Steps container. */
+interface StepsProps {
+    /** Step children. */
+    children: ReactNode;
+    /** Index of the current active step (0-based). Default: `0` */
+    current?: number;
+    /** Layout direction. Default: `"horizontal"` */
+    direction?: "horizontal" | "vertical";
+    /** Additional class names. */
+    className?: string;
+}
+/** Props for an individual Step. */
+interface StepProps {
+    /** Step title text. */
+    title: string;
+    /** Optional description below the title. */
+    description?: string;
+    /** Optional icon to replace the step number. */
+    icon?: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Step sequence indicator with numbered circles and connector lines.
+ *
+ * @component
+ * @package ui
+ */
+declare function Steps({ children, current, direction, className, }: StepsProps): react_jsx_runtime.JSX.Element;
+/**
+ * Individual step within a Steps container.
+ * This component is a data carrier — it renders nothing on its own.
+ *
+ * @component
+ * @package ui
+ */
+declare function Step(_props: StepProps): null;
+
+/** A single item in the sticky scroll reveal. */
+interface StickyScrollItem {
+    /** Section title. */
+    title: string;
+    /** Section description text. */
+    description: string;
+    /** Visual content (image, component, etc.) shown in the right column. */
+    content?: ReactNode;
+}
+/** Props for the StickyScrollReveal component. */
+interface StickyScrollRevealProps {
+    /** Array of scroll items. */
+    items: StickyScrollItem[];
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Split layout with sticky left text and scrolling right content.
+ *
+ * - Left column text stays fixed during scroll
+ * - Right column content transitions between items
+ * - Each item fades in based on scroll position
+ * - Falls back to stacked layout when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function StickyScrollReveal({ items, className, }: StickyScrollRevealProps): react_jsx_runtime.JSX.Element;
+
+/** A social link entry. */
+interface SocialLink {
+    /** Accessible label for the link. */
+    label: string;
+    /** URL to the social profile. */
+    url: string;
+    /** Icon element. */
+    icon: ReactNode;
+}
+/** Props for the TeamCard component. */
+interface TeamCardProps extends SaasflareComponentProps {
+    /** Person's name. */
+    name: string;
+    /** Role or job title. */
+    role: string;
+    /** Photo URL. */
+    photo?: string;
+    /** Short bio text. */
+    bio?: string;
+    /** Social media links. */
+    socials?: SocialLink[];
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Team member card with photo, name, role, and social links.
+ *
+ * @component
+ * @package ui
+ */
+declare function TeamCard({ name, role, photo, bio, socials, className, surface, radius, animated, }: TeamCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the TestimonialCard component. */
+interface TestimonialCardProps extends SaasflareComponentProps {
+    /** The testimonial quote text. */
+    quote: string;
+    /** Name of the person. */
+    name: string;
+    /** Role/title of the person. */
+    role?: string;
+    /** Avatar image URL. */
+    avatar?: string;
+    /** Star rating (1–5). Omit to hide stars. */
+    rating?: 1 | 2 | 3 | 4 | 5;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Testimonial card with avatar, quote, attribution, and optional star rating.
+ *
+ * @component
+ * @package ui
+ */
+declare function TestimonialCard({ quote, name, role, avatar, rating, className, surface, radius, animated, }: TestimonialCardProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the TextGenerateEffect component. */
+interface TextGenerateEffectProps {
+    /** Text string to animate word by word. */
+    text: string;
+    /** Delay between each word in seconds. Default: `0.05` */
+    stagger?: number;
+    /** Duration per word fade-in in seconds. Default: `0.4` */
+    duration?: number;
+    /** Whether animation triggers only once. Default: `true` */
+    once?: boolean;
+    /** HTML element to render. Default: `"p"` */
+    as?: "p" | "h1" | "h2" | "h3" | "h4" | "span";
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Text that reveals word by word with staggered fade-in.
+ *
+ * - Each word fades from transparent to opaque sequentially
+ * - Triggers when the element scrolls into view
+ * - Renders full text immediately when reduced motion is preferred
+ * - Preserves natural text wrapping and spacing
+ *
+ * @component
+ * @package ui
+ */
+declare function TextGenerateEffect({ text, stagger, duration, once, as: Tag, className, }: TextGenerateEffectProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the Timeline container. */
+interface TimelineProps {
+    /** TimelineItem children. */
+    children: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Vertical timeline with a scroll-driven progress beam.
+ *
+ * - Beam fills as the user scrolls through the timeline
+ * - Each item fades in on scroll intersection
+ * - Falls back to a static timeline when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function Timeline({ children, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+/** Props for a TimelineItem. */
+interface TimelineItemProps {
+    /** Item title. */
+    title: string;
+    /** Date or time label. */
+    date?: string;
+    /** Item content/description. */
+    children: ReactNode;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Individual item within a Timeline.
+ *
+ * - Positioned alternating left/right on desktop, left-aligned on mobile
+ * - Dot indicator on the timeline track
+ * - Fades in when scrolled into view
+ *
+ * @component
+ * @package ui
+ */
+declare function TimelineItem({ title, date, children, className, }: TimelineItemProps): react_jsx_runtime.JSX.Element;
+
+/** Props for the TracingBeam component. */
+interface TracingBeamProps {
+    /** Content alongside the beam. */
+    children: ReactNode;
+    /** Beam color. Default: `"hsl(var(--primary))"` */
+    color?: string;
+    /** Track (background line) color. Default: `"hsl(var(--border))"` */
+    trackColor?: string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * Vertical scroll-progress beam alongside content.
+ *
+ * - Fills from top to bottom as the user scrolls
+ * - Renders on the left side with content offset
+ * - Includes a dot indicator at the current scroll position
+ * - Falls back to a simple left border when reduced motion is preferred
+ *
+ * @component
+ * @package ui
+ */
+declare function TracingBeam({ children, color, trackColor, className, }: TracingBeamProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the ScrollToTopButton component.
  *
@@ -2682,4 +3811,4 @@ interface UserAvatarProps {
  */
 declare function UserAvatar({ src, name, initials, size, className }: UserAvatarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AnimatedTooltip, AppleAuthButton, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AspectRatio, AuroraBackground, type AuroraBackgroundProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonProps, Callout, type CalloutIntent, type CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CategoryBar, type CategoryBarProps, type CategoryBarSegment, CheckCircleIcon, CheckIcon, Checkbox, CircleIcon, CircleNotchIcon, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type Density, DirectionProvider, DiscordAuthButton, DotsSixVerticalIcon, DotsThreeIcon, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type DropzoneRejection, type DropzoneRejectionReason, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, FacebookAuthButton, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GitHubAuthButton, GitLabAuthButton, GoogleAuthButton, HoverCard, HoverCardContent, HoverCardTrigger, IconWeight, Icons, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Intent, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LinkedInAuthButton, MagnifyingGlassIcon, type Measurement, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, type MetricCardProps, type MetricTrend, MicrosoftAuthButton, MinusIcon, MonitorIcon, MoonIcon, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, type NotificationCenterProps, type NotificationItem, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, Palette, PauseIcon, PayPalAuthButton, PhosphorIconProps, PlayIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PossibleRef, PricingCard, type PricingCardProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, QuotesIcon, RadioGroup, RadioGroupItem, Radius, RadiusProp, Rating, type RatingProps, type RatingSize, RedditAuthButton, PROVIDERS as SOCIAL_AUTH_PROVIDERS, SaasflareComponentProps, type SaasflareMotion, SaasflareProvider, type SaasflareProviderProps, SaasflareScript, type SaasflareScriptProps, SaasflareShell, type SaasflareShellProps, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, type SearchFieldProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSimpleIcon, SidebarTrigger, type Size, Skeleton, SlackAuthButton, Slider, SmoothScrollProvider, type SmoothScrollProviderProps, SocialAuthButton, type SocialAuthButtonProps, type SocialProvider, SparkChart, type SparkChartProps, type SparkChartVariant, Spinner, StatefulButton, type StatefulButtonProps, StripeAuthButton, StyleVariant, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, type TagInputProps, Textarea, ThemeModeMultiToggle, type ThemeModeMultiToggleAppearance, type ThemeModeMultiToggleProps, ThemeModeToggle, TikTokAuthButton, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipItem, TooltipProvider, TooltipTrigger, TopLoadingBar, type TopLoadingBarProps, Tracker, type TrackerBlock, type TrackerProps, type TreeNode, TreeView, type TreeViewProps, TypewriterText, type UseDisclosureOptions, type UseDisclosureReturn, type UseFileDialogOptions, type UseFileDialogReturn, type UseIntervalOptions, type UseIntervalReturn, type UseLocalStorageOptions, type UseMeasureReturn, type UsePaginationOptions, type UsePaginationReturn, UserAvatar, type UserAvatarProps, WarningIcon, XAuthButton, XCircleIcon, XIcon, badgeVariants, buttonGroupVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useLocalStorage, useMeasure, useMergedRef, usePagination, useReducedMotion, useSaasflareMotion, useSaasflareTheme, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, AnimatedTooltip, AppleAuthButton, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, AspectRatio, AudioPlayer, type AudioPlayerProps, AuroraBackground, type AuroraBackgroundProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, BentoGrid, BentoGridItem, type BentoGridItemProps, type BentoGridProps, BlurFade, type BlurFadeProps, BorderBeam, type BorderBeamProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonProps, Callout, type CalloutIntent, type CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CategoryBar, type CategoryBarProps, type CategoryBarSegment, CheckCircleIcon, CheckIcon, Checkbox, CircleIcon, CircleNotchIcon, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, Compare, type CompareProps, Confetti, type ConfettiProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Countdown, type CountdownProps, type CountdownValue, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type Density, DirectionProvider, DiscordAuthButton, Dock, DockItem, type DockItemProps, type DockProps, DotsSixVerticalIcon, DotsThreeIcon, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, type DropzoneProps, type DropzoneRejection, type DropzoneRejectionReason, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, FacebookAuthButton, FeatureCard, type FeatureCardProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FlipWords, type FlipWordsProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GalleryLightbox, type GalleryLightboxProps, GitHubAuthButton, GitLabAuthButton, GlowingEffect, type GlowingEffectProps, GoogleAuthButton, GradientText, type GradientTextProps, HeroVideoDialog, type HeroVideoDialogProps, Hotspot, HotspotMarker, type HotspotMarkerProps, type HotspotProps, HoverCard, HoverCardContent, HoverCardTrigger, IPhoneMock, type IPhoneMockProps, IconWeight, Icons, ImageSwapHover, type ImageSwapHoverProps, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Intent, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LinkedInAuthButton, MagnifyingGlassIcon, Marquee, type MarqueeProps, type Measurement, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, type MetricCardProps, type MetricTrend, MicrosoftAuthButton, MinusIcon, MonitorIcon, MoonIcon, MouseGradientBlob, type MouseGradientBlobProps, MovingBorder, type MovingBorderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, type NotificationCenterProps, type NotificationItem, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, PageTransition, type PageTransitionProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationRangeItem, Palette, ParallaxSection, type ParallaxSectionProps, ParticlesBackground, type ParticlesBackgroundProps, PauseIcon, PayPalAuthButton, PhosphorIconProps, PlayIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PossibleRef, PricingCard, type PricingCardProps, Progress, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, QuotesIcon, RadioGroup, RadioGroupItem, Radius, RadiusProp, Rating, type RatingProps, type RatingSize, RedditAuthButton, RetroGrid, type RetroGridProps, RevealOnScroll, type RevealOnScrollProps, PROVIDERS as SOCIAL_AUTH_PROVIDERS, SaasflareComponentProps, type SaasflareMotion, SaasflareProvider, type SaasflareProviderProps, SaasflareScript, type SaasflareScriptProps, SaasflareShell, type SaasflareShellProps, SafariMock, type SafariMockProps, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, type SearchFieldProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmerButton, type ShimmerButtonProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSimpleIcon, SidebarTrigger, type Size, Skeleton, SlackAuthButton, Slider, SmoothScrollProvider, type SmoothScrollProviderProps, SocialAuthButton, type SocialAuthButtonProps, SocialButton, type SocialButtonProps, type SocialLink, type SocialProvider, SparkChart, type SparkChartProps, type SparkChartVariant, Spinner, SpotlightCard, type SpotlightCardProps, StatCard, type StatCardProps, StatefulButton, type StatefulButtonProps, Step, type StepProps, Steps, type StepsProps, type StickyScrollItem, StickyScrollReveal, type StickyScrollRevealProps, StripeAuthButton, StyleVariant, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, type TagInputProps, TeamCard, type TeamCardProps, TestimonialCard, type TestimonialCardProps, TextGenerateEffect, type TextGenerateEffectProps, Textarea, ThemeModeMultiToggle, type ThemeModeMultiToggleAppearance, type ThemeModeMultiToggleProps, ThemeModeToggle, TikTokAuthButton, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipItem, TooltipProvider, TooltipTrigger, TopLoadingBar, type TopLoadingBarProps, TracingBeam, type TracingBeamProps, Tracker, type TrackerBlock, type TrackerProps, type TreeNode, TreeView, type TreeViewProps, TypewriterText, type UseDisclosureOptions, type UseDisclosureReturn, type UseFileDialogOptions, type UseFileDialogReturn, type UseIntervalOptions, type UseIntervalReturn, type UseLocalStorageOptions, type UseMeasureReturn, type UsePaginationOptions, type UsePaginationReturn, UserAvatar, type UserAvatarProps, WarningIcon, XAuthButton, XCircleIcon, XIcon, badgeVariants, buttonGroupVariants, cn, fadeIn, navigationMenuTriggerStyle, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, toggleVariants, useAnimation, useCountdown, useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useLocalStorage, useMeasure, useMergedRef, usePagination, useReducedMotion, useSaasflareMotion, useSaasflareTheme, useSidebar };