export { cn } from '@mdxui/primitives/lib/utils';
import * as React$1 from 'react';
import React__default, { ComponentType, ReactNode, ComponentProps } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { LucideIcon } from 'lucide-react';
import { PackageManager as PackageManager$1, OpenInAIAction, OpenInAIPlatform } from '@mdxui/primitives';
import { CTASectionProps, PricingProps } from 'mdxui';
import { BundledLanguage } from 'shiki';
import { SectionBackground } from './components/hero/hero-background-spec.js';
export { GlowColor, GridStyle, HERO_BACKGROUNDS, HeroBackgroundLayer, HeroBackgroundPreset, PageBackground, SpotlightColor, allLegalHeroBackgrounds, heroBackgroundLayers } from './components/hero/hero-background-spec.js';

interface BeamsProps {
    className?: string;
}
/**
 * Beams - Diagonal gradient blinds background effect (centered)
 *
 * Creates diagonal blinds with gradient shading within each blind,
 * giving a 3D venetian blind appearance.
 *
 * Fixed settings - use position-specific variants for different placements:
 * - BeamsCenter (default)
 * - BeamsTop
 * - BeamsBottom
 * - BeamsLeft
 * - BeamsRight
 *
 * @example
 * ```tsx
 * <Beams />
 * <BeamsTop />
 * ```
 */
declare function Beams({ className }: BeamsProps): react_jsx_runtime.JSX.Element;

interface DotsTopProps {
    className?: string;
}
/**
 * DotsTop - Dot pattern background with top fade
 *
 * Creates a repeating dot pattern that fades from the top.
 * Uses theme variables for automatic light/dark mode support.
 *
 * Fixed fadeSize: 0.6
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <DotsTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function DotsTop({ className }?: DotsTopProps): react_jsx_runtime.JSX.Element;

interface DotsCenterProps {
    className?: string;
}
/**
 * DotsCenter - Dot pattern background with center fade
 *
 * Creates a repeating dot pattern that fades from the center.
 * Uses theme variables for automatic light/dark mode support.
 *
 * Fixed fadeSize: 0.6
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <DotsCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function DotsCenter({ className }?: DotsCenterProps): react_jsx_runtime.JSX.Element;

interface DotsBottomProps {
    className?: string;
}
/**
 * DotsBottom - Dot pattern background with bottom fade
 *
 * Creates a repeating dot pattern that fades from the bottom.
 * Uses theme variables for automatic light/dark mode support.
 *
 * Fixed fadeSize: 0.5
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <DotsBottom />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function DotsBottom({ className }?: DotsBottomProps): react_jsx_runtime.JSX.Element;

interface DotsEdgesProps {
    className?: string;
}
/**
 * DotsEdges - Dot pattern background visible on edges, fading to center
 *
 * Creates a repeating dot pattern that is visible around the edges
 * and fades out toward the center. Inverse of DotsCenter.
 * Uses theme variables for automatic light/dark mode support.
 *
 * Fixed fadeSize: 0.75
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <DotsEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function DotsEdges({ className }?: DotsEdgesProps): react_jsx_runtime.JSX.Element;

/**
 * DotsFull - Dot pattern background with full coverage
 *
 * Creates a repeating dot pattern that covers the entire area with no fade.
 * Uses theme variables for automatic light/dark mode support.
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <DotsFull />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function DotsFull(): react_jsx_runtime.JSX.Element;

interface GlowTopProps {
    /**
     * Color source from theme variables
     * @default 'primary'
     */
    color?: 'primary' | 'accent' | 'muted';
    /**
     * Enable "light turning on" entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Additional CSS classes
     */
    className?: string;
}
/**
 * GlowTop - Radial gradient glow emanating from top center
 *
 * Creates a soft, theme-aware gradient glow effect that works in both
 * light and dark modes. Uses OKLCH relative color syntax for theme integration.
 *
 * Fixed intensity: Light 0.25, Dark 0.15
 *
 * @example
 * ```tsx
 * // Static
 * <GlowTop />
 *
 * // With entrance animation
 * <GlowTop animate />
 * ```
 */
declare function GlowTop({ color, animate, className, }: GlowTopProps): react_jsx_runtime.JSX.Element;

interface GlowCenterProps {
    /**
     * Color source from theme variables
     * @default 'primary'
     */
    color?: 'primary' | 'accent' | 'muted';
    /**
     * Enable "light turning on" entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Additional CSS classes
     */
    className?: string;
}
/**
 * GlowCenter - Radial gradient glow emanating from center
 *
 * Creates a soft, theme-aware gradient glow effect that works in both
 * light and dark modes. Uses OKLCH relative color syntax for theme integration.
 *
 * Fixed intensity: Light 0.10, Dark 0.11
 *
 * @example
 * ```tsx
 * // Static
 * <GlowCenter />
 *
 * // With entrance animation
 * <GlowCenter animate />
 * ```
 */
declare function GlowCenter({ color, animate, className, }: GlowCenterProps): react_jsx_runtime.JSX.Element;

interface GlowBottomProps {
    /**
     * Color source from theme variables
     * @default 'primary'
     */
    color?: 'primary' | 'accent' | 'muted';
    /**
     * Enable "light turning on" entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Additional CSS classes
     */
    className?: string;
}
/**
 * GlowBottom - Radial gradient glow emanating from bottom center
 *
 * Creates a soft, theme-aware gradient glow effect that works in both
 * light and dark modes. Uses OKLCH relative color syntax for theme integration.
 *
 * Fixed intensity: 0.15 (both light and dark)
 *
 * @example
 * ```tsx
 * // Static
 * <GlowBottom />
 *
 * // With entrance animation
 * <GlowBottom animate />
 * ```
 */
declare function GlowBottom({ color, animate, className, }: GlowBottomProps): react_jsx_runtime.JSX.Element;

interface GradientBlurProps {
    className?: string;
}
/**
 * GradientBlur - Ambient blurred blobs background
 *
 * Creates a soft, modern gradient effect with 2-3 blurred circles
 * positioned around the edges. Uses theme's primary color for
 * universal compatibility across all themes.
 *
 * Fixed settings (not configurable):
 * - Light mode: 4-10% opacity blobs
 * - Dark mode: 5-12% opacity blobs
 * - Uses --primary color from theme
 *
 * @example
 * ```tsx
 * <GradientBlur />
 * ```
 */
declare function GradientBlur({ className }?: GradientBlurProps): react_jsx_runtime.JSX.Element;

interface GridCrosshatchTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridCrosshatchTop - Multi-angle hatching pattern with top fade
 *
 * Dense hatching with lines at multiple angles (22.5, 67.5, 112.5, 157.5)
 * creating a sophisticated pen-stroke texture. Editorial/artistic aesthetic.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridCrosshatchTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridCrosshatchTop({ animate, animationDelay, className, }?: GridCrosshatchTopProps): react_jsx_runtime.JSX.Element;

interface GridCrosshatchCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridCrosshatchCenter - Multi-angle hatching pattern with center fade
 *
 * Dense hatching with lines at multiple angles creating a sophisticated
 * pen-stroke texture that fades from the center.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridCrosshatchCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridCrosshatchCenter({ animate, animationDelay, className, }?: GridCrosshatchCenterProps): react_jsx_runtime.JSX.Element;

interface GridCrosshatchEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridCrosshatchEdges - Multi-angle hatching pattern visible on edges
 *
 * Dense hatching with lines at multiple angles visible around the edges,
 * fading toward the center. Sophisticated editorial framing effect.
 *
 * Fixed fadeSize: 0.75
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridCrosshatchEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridCrosshatchEdges({ animate, animationDelay, className, }?: GridCrosshatchEdgesProps): react_jsx_runtime.JSX.Element;

interface GridDashedTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDashedTop - Dashed grid pattern with top fade
 *
 * Exact translation of the GridPattern from mdxui.dev hero section.
 * Uses CSS mask compositing to create a dashed intersection pattern
 * that fades from the top.
 *
 * Fixed fadeSize: 0.60
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDashedTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDashedTop({ animate, animationDelay, className, }?: GridDashedTopProps): react_jsx_runtime.JSX.Element;

interface GridDashedCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDashedCenter - Dashed grid pattern with center fade
 *
 * Uses CSS mask compositing to create a dashed intersection pattern
 * that fades from the center outward. Ideal for hero sections where
 * text is centered.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDashedCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDashedCenter({ animate, animationDelay, className, }?: GridDashedCenterProps): react_jsx_runtime.JSX.Element;

interface GridDashedBottomProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDashedBottom - Dashed grid pattern with bottom fade
 *
 * Uses CSS mask compositing to create a dashed intersection pattern
 * that fades from the bottom. Inverse of GridDashedTop, ideal for
 * CTA sections or footers.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDashedBottom />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDashedBottom({ animate, animationDelay, className, }?: GridDashedBottomProps): react_jsx_runtime.JSX.Element;

interface GridDashedEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDashedEdges - Dashed grid pattern visible on edges, fading to center
 *
 * Uses CSS mask compositing to create a dashed intersection pattern
 * that is visible around the edges and fades out toward the center.
 * Inverse of GridDashedCenter.
 *
 * Fixed fadeSize: 0.75
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDashedEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDashedEdges({ animate, animationDelay, className, }?: GridDashedEdgesProps): react_jsx_runtime.JSX.Element;

interface GridDashedFullProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDashedFull - Dashed grid pattern with full coverage
 *
 * Uses CSS mask compositing to create a dashed intersection pattern
 * that covers the entire area with no fade.
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDashedFull />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDashedFull({ animate, animationDelay, className, }?: GridDashedFullProps): react_jsx_runtime.JSX.Element;

interface GridDenseTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDenseTop - Small-cell grid pattern with top fade
 *
 * Continuous 1px lines with 10px cells for a dense, data-visualization feel.
 * Like fine graph paper, great for technical or analytics interfaces.
 *
 * Fixed fadeSize: 0.55
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDenseTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDenseTop({ animate, animationDelay, className, }?: GridDenseTopProps): react_jsx_runtime.JSX.Element;

interface GridDenseCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDenseCenter - Small-cell grid pattern with center fade
 *
 * Continuous 1px lines with 10px cells that fade from the center.
 * Dense graph paper feel for technical or analytics interfaces.
 *
 * Fixed fadeSize: 0.45
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDenseCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDenseCenter({ animate, animationDelay, className, }?: GridDenseCenterProps): react_jsx_runtime.JSX.Element;

interface GridDenseEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDenseEdges - Small-cell grid pattern visible on edges
 *
 * Continuous 1px lines with 10px cells visible around the edges,
 * fading toward the center. Dense technical framing effect.
 *
 * Fixed fadeSize: 0.75
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDenseEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDenseEdges({ animate, animationDelay, className, }?: GridDenseEdgesProps): react_jsx_runtime.JSX.Element;

interface GridDiagonalTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDiagonalTop - Diagonal grid pattern with top fade
 *
 * 45-degree crossed lines creating a diamond/argyle pattern.
 * Elegant geometric effect that fades from the top.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDiagonalTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDiagonalTop({ animate, animationDelay, className, }?: GridDiagonalTopProps): react_jsx_runtime.JSX.Element;

interface GridDiagonalCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDiagonalCenter - Diagonal grid pattern with center fade
 *
 * 45-degree crossed lines creating a diamond/argyle pattern
 * that fades from the center outward.
 *
 * Fixed fadeSize: 0.45
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDiagonalCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDiagonalCenter({ animate, animationDelay, className, }?: GridDiagonalCenterProps): react_jsx_runtime.JSX.Element;

interface GridDiagonalBottomProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDiagonalBottom - Diagonal grid pattern with bottom fade
 *
 * 45-degree crossed lines creating a diamond/argyle pattern
 * that fades from the bottom.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDiagonalBottom />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDiagonalBottom({ animate, animationDelay, className, }?: GridDiagonalBottomProps): react_jsx_runtime.JSX.Element;

interface GridDiagonalEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDiagonalEdges - Diagonal grid pattern visible on edges, fading to center
 *
 * 45-degree crossed lines creating a diamond/argyle pattern
 * that is visible around the edges and fades out toward the center.
 *
 * Fixed fadeSize: 0.70
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDiagonalEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDiagonalEdges({ animate, animationDelay, className, }?: GridDiagonalEdgesProps): react_jsx_runtime.JSX.Element;

interface GridDiagonalFullProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridDiagonalFull - Diagonal grid pattern covering the full area
 *
 * 45-degree crossed lines creating a diamond/argyle pattern
 * with no fade effect. The pattern covers the entire container uniformly.
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridDiagonalFull />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridDiagonalFull({ animate, animationDelay, className, }?: GridDiagonalFullProps): react_jsx_runtime.JSX.Element;

interface GridPerspectiveBottomProps {
    /**
     * Enable entrance animation on load
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridPerspectiveBottom - 3D perspective grid receding toward the bottom
 *
 * Creates a dramatic floor grid effect that recedes toward the bottom of
 * the container. Retro/80s/cyberpunk aesthetic with vanishing point.
 *
 * Fixed settings: depth 200, cellSize 40
 *
 * @example
 * ```tsx
 * <section className="relative overflow-hidden">
 *   <GridPerspectiveBottom animate />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridPerspectiveBottom({ animate, animationDelay, className, }?: GridPerspectiveBottomProps): react_jsx_runtime.JSX.Element;

interface GridPerspectiveTopProps {
    /**
     * Enable entrance animation on load
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridPerspectiveTop - 3D perspective grid receding toward the top
 *
 * Creates a dramatic ceiling grid effect that recedes toward the top of
 * the container. Retro/80s/cyberpunk aesthetic with vanishing point.
 *
 * Fixed settings: depth 200, cellSize 40
 *
 * @example
 * ```tsx
 * <section className="relative overflow-hidden">
 *   <GridPerspectiveTop animate />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridPerspectiveTop({ animate, animationDelay, className, }?: GridPerspectiveTopProps): react_jsx_runtime.JSX.Element;

interface GridSolidTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSolidTop - Clean grid pattern with top fade
 *
 * Continuous 1px lines forming a square grid without the dashed effect.
 * More "technical blueprint" feel compared to the dashed variant.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSolidTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSolidTop({ animate, animationDelay, className, }?: GridSolidTopProps): react_jsx_runtime.JSX.Element;

interface GridSolidCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSolidCenter - Clean grid pattern with center fade
 *
 * Continuous 1px lines forming a square grid that fades from the center.
 * Ideal for hero sections where text is centered.
 *
 * Fixed fadeSize: 0.45
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSolidCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSolidCenter({ animate, animationDelay, className, }?: GridSolidCenterProps): react_jsx_runtime.JSX.Element;

interface GridSolidBottomProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSolidBottom - Clean grid pattern with bottom fade
 *
 * Continuous 1px lines forming a square grid that fades from the bottom.
 * Ideal for CTA sections or footers.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSolidBottom />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSolidBottom({ animate, animationDelay, className, }?: GridSolidBottomProps): react_jsx_runtime.JSX.Element;

interface GridSolidEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSolidEdges - Clean grid pattern visible on edges, fading to center
 *
 * Continuous 1px lines forming a square grid that is visible around
 * the edges and fades out toward the center. Inverse of GridSolidCenter.
 *
 * Fixed fadeSize: 0.70
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSolidEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSolidEdges({ animate, animationDelay, className, }?: GridSolidEdgesProps): react_jsx_runtime.JSX.Element;

interface GridSolidFullProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSolidFull - Clean grid pattern covering the full area
 *
 * Continuous 1px lines forming a square grid with no fade effect.
 * The pattern covers the entire container uniformly.
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSolidFull />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSolidFull({ animate, animationDelay, className, }?: GridSolidFullProps): react_jsx_runtime.JSX.Element;

interface GridSparseTopProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSparseTop - Large-cell grid pattern with top fade
 *
 * Continuous 1px lines with 40px cells for an open, airy feel.
 * Great for minimalist designs and large hero sections.
 *
 * Fixed fadeSize: 0.60
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSparseTop />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSparseTop({ animate, animationDelay, className, }?: GridSparseTopProps): react_jsx_runtime.JSX.Element;

interface GridSparseCenterProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSparseCenter - Large-cell grid pattern with center fade
 *
 * Continuous 1px lines with 40px cells that fade from the center.
 * Open, airy feel ideal for minimalist centered layouts.
 *
 * Fixed fadeSize: 0.50
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSparseCenter />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSparseCenter({ animate, animationDelay, className, }?: GridSparseCenterProps): react_jsx_runtime.JSX.Element;

interface GridSparseEdgesProps {
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * GridSparseEdges - Large-cell grid pattern visible on edges
 *
 * Continuous 1px lines with 40px cells visible around the edges,
 * fading toward the center. Open, airy framing effect.
 *
 * Fixed fadeSize: 0.75
 *
 * @example
 * ```tsx
 * <section className="relative">
 *   <GridSparseEdges />
 *   <div className="relative z-10">Content here</div>
 * </section>
 * ```
 */
declare function GridSparseEdges({ animate, animationDelay, className, }?: GridSparseEdgesProps): react_jsx_runtime.JSX.Element;

interface NoiseTextureProps {
    /**
     * Use fixed positioning to cover the entire viewport including navbar.
     * When true, the texture overlays everything at z-[60] (above navbar z-50).
     * Use this when you want consistent texture across the entire page.
     * @default false
     */
    fixed?: boolean;
    className?: string;
    /** Stable ID for the SVG filter to avoid hydration mismatches in layouts */
    id?: string;
}
/**
 * NoiseTexture - Construction paper-like grain overlay
 *
 * A full-page noise texture that adds tactile, organic grain to any background.
 * Uses SVG feTurbulence for procedural noise generation.
 *
 * Fixed settings (not configurable):
 * - Light mode: intensity 0.05, dark specks
 * - Dark mode: intensity 0.10, soft-light blend
 *
 * @example
 * ```tsx
 * // Section-level (default) - covers parent container
 * <NoiseTexture />
 *
 * // Page-level with fixed positioning - covers viewport including navbar
 * <NoiseTexture fixed />
 * ```
 */
declare function NoiseTexture({ fixed, className, id }?: NoiseTextureProps): react_jsx_runtime.JSX.Element;

interface ParticlesProps {
    className?: string;
}
/**
 * Particles - Animated floating dots background
 *
 * Creates a subtle field of drifting particles using CSS animations.
 * Respects prefers-reduced-motion by disabling animations.
 *
 * Fixed settings (not configurable):
 * - 18 particles with varied sizes (2-4px)
 * - Slow drift animation (20-29s duration)
 * - Uses muted-foreground color at low opacity
 *
 * @example
 * ```tsx
 * <Particles />
 * ```
 */
declare function Particles({ className }?: ParticlesProps): react_jsx_runtime.JSX.Element;

interface SpotlightTopLeftProps {
    /**
     * Color source from theme variables
     * @default 'primary'
     */
    color?: 'primary' | 'accent' | 'muted' | 'foreground';
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * SpotlightTopLeft - Soft spotlight glow from top-left corner
 *
 * A blurred ellipse positioned off-canvas to create a natural
 * diagonal spotlight effect illuminating the hero area.
 *
 * Fixed settings: intensity 0.15, spread 1.0
 * Light mode: 85% opacity, Dark mode: 60% opacity
 */
declare function SpotlightTopLeft({ color, animate, animationDelay, className, }?: SpotlightTopLeftProps): react_jsx_runtime.JSX.Element;

interface SpotlightTopRightProps {
    /**
     * Color source from theme variables
     * @default 'primary'
     */
    color?: 'primary' | 'accent' | 'muted' | 'foreground';
    /**
     * Enable entrance animation
     * @default true
     */
    animate?: boolean;
    /**
     * Animation delay in seconds (allows hero content to load first)
     * @default 0.5
     */
    animationDelay?: number;
    className?: string;
}
/**
 * SpotlightTopRight - Soft spotlight glow from top-right corner
 *
 * A blurred ellipse positioned off-canvas to create a natural
 * diagonal spotlight effect illuminating the hero area.
 *
 * Fixed settings: intensity 0.15, spread 1.0
 * Light mode: 85% opacity, Dark mode: 60% opacity
 */
declare function SpotlightTopRight({ color, animate, animationDelay, className, }?: SpotlightTopRightProps): react_jsx_runtime.JSX.Element;

/**
 * Blog post author
 */
interface BlogPostAuthor {
    name: string;
    image?: string;
}
/**
 * Blog post data
 */
interface BlogPost {
    /** Post slug (used for URL and gradient seed) */
    slug: string;
    /** Post title */
    title: string;
    /** Post description/excerpt */
    description?: string;
    /** Publication date (ISO string or formatted) */
    date?: string;
    /** Post author */
    author?: BlogPostAuthor;
    /** Post tags/categories */
    tags?: string[];
    /** Optional custom image URL (overrides gradient) */
    image?: string;
}
interface BlogCardLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface BlogCardProps {
    /** Blog post data */
    post: BlogPost;
    /** Custom link component for framework routing */
    LinkComponent?: ComponentType<BlogCardLinkProps>;
    /** Format date function */
    formatDate?: (date: string) => string;
    /** Show author info (default: true) */
    showAuthor?: boolean;
    /** Base path for post links (default: '') — e.g. '/blog' produces '/blog/{slug}' */
    basePath?: string;
    /** Additional className */
    className?: string;
}
declare function BlogCard({ post, LinkComponent, formatDate, showAuthor, basePath, className, }: BlogCardProps): react_jsx_runtime.JSX.Element;

interface BlogGridLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface BlogGridProps<T> {
    /** Array of blog items */
    items: T[];
    /** Render function for each blog card */
    renderItem: (item: T, index: number) => ReactNode;
    /** View mode: 'card' for grid, 'list' for list */
    viewMode?: 'card' | 'list';
    /** Format date function (for list view) */
    formatDate?: (date: string) => string;
    /** Custom link component for framework routing (for list view) */
    LinkComponent?: ComponentType<BlogGridLinkProps>;
    /** Base path for post links (default: '') — e.g. '/blog' produces '/blog/{slug}' */
    basePath?: string;
    /** Additional className */
    className?: string;
}
declare function BlogGrid<T>({ items, renderItem, viewMode, formatDate, LinkComponent, basePath, className, }: BlogGridProps<T>): react_jsx_runtime.JSX.Element;

interface BlogHeaderProps {
    /** Blog title */
    title: string;
    /** Blog description */
    description?: string;
    /** Additional content (e.g., tag filter) */
    children?: ReactNode;
    /** Additional className */
    className?: string;
}
declare function BlogHeader({ title, description, children, className }: BlogHeaderProps): react_jsx_runtime.JSX.Element;

interface TagFilterLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface TagFilterProps {
    /** Available tags to filter by */
    tags: string[];
    /** Currently selected tag */
    selectedTag: string;
    /** Callback when a tag is selected (callback mode) */
    onTagSelect?: (tag: string) => void;
    /** Link mode — returns href for each tag (used with LinkComponent) */
    tagHref?: (tag: string) => string;
    /** Link component for framework routing (e.g. Next.js Link) */
    LinkComponent?: ComponentType<TagFilterLinkProps>;
    /** Optional tag counts */
    tagCounts?: Record<string, number>;
    /** Maximum tags to display (default: 6) */
    maxTags?: number;
    /** Additional className */
    className?: string;
}
declare function TagFilter({ tags, selectedTag, onTagSelect, tagHref, LinkComponent, tagCounts, maxTags, className }: TagFilterProps): react_jsx_runtime.JSX.Element;

type ViewMode = 'card' | 'list';
interface ViewModeToggleLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface ViewModeToggleProps {
    /** Current view mode */
    viewMode: ViewMode;
    /** Callback mode — called when a mode button is clicked */
    onViewModeChange?: (mode: ViewMode) => void;
    /** Link mode — returns href for each mode (used with LinkComponent) */
    viewModeHref?: (mode: ViewMode) => string;
    /** Link component for framework routing (e.g. Next.js Link) */
    LinkComponent?: ComponentType<ViewModeToggleLinkProps>;
    /** Additional className */
    className?: string;
}
declare function ViewModeToggle({ viewMode, onViewModeChange, viewModeHref, LinkComponent, className }: ViewModeToggleProps): react_jsx_runtime.JSX.Element;

interface BlogAuthorProps {
    /** Author name */
    name: string;
    /** Author role/position */
    role?: string;
    /** Author avatar image URL */
    image?: string;
    /** Additional className */
    className?: string;
}
declare function BlogAuthor({ name, role, image, className }: BlogAuthorProps): react_jsx_runtime.JSX.Element;

interface BlogPostHeaderLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface BlogPostHeaderProps {
    /** Post title */
    title: string;
    /** Post description/excerpt */
    description?: string;
    /** Post tags/categories */
    tags?: string[];
    /** Formatted publication date */
    date?: string;
    /** Back link href */
    backHref?: string;
    /** Back link label */
    backLabel?: string;
    /** URL for sharing (defaults to current page) */
    shareUrl?: string;
    /** Custom link component */
    LinkComponent?: ComponentType<BlogPostHeaderLinkProps>;
    /** Additional className */
    className?: string;
}
declare function BlogPostHeader({ title, description, tags, date, backHref, backLabel, shareUrl, LinkComponent, className, }: BlogPostHeaderProps): react_jsx_runtime.JSX.Element;

interface TableOfContentsAuthor {
    name: string;
    image?: string;
}
interface TableOfContentsProps {
    /** Heading selectors to include (default: 'h1, h2') */
    selector?: string;
    /** Additional className */
    className?: string;
    /** Author information to display below TOC */
    author?: TableOfContentsAuthor;
}
declare function TableOfContents({ selector, className, author, }: TableOfContentsProps): react_jsx_runtime.JSX.Element | null;

interface ReadMoreLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface ReadMoreSectionProps {
    /** Related posts to display */
    posts: BlogPost[];
    /** Current post slug (to exclude from list) */
    currentSlug: string;
    /** Current post tags (for relevance scoring) */
    currentTags?: string[];
    /** Maximum posts to show (default: 3) */
    maxPosts?: number;
    /** Custom link component */
    LinkComponent?: ComponentType<ReadMoreLinkProps>;
    /** Base path for post links (default: '') — e.g. '/blog' produces '/blog/{slug}' */
    basePath?: string;
    /** Additional className */
    className?: string;
}
declare function ReadMoreSection({ posts, currentSlug, currentTags, maxPosts, LinkComponent, basePath, className, }: ReadMoreSectionProps): react_jsx_runtime.JSX.Element | null;

interface BlogIconProps extends ComponentProps<LucideIcon> {
    title: string;
    description: string;
    tags?: string[];
    slug?: string;
}
/**
 * BlogIcon component - renders the appropriate icon for a blog post
 *
 * @example
 * ```tsx
 * <BlogIcon
 *   title="Getting Started"
 *   description="Learn the basics"
 *   slug="getting-started"
 *   className="w-12 h-12"
 * />
 * ```
 */
declare function BlogIcon({ title, description, tags, slug, ...props }: BlogIconProps): react_jsx_runtime.JSX.Element;
declare function getBlogIcon(title: string, description: string, tags?: string[], slug?: string): LucideIcon;

/**
 * Parse a date string safely, returning null if invalid
 * @param dateString - The date string to parse
 * @returns Parsed Date object or null if invalid
 */
declare function parseDate(dateString: string): Date | null;
/**
 * Format a date to a human-readable string
 * @param date - The date to format (Date object or string)
 * @returns Formatted date string (e.g., "October 20, 2025")
 */
declare function formatDate(date: Date | string): string;

interface BlogPageLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface BlogPageProps {
    /** Blog title */
    title: string;
    /** Blog description */
    description?: string;
    /** Array of blog posts */
    posts: BlogPost[];
    /** Currently selected tag (for filtering) */
    selectedTag?: string;
    /** Callback when tag is selected (callback mode) */
    onTagSelect?: (tag: string) => void;
    /** Show tag filter */
    showTagFilter?: boolean;
    /** External view mode — when provided, skips internal useState (server component friendly) */
    viewMode?: ViewMode;
    /** Callback when view mode changes (callback mode) */
    onViewModeChange?: (mode: ViewMode) => void;
    /** Link mode — returns href for each tag (used with LinkComponent) */
    tagHref?: (tag: string) => string;
    /** Link mode — returns href for each view mode (used with LinkComponent) */
    viewModeHref?: (mode: ViewMode) => string;
    /** Custom link component for framework routing */
    LinkComponent?: ComponentType<BlogPageLinkProps>;
    /** Base path for post links (default: '') — e.g. '/blog' produces '/blog/{slug}' */
    basePath?: string;
    /** Custom date formatter */
    formatDate?: (date: string) => string;
    /** Additional className */
    className?: string;
}
/**
 * Blog page component
 *
 * Supports two modes:
 * 1. **Callback mode** (client): `onTagSelect` + `onViewModeChange` — uses internal useState for view mode
 * 2. **Link mode** (server): `tagHref` + `viewModeHref` + `LinkComponent` + `viewMode` prop — pure server component, URL-driven
 *
 * @example
 * ```tsx
 * // Server component (link mode)
 * <BlogPage
 *   title="Blog"
 *   posts={posts}
 *   showTagFilter
 *   selectedTag={selectedTag}
 *   viewMode={viewMode}
 *   tagHref={(tag) => `/blog?tag=${tag}`}
 *   viewModeHref={(mode) => `/blog?view=${mode}`}
 *   LinkComponent={Link}
 * />
 *
 * // Client component (callback mode)
 * <BlogPage
 *   title="Blog"
 *   posts={posts}
 *   showTagFilter
 *   selectedTag="All"
 *   onTagSelect={(tag) => console.log('Selected:', tag)}
 * />
 * ```
 */
declare function BlogPage({ title, description, posts, selectedTag, onTagSelect, showTagFilter, viewMode: viewModeProp, onViewModeChange, tagHref, viewModeHref, LinkComponent, basePath, formatDate, className, }: BlogPageProps): react_jsx_runtime.JSX.Element;

/**
 * FAQ item structure
 */
interface FAQItem$3 {
    question: string;
    answer: string;
}
/**
 * Adapted FAQ props that makes variant optional since this component
 * only implements the accordion variant. Following the Hero adapter pattern.
 */
interface AdaptedFAQProps {
    /**
     * Section title (uses 'title' from FAQProps)
     */
    title?: string;
    /**
     * Optional description text below the title
     */
    description?: string;
    /**
     * FAQ items - array of question/answer pairs
     */
    items: FAQItem$3[];
    /**
     * FAQ variant (optional, defaults to 'accordion')
     * This component only implements accordion style.
     * For other variants, use FAQNumberedGrid (numbered-grid) or FAQSplitCTA (split-cta).
     */
    variant?: 'accordion' | 'grid' | 'list';
}
/**
 * FAQ - Frequently Asked Questions section
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Accordion-style expandable questions and answers
 * - Answers support **Markdown** (bold, lists, inline code, links, paragraphs)
 * - Centered title with optional description
 * - 4-8 items recommended for balanced layout
 *
 * **Markdown Support in Answers:**
 * - `**bold**` for emphasis
 * - `\`inline code\`` for code snippets
 * - `- item` for bullet lists
 * - `[text](url)` for links
 * - `\n\n` for paragraph breaks
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────┐
 * │    Frequently Asked Questions      │
 * │    Optional description text       │
 * │                                    │
 * │  ▸ Question 1?                     │
 * │  ▸ Question 2?                     │
 * │  ▾ Question 3?                     │
 * │    Answer with **Markdown**...     │
 * │  ▸ Question 4?                     │
 * └────────────────────────────────────┘
 * ```
 *
 * @example
 * ```tsx
 * <FAQ
 *   title="Frequently Asked Questions"
 *   description="Find answers to common questions."
 *   items={[
 *     {
 *       question: 'What is mdxui?',
 *       answer: 'A **type-safe** component library for MDX.'
 *     },
 *     {
 *       question: 'How do I install?',
 *       answer: 'Run `pnpm add mdxui @mdxui/primitives`.'
 *     },
 *   ]}
 * />
 * ```
 */
declare function FAQ(props: AdaptedFAQProps): react_jsx_runtime.JSX.Element;

interface FAQItem$2 {
    question: string;
    answer: string;
}
/**
 * Props for FAQNumberedGrid component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Grid layout with configurable columns (1 for stacked, 2 for grid)
 * - Numbered indicators (1, 2, 3...) next to each question
 * - Answers support **Markdown** (bold, lists, inline code, links, paragraphs)
 * - Centered header with badge, title, and description
 * - 4-8 items recommended for balanced layout
 */
interface FAQNumberedGridProps {
    /** Section id for anchor links */
    id?: string;
    badge?: string;
    title?: string;
    description?: string;
    items?: FAQItem$2[];
    /** Number of columns on desktop (1 = stacked, 2 = grid). Default: 2 */
    columns?: 1 | 2;
    className?: string;
}
/**
 * FAQNumberedGrid - Numbered FAQ grid layout
 *
 * **Layout:**
 * ```
 * ┌──────────────────────────────────────┐
 * │            [Badge]                   │
 * │     Common Questions & Answers       │
 * │        Description text...           │
 * │                                      │
 * │  ① Question 1?      ② Question 2?   │
 * │    Answer text...     Answer text... │
 * │                                      │
 * │  ③ Question 3?      ④ Question 4?   │
 * │    Answer text...     Answer text... │
 * └──────────────────────────────────────┘
 * ```
 *
 * @example
 * ```tsx
 * <FAQNumberedGrid
 *   badge="FAQ"
 *   title="Common Questions"
 *   description="Find answers to frequently asked questions."
 *   items={[
 *     { question: 'What is mdxui?', answer: 'A **type-safe** component library.' },
 *   ]}
 * />
 * ```
 */
declare const FAQNumberedGrid: ({ id, badge, title, description, items, columns, className, }: FAQNumberedGridProps) => react_jsx_runtime.JSX.Element;

interface FAQItem$1 {
    question: string;
    answer: string;
}
/**
 * Props for FAQSplitCTA component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Split layout: CTA left, accordion right
 * - Left side has heading, description, and CTA button
 * - Answers support **Markdown** (bold, lists, inline code, links, paragraphs)
 * - 4-6 items recommended for balanced layout
 */
interface FAQSplitCTAProps {
    title?: string;
    description?: string;
    supportLink?: {
        text: string;
        url: string;
    };
    secondaryButton?: {
        text: string;
        url: string;
    };
    items?: FAQItem$1[];
    className?: string;
}
/**
 * FAQSplitCTA - Split layout with CTA and accordion
 *
 * **Layout:**
 * ```
 * ┌─────────────────────────────────────────────┐
 * │  Frequently Asked        │ ▸ Question 1?    │
 * │  Questions               │ ▸ Question 2?    │
 * │                          │ ▾ Question 3?    │
 * │  Description with link   │   Answer...      │
 * │                          │ ▸ Question 4?    │
 * │  [View Docs]             │                  │
 * └─────────────────────────────────────────────┘
 * ```
 *
 * @example
 * ```tsx
 * <FAQSplitCTA
 *   title="Frequently Asked Questions"
 *   description="Still have questions?"
 *   secondaryButton={{ text: 'View Docs', url: '/docs' }}
 *   items={[
 *     { question: 'What is mdxui?', answer: 'A **type-safe** component library.' },
 *   ]}
 * />
 * ```
 */
declare const FAQSplitCTA: ({ title, description, supportLink, secondaryButton, items, className, }: FAQSplitCTAProps) => react_jsx_runtime.JSX.Element;

/**
 * FAQ item structure
 */
interface FAQItem {
    question: string;
    answer: string;
}
/**
 * Adapted FAQ input props (matches what FAQ component accepts)
 */
interface AdaptedFAQInputProps {
    title?: string;
    description?: string;
    items: FAQItem[];
    variant?: 'accordion' | 'grid' | 'list';
}
/**
 * Block FAQ item structure (matches the upstream shadcn-ui-blocks faq block)
 */
interface BlockFaqItem {
    id: string;
    question: string;
    answer: string;
}
/**
 * Raw input props of the upstream shadcn-ui-blocks faq block
 */
interface BlockFaq1Props {
    heading: string;
    description?: string;
    items: BlockFaqItem[];
}
/**
 * Map a single FAQ item to block FAQ item
 */
declare function mapFAQItemToBlock(item: FAQItem, index: number): BlockFaqItem;
/**
 * Map adapted FAQ props to the upstream block props shape
 */
declare function mapFAQProps(props: AdaptedFAQInputProps): BlockFaq1Props;

/**
 * SEO Author information
 */
interface SEOAuthor {
    name: string;
    url?: string;
    image?: string;
}
/**
 * SEO Publisher information (Organization)
 */
interface SEOPublisher {
    name: string;
    logo?: string;
    url?: string;
}
/**
 * Blog SEO configuration
 */
interface BlogSEOConfig {
    /** Base URL of the site (e.g., 'https://example.com') */
    baseUrl: string;
    /** Name of the site */
    siteName: string;
    /** Publisher information (used as default author when no author provided) */
    publisher: SEOPublisher;
    /** Twitter handle (e.g., '@example') */
    twitterHandle?: string;
    /** Default Open Graph image URL */
    defaultOgImage?: string;
    /** Blog path prefix (default: '/blog') */
    blogPath?: string;
}

/**
 * FAQ item for structured data and UI rendering
 * - `answer` is used for SEO JSON-LD (plain text)
 * - `answerContent` is used for UI rendering (supports ReactNode/markdown)
 */
interface BlogPostFAQItem extends FAQItem {
    /** Rich content for UI rendering (optional, falls back to `answer`) */
    answerContent?: ReactNode;
}
/**
 * HowTo step for structured data
 */
interface HowToStep {
    name: string;
    text: string;
    image?: string;
}
/**
 * HowTo structured data
 */
interface HowToData {
    name: string;
    description?: string;
    steps: HowToStep[];
    /** Total time in ISO 8601 duration format (e.g., 'PT30M' for 30 minutes) */
    totalTime?: string;
}
/**
 * Props for BlogPostSEO component
 */
interface BlogPostSEOProps {
    /** Blog post data */
    post: {
        slug: string;
        title: string;
        description?: string;
        date?: string;
        dateModified?: string;
        author?: SEOAuthor;
        tags?: string[];
        image?: string;
        category?: string;
        wordCount?: number;
    };
    /** SEO configuration */
    config: BlogSEOConfig;
    /** FAQ items for FAQPage schema */
    faq?: BlogPostFAQItem[];
    /** HowTo data for HowTo schema */
    howTo?: HowToData;
    /** Include breadcrumb structured data (default: true) */
    includeBreadcrumbs?: boolean;
}

/**
 * BlogPostSEO - Renders JSON-LD structured data for blog posts
 *
 * Outputs script tags with JSON-LD for:
 * - BlogPosting schema (always)
 * - BreadcrumbList schema (when includeBreadcrumbs is true, default)
 * - FAQPage schema (when faq items are provided)
 * - HowTo schema (when howTo data is provided)
 *
 * @example
 * ```tsx
 * <BlogPostSEO
 *   post={{
 *     slug: 'getting-started',
 *     title: 'Getting Started Guide',
 *     description: 'Learn how to get started with our product',
 *     date: '2024-01-15',
 *     author: { name: 'John Doe', url: '/authors/john' },
 *     tags: ['tutorial', 'beginner'],
 *   }}
 *   config={{
 *     baseUrl: 'https://example.com',
 *     siteName: 'Example Blog',
 *     publisher: { name: 'Example Inc', logo: '/logo.png' },
 *   }}
 *   faq={[
 *     { question: 'What is this?', answer: 'A getting started guide.' },
 *   ]}
 * />
 * ```
 */
declare function BlogPostSEO({ post, config, faq, howTo, includeBreadcrumbs, }: BlogPostSEOProps): react_jsx_runtime.JSX.Element;

interface DisplayAdLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
interface DisplayAdProps {
    /** Ad title (default: 'Upgrade Your Experience') */
    title?: string;
    /** Ad description (default: 'Discover premium features...') */
    description?: string;
    /** CTA button text (default: 'Learn More') */
    ctaText?: string;
    /** CTA button href (default: '#') */
    ctaHref?: string;
    /** Optional highlight/badge text */
    highlight?: string;
    /** Custom link component */
    LinkComponent?: ComponentType<DisplayAdLinkProps>;
    /** Additional className */
    className?: string;
}
declare function DisplayAd({ title, description, ctaText, ctaHref, highlight, LinkComponent, className, }: DisplayAdProps): react_jsx_runtime.JSX.Element;

interface BlogPostPageLinkProps {
    href: string;
    children: ReactNode;
    className?: string;
}
/** Props for custom TOC components */
interface TocComponentProps {
    author?: {
        name: string;
        image?: string;
    };
    className?: string;
}
interface BlogPostPageProps {
    /** Blog post data */
    post: BlogPost;
    /** Post content (rendered markdown/MDX) */
    children?: ReactNode;
    /** Show sidebar with author and TOC (default: true) */
    showSidebar?: boolean;
    /** Show table of contents in sidebar (default: true) */
    showToc?: boolean;
    /** Show read more section at bottom (default: true) */
    showReadMore?: boolean;
    /** Related posts for read more section */
    relatedPosts?: BlogPost[];
    /** Optional display ad configuration */
    displayAd?: DisplayAdProps;
    /** SEO configuration - enables structured data when provided */
    seoConfig?: BlogSEOConfig;
    /** FAQ items - renders FAQ section and adds FAQPage schema when provided */
    faq?: BlogPostFAQItem[];
    /** HowTo data - adds HowTo schema when provided */
    howTo?: HowToData;
    /** Custom link component */
    LinkComponent?: ComponentType<BlogPostPageLinkProps>;
    /** Base path for post links (default: '') — e.g. '/blog' produces '/blog/{slug}' */
    basePath?: string;
    /** Custom Table of Contents component (e.g., TanStack-specific TOC) */
    TocComponent?: ComponentType<TocComponentProps>;
    /** Additional className */
    className?: string;
}
/**
 * Blog post page component
 *
 * @example
 * ```tsx
 * <BlogPostPage
 *   post={{
 *     slug: 'hello-world',
 *     title: 'Hello World',
 *     description: 'My first blog post',
 *     date: '2024-01-01',
 *     author: { name: 'John Doe', image: '/john.jpg' },
 *     tags: ['news'],
 *   }}
 *   showSidebar
 *   showToc
 * >
 *   <p>Post content here...</p>
 * </BlogPostPage>
 * ```
 */
declare function BlogPostPage({ post, children, showSidebar, showToc, showReadMore, relatedPosts, displayAd, seoConfig, faq, howTo, LinkComponent, basePath, TocComponent, className, }: BlogPostPageProps): react_jsx_runtime.JSX.Element;

interface MarkdownContentProps {
    children: ReactNode;
    className?: string;
}
/**
 * MarkdownContent wrapper that automatically enhances code blocks with syntax highlighting.
 *
 * Converts `<pre><code>` elements into CodeBlock components with:
 * - Syntax highlighting via Shiki
 * - Light/dark mode support
 * - Copy button
 * - Language detection from className (e.g., `language-typescript`)
 *
 * @example
 * ```tsx
 * <MarkdownContent>
 *   <p>Some text</p>
 *   <pre><code className="language-typescript">const x = 1</code></pre>
 * </MarkdownContent>
 * ```
 */
declare function MarkdownContent({ children, className }: MarkdownContentProps): react_jsx_runtime.JSX.Element;

interface CodeBlockProps {
    /** Code content */
    children: string;
    /** Language for syntax highlighting */
    language?: BundledLanguage | string;
    /** Optional filename to display */
    filename?: string;
    /** Show line numbers */
    lineNumbers?: boolean;
    /** Additional className */
    className?: string;
}
/**
 * CodeBlock component with Shiki syntax highlighting
 *
 * Uses dual themes (github-light/github-dark) with separate HTML outputs
 * and CSS-based visibility toggling for light/dark mode.
 */
declare function CodeBlock({ children, language, filename, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;

interface MdxPreProps {
    children?: ReactNode;
    className?: string;
}
/**
 * MDX Pre component override
 *
 * This component intercepts MDX's `<pre><code>` output and renders
 * it using our styled CodeBlock component with syntax highlighting,
 * including copy button and proper styling.
 *
 * @example
 * ```tsx
 * // In MDX component registry:
 * const components = {
 *   pre: MdxPre,
 * }
 *
 * <Content components={components} />
 * ```
 */
declare function MdxPre({ children, className }: MdxPreProps): react_jsx_runtime.JSX.Element;

declare const markdownTableComponents: {
    hr: () => react_jsx_runtime.JSX.Element;
    table: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    thead: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    tbody: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    tr: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    th: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
    td: ({ children }: {
        children?: ReactNode;
    }) => react_jsx_runtime.JSX.Element;
};

interface HashScrollHandlerProps {
    /** Offset from top for fixed headers (default: 80) */
    offset?: number;
}
/**
 * Handles smooth scrolling to hash anchors with offset for fixed headers.
 * Renders nothing - just adds scroll behavior.
 *
 * @example
 * ```tsx
 * <HashScrollHandler offset={80} />
 * ```
 */
declare function HashScrollHandler({ offset }: HashScrollHandlerProps): null;

interface CodeWindowBaseProps {
    /** Code content to display */
    code: string;
    /** Programming language for syntax highlighting */
    language: string;
    /** Optional filename to display in header */
    filename?: string;
    /** Whether to show the header with window dots (default: true) */
    showHeader?: boolean;
    /** Whether to show the copy button in the header (default: false) */
    showCopy?: boolean;
    /**
     * Theme mode for the code window:
     *
     * **Theme Variables (adapts to your theme colors):**
     * - 'light': Always light appearance, uses theme variables
     * - 'dark': Always dark appearance, uses theme variables
     * - 'auto': Adapts to page light/dark mode, uses theme variables
     *
     * **Hardcoded (classic GitHub look):**
     * - 'github': Adapts to page light/dark mode, hardcoded GitHub colors
     */
    theme?: "dark" | "light" | "auto" | "github";
    /** Visual style: 'default' (border + radius + shadow), 'borderless' (no border/radius/shadow) */
    style?: "default" | "borderless";
    /** Additional className for the container */
    className?: string;
    /** Additional className for the code content area */
    contentClassName?: string;
}
declare function CodeWindowBase({ code, language, filename, showHeader, showCopy, theme, style, className, contentClassName, }: CodeWindowBaseProps): react_jsx_runtime.JSX.Element;

interface CodeWindowHeroProps extends Omit<CodeWindowBaseProps, 'contentClassName'> {
    /** Size variant for the code window */
    size?: 'fit' | 'sm' | 'md' | 'lg' | 'full';
}
/**
 * CodeWindowHero - Code window with size variants
 *
 * Size options:
 * - fit (default): Adapts to code content height
 * - sm/md/lg: Fixed heights (280/400/500px) for layout consistency
 * - full: Fills parent container
 */
declare function CodeWindowHero({ size, className, ...props }: CodeWindowHeroProps): react_jsx_runtime.JSX.Element;

interface CodeWindowCopyButtonProps {
    /** Code value to copy */
    code: string;
    /** Additional className for styling */
    className?: string;
}
/**
 * Copy button for CodeWindow header
 * Shows copy icon normally, check icon on successful copy (1.2s)
 */
declare function CodeWindowCopyButton({ code, className }: CodeWindowCopyButtonProps): react_jsx_runtime.JSX.Element;

type CodeTheme$1 = 'dark' | 'light' | 'auto';
interface CodeWindowConfig$2 {
    code: string;
    language: string;
}
interface OrbitItem$2 {
    type: 'avatar' | 'icon';
    src?: string;
    fallback?: string;
    alt?: string;
}
interface InstallSnippetConfig$1 {
    package: string;
    command?: PackageManager$1;
}
interface CTABaseProps {
    /** Main headline (plain text) */
    title?: string;
    /** Supporting description. Supports Markdown — bold, italic, `inline code`, [links](url), lists. */
    description?: string;
    /** Additional class name */
    className?: string;
}
interface CTAButtonProps {
    /** Primary button text */
    callToAction?: string;
    /** Primary button URL */
    callToActionUrl?: string;
}
interface CTASecondaryButtonProps extends CTAButtonProps {
    /** Secondary button text */
    secondaryCallToAction?: string;
    /** Secondary button URL */
    secondaryCallToActionUrl?: string;
}
interface CTAMediaProps {
    /** Image source and alt */
    image?: {
        src: string;
        alt: string;
    };
    /** Display image or code window. @default 'image' */
    mediaType?: 'image' | 'code';
    /** Code window content (when mediaType is 'code') */
    codeWindow?: CodeWindowConfig$2;
    /** Code window color theme. @default 'auto' */
    codeTheme?: CodeTheme$1;
}
/** Centered card CTA with checklist, 1-2 buttons, background */
interface CTACenteredProps extends CTABaseProps, CTASecondaryButtonProps {
    variant: 'centered';
    /** Checklist items */
    items?: string[];
    /** Background pattern */
    background?: ReactNode;
}
/** Centered checklist CTA — buttons or install snippet via ctaMode */
type CTACenteredCheckProps = CTABaseProps & {
    variant: 'centered-check';
    /** Checklist items */
    items?: string[];
    /** Background pattern */
    background?: ReactNode;
} & (({
    ctaMode?: 'buttons';
} & CTASecondaryButtonProps) | ({
    ctaMode: 'install-snippet';
} & InstallSnippetConfig$1));
/** Split layout with media (image or code) */
interface CTASplitMediaProps extends CTABaseProps, CTASecondaryButtonProps, CTAMediaProps {
    variant: 'split-media';
}
/** Split layout with media and gradient background */
interface CTASplitMediaGradientProps extends CTABaseProps, CTASecondaryButtonProps, CTAMediaProps {
    variant: 'split-media-gradient';
    /** Small label/badge text above heading */
    badge?: string;
}
/** Split layout with checklist */
interface CTAChecklistProps extends CTABaseProps, CTAButtonProps {
    variant: 'checklist';
    /** Checklist items */
    items?: string[];
}
/** Orbiting animation CTA — buttons or install snippet via ctaMode */
type CTAOrbitingProps = CTABaseProps & {
    variant: 'orbiting';
    /** Orbiting items grouped by orbit ring */
    orbitingItems?: (OrbitItem$2 & {
        orbit: 'inner' | 'middle' | 'outer';
    })[];
} & (({
    ctaMode?: 'buttons';
} & CTAButtonProps) | ({
    ctaMode: 'install-snippet';
} & InstallSnippetConfig$1));
type CTAProps = CTACenteredProps | CTACenteredCheckProps | CTASplitMediaProps | CTASplitMediaGradientProps | CTAChecklistProps | CTAOrbitingProps;

/**
 * CTA variant switch component
 *
 * Routes to the appropriate CTA component based on variant.
 * Props are a discriminated union — each variant only accepts its own props.
 */
declare function CTA$1(props: CTAProps): React__default.ReactElement;
/**
 * CTA Section - alias for CTA component
 * Matches the mdxui naming convention
 */
declare const CTASection: typeof CTA$1;

/**
 * Props for CtaChecklist component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Split layout with content left, checklist right
 * - Muted background card
 * - Single primary button with arrow icon (1 regular button)
 * - **NEVER use this for install commands - use CtaCenteredCheck instead**
 * - Best for feature highlights with benefits list
 *
 * **CTA Button Rules (CRITICAL):**
 * 1. Use this component for 1 regular button
 * 2. Use CtaCenteredCheck for npm/npx/pnpm install commands (InstallSnippet ONLY)
 * 3. NEVER mix InstallSnippet with regular buttons - they are mutually exclusive
 */
interface CtaChecklistProps {
    /** Main heading text */
    heading?: string;
    /** Description text below heading */
    description?: string;
    /** Button configuration */
    button?: {
        text: string;
        url: string;
    };
    /** List of benefit/feature items with checkmarks */
    items?: string[];
    /** Additional CSS classes */
    className?: string;
}
/**
 * CtaChecklist - Split CTA with checklist
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────┐
 * │  ┌─────────────────┬──────────────────┐│
 * │  │  Heading        │  ✓ Item 1        ││
 * │  │  Description    │  ✓ Item 2        ││
 * │  │  [Button →]     │  ✓ Item 3        ││
 * │  │                 │  ✓ Item 4        ││
 * │  └─────────────────┴──────────────────┘│
 * └────────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Feature highlights with benefits
 * - Pricing page CTAs
 * - Sign-up prompts with value props
 *
 * @example
 * ```tsx
 * <CtaChecklist
 *   heading="Get Started Today"
 *   description="Join thousands of satisfied customers."
 *   button={{ text: 'Sign Up', url: '/signup' }}
 *   items={['Free trial', '24/7 support', 'No credit card']}
 * />
 * ```
 */
declare const CtaChecklist: ({ heading, description, button, items, className, }: CtaChecklistProps) => react_jsx_runtime.JSX.Element;

/**
 * Props for CtaSplitMedia component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Split layout with content left, media right
 * - Gradient background on card
 * - Supports both image and code window display
 * - Two buttons: primary + secondary (1-2 regular buttons)
 * - **NEVER use this for install commands - use CtaCenteredCheck instead**
 * - Best for trial/signup CTAs with visual media
 *
 * **CTA Button Rules (CRITICAL):**
 * 1. Use this component for 1-2 regular buttons (primary, optional secondary)
 * 2. Use CtaCenteredCheck for npm/npx/pnpm install commands (InstallSnippet ONLY)
 * 3. NEVER mix InstallSnippet with regular buttons - they are mutually exclusive
 */
interface CtaSplitMediaProps {
    /** Small label text above heading */
    label?: string;
    /** Main heading text */
    heading?: string;
    /** Description text below heading */
    description?: string;
    /** Button configuration */
    buttons?: {
        primary?: {
            text: string;
            url: string;
        };
        secondary?: {
            text: string;
            url: string;
        };
    };
    /** Image configuration */
    image?: {
        src: string;
        alt: string;
    };
    /** Toggle between image and code window display */
    mediaType?: 'image' | 'code';
    /** Code window configuration when mediaType is 'code' */
    codeWindow?: {
        code: string;
        language: string;
    };
    /** Code window theme */
    codeTheme?: 'dark' | 'light' | 'auto';
    /** Radial gradient + glow background. Set false for a flat split-media look. @default true */
    gradient?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * CtaSplitMedia - Split CTA with gradient background and media
 *
 * **Layout:**
 * ```
 * ┌──────────────────────────────────────┐
 * │  ┌────────────────┬────────────────┐ │
 * │  │  Label         │                │ │
 * │  │  Heading       │    Image/      │ │
 * │  │  Description   │    Code        │ │
 * │  │  [Primary]     │                │ │
 * │  │  [Secondary]   │                │ │
 * │  └────────────────┴────────────────┘ │
 * └──────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Free trial signup CTAs
 * - Product launch announcements
 * - Premium feature promotions
 *
 * @example
 * ```tsx
 * <CtaSplitMedia
 *   label="Ready to get started?"
 *   heading="Start your free trial today."
 *   description="Start with a 14-day free trial. No credit card required."
 *   buttons={{
 *     primary: { text: 'Get Started', url: '/signup' },
 *     secondary: { text: 'Learn More', url: '/docs' },
 *   }}
 *   image={{ src: '/product.png', alt: 'Product screenshot' }}
 * />
 * ```
 */
declare const CtaSplitMedia: ({ label, heading, description, buttons, image, mediaType, codeWindow, codeTheme, gradient, className, }: CtaSplitMediaProps) => react_jsx_runtime.JSX.Element;

/**
 * Props for CtaCentered component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Centered layout with optional border
 * - Two variants: 'default' (bordered, muted bg) or 'minimal' (no border/bg)
 * - Two buttons: primary + secondary (1-2 regular buttons)
 * - **NEVER use this for install commands - use CtaCenteredCheck instead**
 * - Optional background pattern (rendered at 80% opacity)
 * - Best for simple, focused CTAs
 *
 * **CTA Button Rules (CRITICAL):**
 * 1. Use this component for 1-2 regular buttons (primary, optional secondary)
 * 2. Use CtaCenteredCheck for npm/npx/pnpm install commands (InstallSnippet ONLY)
 * 3. NEVER mix InstallSnippet with regular buttons - they are mutually exclusive
 */
interface CtaCenteredProps {
    /** Main heading text */
    heading?: string;
    /** Description text below heading */
    description?: string;
    /** Optional checklist items displayed horizontally with checkmarks */
    items?: string[];
    /** Button configuration */
    buttons?: {
        primary?: {
            text: string;
            url: string;
        };
        secondary?: {
            text: string;
            url: string;
        };
    };
    /** Visual variant: 'default' has border+bg, 'minimal' has no border/bg */
    variant?: 'default' | 'minimal';
    /** Optional background pattern (rendered inside card at 50% opacity) */
    background?: React.ReactNode;
    /** Additional CSS classes */
    className?: string;
}
/**
 * CtaCentered - Centered CTA with border
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────┐
 * │  ┌──────────────────────────────────┐  │
 * │  │           Heading                │  │
 * │  │          Description             │  │
 * │  │     [Primary]  [Secondary]       │  │
 * │  └──────────────────────────────────┘  │
 * └────────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Simple focused CTAs
 * - Trial signup sections
 * - Newsletter subscriptions
 *
 * @example
 * ```tsx
 * <CtaCentered
 *   heading="Start building faster"
 *   description="Try our tools with a 14-day free trial."
 *   buttons={{
 *     primary: { text: 'Get Started', url: '/signup' },
 *     secondary: { text: 'Learn More', url: '/docs' },
 *   }}
 * />
 *
 * // With background pattern
 * <CtaCentered
 *   heading="Start building faster"
 *   description="Try our tools with a 14-day free trial."
 *   background={<GridDashedTop />}
 *   buttons={{
 *     primary: { text: 'Get Started', url: '/signup' },
 *     secondary: { text: 'Learn More', url: '/docs' },
 *   }}
 * />
 * ```
 */
declare const CtaCentered: ({ heading, description, items, buttons, variant, background, className, }: CtaCenteredProps) => react_jsx_runtime.JSX.Element;

/**
 * CtaOrbiting - CTA with orbiting elements
 *
 * Features animated orbiting circles around a centered CTA.
 * Supports both avatars (for community/social) and icons (for features/tech).
 * Great for community, membership, product features, or tech stack displays.
 */
interface OrbitItem$1 {
    /** Type of orbit item */
    type: 'avatar' | 'icon';
    /** Avatar image source URL (for type: 'avatar') */
    src?: string;
    /** Fallback text/initials (for type: 'avatar') */
    fallback?: string;
    /** Icon element (for type: 'icon') */
    icon?: ReactNode;
    /** Alt text for accessibility */
    alt?: string;
}
/**
 * Props for CtaOrbiting component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Centered layout with animated orbiting elements (avatars or icons)
 * - Single button (1 regular button)
 * - **NEVER use this for install commands - use CtaCenteredCheck instead**
 * - Best for community/membership CTAs or tech stack showcase
 * - Supports 3 orbit levels (inner, middle, outer)
 *
 * **CTA Button Rules (CRITICAL):**
 * 1. Use this component for 1 regular button
 * 2. Use CtaCenteredCheck for npm/npx/pnpm install commands (InstallSnippet ONLY)
 * 3. NEVER mix InstallSnippet with regular buttons - they are mutually exclusive
 */
interface CtaOrbitingProps {
    /** Main heading text */
    heading?: string;
    /** Description text */
    description?: string;
    /** Button configuration */
    button?: {
        text: string;
        url: string;
    };
    /** Inner orbit items (closest to center) */
    innerOrbit?: OrbitItem$1[];
    /** Middle orbit items */
    middleOrbit?: OrbitItem$1[];
    /** Outer orbit items (furthest from center) */
    outerOrbit?: OrbitItem$1[];
    className?: string;
}
declare const CtaOrbiting: ({ heading, description, button, innerOrbit, middleOrbit, outerOrbit, className, }: CtaOrbitingProps) => react_jsx_runtime.JSX.Element;

/**
 * CtaOrbitingInstall - CTA with orbiting elements and install snippet
 *
 * Features animated orbiting circles around a centered CTA with an InstallSnippet.
 * Supports both avatars (for community/social) and icons (for features/tech).
 * Great for developer tools, CLI packages, and SDK installation CTAs.
 *
 * **CRITICAL: Use this variant for ANY npm/npx/pnpm/yarn/bun install commands**
 * For regular buttons, use CtaOrbiting instead.
 */
interface OrbitItem {
    /** Type of orbit item */
    type: 'avatar' | 'icon';
    /** Avatar image source URL (for type: 'avatar') */
    src?: string;
    /** Fallback text/initials (for type: 'avatar') */
    fallback?: string;
    /** Icon element (for type: 'icon') */
    icon?: ReactNode;
    /** Alt text for accessibility */
    alt?: string;
}
type PackageManager = 'npm install' | 'npm i' | 'npx' | 'pnpm add' | 'pnpm dlx' | 'yarn add' | 'bun add' | 'bunx';
/**
 * Props for CtaOrbitingInstall component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Centered layout with animated orbiting elements (avatars or icons)
 * - Uses InstallSnippet component ONLY - NO regular buttons
 * - **CRITICAL: Use this for npm/npx/pnpm/yarn/bun install commands with orbiting animation**
 * - Best for developer tools, CLI packages, SDK installation CTAs
 * - Supports 3 orbit levels (inner, middle, outer)
 *
 * **CTA Button Rules (CRITICAL):**
 * 1. Use CtaOrbiting for 1 regular button (NOT install commands)
 * 2. Use CtaOrbitingInstall for InstallSnippet ONLY (this component)
 * 3. NEVER mix InstallSnippet with regular buttons - they are mutually exclusive
 */
interface CtaOrbitingInstallProps {
    /** Main heading text */
    heading?: string;
    /** Description text */
    description?: string;
    /** Package name for the install command (e.g., "mdxui", "@mdxui/cli") */
    package: string;
    /** Package manager command prefix. Default: "npm install" */
    command?: PackageManager;
    /** Inner orbit items (closest to center) */
    innerOrbit?: OrbitItem[];
    /** Middle orbit items */
    middleOrbit?: OrbitItem[];
    /** Outer orbit items (furthest from center) */
    outerOrbit?: OrbitItem[];
    className?: string;
}
/**
 * CtaOrbitingInstall - CTA with orbiting elements and install snippet
 *
 * **Layout:**
 * ```
 * ─────────────────────────────────────
 *         ○ ○    ○    ○ ○
 *       ○               ○
 *      ○     Heading      ○
 *     ○    Description     ○
 *      ○  [npm install x]  ○
 *       ○               ○
 *         ○ ○    ○    ○ ○
 * ─────────────────────────────────────
 * ```
 *
 * **CRITICAL: When to Use This Component:**
 * - Use for install commands with orbiting visual effect
 * - Use CtaOrbiting for regular buttons
 * - Use CtaCenteredCheck for install commands without orbiting effect
 *
 * @example
 * ```tsx
 * <CtaOrbitingInstall
 *   heading="Ship Faster with Smarter RPC"
 *   description="Stop fighting network latency."
 *   package="capnweb"
 *   command="npm install"
 * />
 * ```
 */
declare const CtaOrbitingInstall: ({ heading, description, package: packageName, command, innerOrbit, middleOrbit, outerOrbit, className, }: CtaOrbitingInstallProps) => react_jsx_runtime.JSX.Element;

/**
 * Shared props for the centered-checklist CTA.
 */
interface CtaCenteredCheckBaseProps {
    /** Main heading text */
    heading?: string;
    /** Optional description text below heading */
    description?: string;
    /** List of items to display with checkmarks (recommended: 3 items) */
    items?: string[];
    /** Optional background pattern (rendered inside card at 50% opacity) */
    background?: React.ReactNode;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Props for CtaCenteredCheck — centered CTA with horizontal checkmark list.
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Centered layout with heading, optional description, checkmark items in a row
 *   (3 across on desktop, stacked on mobile). Best for 3 items — more may wrap awkwardly.
 * - `ctaMode` selects the call-to-action row:
 *   - `'buttons'` (default): 1-2 regular buttons (primary, optional secondary)
 *   - `'install-snippet'`: copy-to-clipboard install command — **ALWAYS use this for
 *     npm/npx/pnpm/yarn/bun install instructions**
 * - The discriminated union makes mixing buttons with an install snippet impossible.
 */
type CtaCenteredCheckProps = CtaCenteredCheckBaseProps & ({
    ctaMode?: 'buttons';
    /** Primary button configuration */
    primaryButton?: {
        text: string;
        url: string;
    };
    /** Optional secondary button configuration */
    secondaryButton?: {
        text: string;
        url: string;
    };
} | {
    ctaMode: 'install-snippet';
    /** Package name for the install command (e.g., "mdxui", "@mdxui/cli") */
    package: string;
    /** Package manager command prefix. Default: "npx" */
    command?: PackageManager$1;
});
/**
 * CtaCenteredCheck - Centered CTA with horizontal checkmark list
 *
 * **Layout:**
 * ```
 * ─────────────────────────────────────
 *              Heading
 *            Description
 *    ✓ Item 1  ✓ Item 2  ✓ Item 3
 *    [Button]  /  [npx package 📋]
 * ─────────────────────────────────────
 * ```
 *
 * **Best Use Cases:**
 * - Highlighting key benefits or guarantees with a closing CTA
 * - Trust indicators (MIT licensed, Production ready, etc.)
 * - Developer onboarding / npm quick-start CTAs (`ctaMode="install-snippet"`)
 *
 * @example
 * ```tsx
 * <CtaCenteredCheck
 *   heading="Get Started in Seconds"
 *   items={['Open source', 'MIT licensed', 'Production ready']}
 *   primaryButton={{ text: 'Get Started', url: '/signup' }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <CtaCenteredCheck
 *   ctaMode="install-snippet"
 *   heading="Install the CLI"
 *   package="@mdxui/cli"
 *   command="npm install"
 * />
 * ```
 */
declare function CtaCenteredCheck(props: CtaCenteredCheckProps): react_jsx_runtime.JSX.Element;

/**
 * Variant mapping from mdxui CTA variants to vendor block components.
 * Both split-media variants render CtaSplitMedia; the gradient backdrop is toggled
 * via the `gradient` prop rather than a separate component.
 */
declare const CTA_VARIANT_MAP: {
    readonly 'split-media': "CtaSplitMedia";
    readonly 'split-media-gradient': "CtaSplitMedia";
};
type CtaVariant = keyof typeof CTA_VARIANT_MAP;
/**
 * Vendor CtaSplitMedia props (split with media; gradient optional)
 */
interface CtaSplitMediaMapperProps {
    label?: string;
    heading?: string;
    description?: string;
    buttons?: {
        primary?: {
            text: string;
            url: string;
        };
        secondary?: {
            text: string;
            url: string;
        };
    };
    image?: {
        src: string;
        alt: string;
    };
    mediaType?: 'image' | 'code';
    codeWindow?: {
        code: string;
        language: string;
    };
    codeTheme?: 'dark' | 'light' | 'auto';
    /** Radial gradient + glow background; false for a flat split-media look */
    gradient?: boolean;
    className?: string;
}
/** Extended props for CTA variants (omit variant since it's handled by the adapter) */
type CtaInputProps = Omit<CTASectionProps, 'variant'> & {
    /** CTA layout variant */
    variant?: CtaVariant;
    /** Small label text above heading (for split-media-gradient variant) */
    label?: string;
    imageSrc?: string;
    imageAlt?: string;
    mediaType?: 'image' | 'code';
    codeWindow?: {
        code: string;
        language: string;
    };
    codeTheme?: 'dark' | 'light' | 'auto';
};
/**
 * Map mdxui CTASectionProps to vendor CtaSplitMedia props. The gradient backdrop is on
 * for the 'split-media-gradient' variant and off for plain 'split-media'.
 */
declare function mapToCtaSplitMediaProps(props: CtaInputProps): CtaSplitMediaMapperProps;
/**
 * Map mdxui CTASectionProps to the appropriate vendor props based on variant.
 * Both variants resolve to CtaSplitMedia (gradient on/off handled in the mapped props).
 */
declare function mapCtaSectionProps(props: CtaInputProps): {
    variant: (typeof CTA_VARIANT_MAP)[CtaVariant];
    props: CtaSplitMediaMapperProps;
};

/** Individual feature item (used by grid, split, showcase, sticky variants) */
interface FeatureItem$2 {
    title: string;
    description: string;
    icon?: ReactNode;
    /** Image for showcase cards */
    image?: {
        src: string;
        alt: string;
    };
    /** Code for showcase cards */
    code?: string;
    language?: string;
    /** Bullet points for showcase cards */
    bullets?: string[];
    /** Optional button */
    button?: {
        text: string;
        url: string;
    };
    /** Optional "Learn more" link */
    learnMore?: {
        text: string;
        url: string;
    };
}
/** Code window configuration */
interface CodeWindowConfig$1 {
    code: string;
    language: string;
    filename?: string;
}
/** Button configuration */
interface ButtonConfig {
    text: string;
    url: string;
    variant?: 'default' | 'outline' | 'secondary' | 'ghost';
}
/** Learn more link configuration */
interface LearnMoreConfig {
    text: string;
    url: string;
}
/** Content block (used by gallery / feature-29 variant) */
interface ContentBlock {
    label?: string;
    heading: string;
    description: string;
    learnMore?: LearnMoreConfig;
}
/** Code card (used by code-cards / feature-28 variant) */
interface CodeCard {
    badge?: string;
    heading: string;
    description: string;
    learnMore?: LearnMoreConfig;
    code: {
        code: string;
        language: string;
    };
}
/** Code tab item (used by code-tabs variant) */
interface CodeTabItem {
    label: string;
    icon?: ReactNode;
    title: string;
    description: string;
    bullets?: string[];
    code?: {
        code: string;
        language: string;
        filename?: string;
    };
    button?: {
        text: string;
        url: string;
    };
}
interface FeaturesBaseProps {
    /** Main headline (plain text) */
    title?: string;
    /** Supporting description. Supports Markdown — bold, italic, `inline code`, [links](url), lists. */
    description?: string;
    /** Additional class name */
    className?: string;
}
/** Features array mixin (grid, split, showcase, sticky variants) */
interface FeaturesArrayProps {
    features?: FeatureItem$2[];
}
/** Media mixin (split variants with image/code support) */
interface FeaturesMediaProps {
    /** Image source and alt */
    image?: {
        src: string;
        alt: string;
    };
    /** Display image or code window. @default 'image' */
    mediaType?: 'image' | 'code';
    /** Code window content (when mediaType is 'code') */
    codeWindow?: CodeWindowConfig$1;
}
/** Button mixin (split variants with button/learn-more CTAs) */
interface FeaturesButtonProps {
    /** Secondary button */
    button?: ButtonConfig;
    /** Ghost "Learn more" link */
    learnMore?: LearnMoreConfig;
}
/** 3-column centered grid with icons */
interface FeaturesGridProps extends FeaturesBaseProps, FeaturesArrayProps {
    variant: 'grid';
    /** Number of columns (2 or 3). @default 3 */
    columns?: 2 | 3;
}
/** Split layout — content left, image/code right */
interface FeaturesRightProps extends FeaturesBaseProps, FeaturesArrayProps, FeaturesMediaProps, FeaturesButtonProps {
    variant: 'right';
}
/** Split layout — image/code left, content right */
interface FeaturesLeftProps extends FeaturesBaseProps, FeaturesArrayProps, FeaturesMediaProps, FeaturesButtonProps {
    variant: 'left';
}
/** Numbered showcase cards with images/code and bullet points */
interface FeaturesShowcaseProps extends FeaturesBaseProps, FeaturesArrayProps {
    variant: 'showcase';
    /** Toggle between image and code window display. @default 'image' */
    mediaType?: 'image' | 'code';
}
/** Sticky header with scrolling feature cards */
interface FeaturesStickyProps extends FeaturesBaseProps, FeaturesArrayProps {
    variant: 'sticky';
}
/** 2x2 gallery grid with stacked code windows and text content blocks */
interface FeaturesGalleryProps extends FeaturesBaseProps {
    variant: 'gallery';
    /** Left content block (below stacked code) */
    content1?: ContentBlock;
    /** Right content block (below tall code) */
    content2?: ContentBlock;
    /** Two stacked code windows (left column) */
    stackedCode?: {
        top: {
            code: string;
            language: string;
        };
        bottom: {
            code: string;
            language: string;
        };
    };
    /** Single tall code window (right column) */
    tallCode?: {
        code: string;
        language: string;
    };
}
/** Grid with code windows and text content (2 or 4 columns) */
interface FeaturesCodeCardsProps extends FeaturesBaseProps {
    variant: 'code-cards';
    /** Small label above heading */
    label?: string;
    /** Number of columns (2 or 4). @default 2 */
    columns?: 2 | 4;
    /** Array of code cards */
    cards?: CodeCard[];
}
/** Split layout — content left, code right with gradient overlay */
interface FeaturesSplitCodeProps extends FeaturesBaseProps {
    variant: 'split-code';
    /** Feature bullet items (plain strings with check icons) */
    features?: string[];
    /** Primary action button */
    primaryButton?: ButtonConfig;
    /** Secondary action button */
    secondaryButton?: ButtonConfig;
    /** Button position relative to features list. @default 'below' */
    buttonPosition?: 'above' | 'below';
    /** Code to display */
    code?: {
        code: string;
        language: string;
    };
}
/** Stats row with 3-4 metric items */
interface FeaturesStatsProps extends FeaturesBaseProps {
    variant: 'stats';
    /** Stat items (3-4 recommended) */
    stats?: {
        value: string;
        label: string;
    }[];
}
/** Single code card with muted background, heading, description, and buttons */
interface FeaturesCodeCardSingleProps extends FeaturesBaseProps {
    variant: 'code-card-single';
    /** Code window configuration */
    codeCard?: {
        code: string;
        language: string;
    };
    /** Primary button */
    primaryButton?: ButtonConfig;
    /** Secondary button */
    secondaryButton?: ButtonConfig;
    /** Install snippet (mutually exclusive with buttons) */
    installSnippet?: {
        package: string;
        command?: 'npm install' | 'npm i' | 'npx' | 'pnpm add' | 'pnpm dlx' | 'yarn add' | 'bun add' | 'bunx';
    };
}
/** Tab-based feature switcher with code windows per tab */
interface FeaturesCodeTabsProps extends FeaturesBaseProps {
    variant: 'code-tabs';
    /** Array of tab items (2-5 recommended) */
    tabs?: CodeTabItem[];
}
type FeaturesProps = FeaturesGridProps | FeaturesRightProps | FeaturesLeftProps | FeaturesShowcaseProps | FeaturesStickyProps | FeaturesGalleryProps | FeaturesCodeCardsProps | FeaturesSplitCodeProps | FeaturesStatsProps | FeaturesCodeCardSingleProps | FeaturesCodeTabsProps;
type FeaturesVariant = FeaturesProps['variant'];

/**
 * Features - Adaptive features section component
 *
 * Routes to the appropriate variant component based on the `variant` discriminant.
 * Each case performs minimal inline transforms to bridge between the CMS-facing
 * FeaturesProps interface and the internal component props.
 *
 * @example
 * ```tsx
 * // Grid layout
 * <Features
 *   variant="grid"
 *   title="Our Features"
 *   features={[
 *     { title: 'Fast', description: 'Lightning quick' },
 *     { title: 'Secure', description: 'Bank-level security' },
 *   ]}
 * />
 *
 * // Split layout with image
 * <Features
 *   variant="right"
 *   title="Platform Features"
 *   description="Everything you need"
 *   features={features}
 *   image={{ src: '/image.png', alt: 'Feature image' }}
 * />
 * ```
 */
declare function Features(props: FeaturesProps): React__default.ReactElement | null;

interface FeaturesStickyHighlightsHighlight {
    text: string;
}
interface FeaturesStickyHighlightsFeature {
    icon?: ReactNode;
    title: string;
    description: string;
    link?: {
        text: string;
        url: string;
    };
}
interface FeaturesStickyHighlightsProps {
    /** Badge text */
    badge?: string;
    /** Section heading */
    heading?: string;
    /** Section description */
    description?: string;
    /** Highlight items with checkmarks */
    highlights?: FeaturesStickyHighlightsHighlight[];
    /** Feature cards */
    features?: FeaturesStickyHighlightsFeature[];
    className?: string;
}
/**
 * FeaturesStickyHighlights - Sticky header with highlights and scrolling feature cards
 *
 * Split layout with heading, description, and checkmark highlights sticky on left (lg screens)
 * and scrolling feature cards with icons on right.
 */
declare const FeaturesStickyHighlights: ({ badge, heading, description, highlights, features, className, }: FeaturesStickyHighlightsProps) => react_jsx_runtime.JSX.Element;

/**
 * Agent definition for FeaturesAgentCards
 */
interface FeaturesAgentCardsAgent {
    /** Agent name */
    name: string;
    /** Agent avatar image */
    image: {
        src: string;
        alt: string;
    };
    /** Agent role - displayed as a badge (e.g., "Product", "Engineering") */
    role: string;
    /** Agent description */
    description: string;
    /** Optional learn more link */
    link?: {
        text: string;
        url: string;
    };
}
interface FeaturesAgentCardsHighlight {
    /** Highlight text - supports Markdown (bold, code, links) */
    text: string;
}
/**
 * Props for FeaturesAgentCards component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - This component displays AI agent profiles in scrolling cards
 * - Each agent needs an avatar image (circular, 48-64px)
 * - The role prop becomes a colored badge above the description
 * - Best for 4-6 agents to balance the scrolling area with sticky content
 * - Avatar images should be provided at `/avatars/{Name}.png` path
 */
interface FeaturesAgentCardsProps {
    /** Badge text displayed above heading */
    badge?: string;
    /** Section heading */
    heading: string;
    /** Section description */
    description?: string;
    /** Highlight items with checkmarks on sticky side. Supports Markdown (bold, code, links). */
    highlights?: FeaturesAgentCardsHighlight[];
    /** Agent profile cards */
    agents: FeaturesAgentCardsAgent[];
    /** Optional CTA button on the left side */
    cta?: {
        text: string;
        url: string;
    };
    /** Additional class names */
    className?: string;
}
/**
 * FeaturesAgentCards - Sticky header with scrolling AI agent profile cards
 *
 * **Layout:**
 * ```
 * ┌─────────────────────┬──────────────────────┐
 * │                     │   ┌──────────────┐   │
 * │  Badge              │   │   Avatar     │   │
 * │  Heading            │   │    Name      │   │
 * │  Description        │   │   [Badge]    │   │
 * │                     │   │ Description  │   │
 * │  [sticky on lg]     │   │  [Link →]    │   │
 * │                     │   └──────────────┘   │
 * │  ✓ Highlight 1      │                      │
 * │  ✓ Highlight 2      │   ┌──────────────┐   │
 * │  ✓ Highlight 3      │   │   Avatar     │   │
 * │                     │   │    ...       │   │
 * │                     │   └──────────────┘   │
 * └─────────────────────┴──────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - AI agent team showcase pages
 * - Staff/team directory with profile cards
 * - Expert profiles with specializations
 *
 * @example
 * ```tsx
 * <FeaturesAgentCards
 *   badge="The Team"
 *   heading="Meet Your AI Agents"
 *   description="Six specialized agents, full stack coverage."
 *   highlights={[
 *     { text: 'Real GitHub identities' },
 *     { text: 'Natural language API' },
 *   ]}
 *   agents={[
 *     {
 *       name: 'Priya',
 *       image: { src: '/avatars/Priya.png', alt: 'Priya' },
 *       role: 'Product',
 *       description: 'Specs, roadmaps, priorities.',
 *       link: { text: 'Learn more', url: '/agents/priya' },
 *     },
 *   ]}
 * />
 * ```
 */
declare const FeaturesAgentCards: ({ badge, heading, description, highlights, agents, cta, className, }: FeaturesAgentCardsProps) => react_jsx_runtime.JSX.Element;

interface FeaturesAgentFlowProps {
    title?: string;
    description?: string;
    /** AI agent avatar */
    agent?: {
        name: string;
        avatar?: string;
    };
    /** Integration icon (Iconify name or URL) */
    integrationIcon?: string;
    /** Code to display in the code window */
    code?: string;
    /** Programming language for syntax highlighting */
    language?: string;
    className?: string;
}
/**
 * FeaturesAgentFlow - AI agent capability showcase
 *
 * Shows a single AI agent connecting to a provider (e.g., GitHub) via an
 * animated connection line, with a code window demonstrating it in action.
 *
 * Best for: AI/automation landing pages, developer tools (Services/Agents dialect)
 */
declare function FeaturesAgentFlow({ title, description, agent, integrationIcon, code, language, className, }: FeaturesAgentFlowProps): react_jsx_runtime.JSX.Element;

interface FeaturesAgentTeamMember {
    name: string;
    avatar: string;
}
interface FeaturesAgentTeamProps {
    title?: string;
    description?: string;
    /** AI agent avatars to orbit around the integration */
    agents?: FeaturesAgentTeamMember[];
    /** Integration icon (Iconify name or URL) */
    integrationIcon?: string;
    /** Code to display in the code window */
    code?: string;
    /** Programming language for syntax highlighting */
    language?: string;
    /** Orbit radius in pixels */
    orbitRadius?: number;
    /** Orbit speed multiplier */
    orbitSpeed?: number;
    className?: string;
}
/**
 * FeaturesAgentTeam - AI agent team capability showcase
 *
 * Shows multiple AI agents orbiting a central provider (e.g., GitHub),
 * demonstrating team collaboration with a code window.
 *
 * Best for: AI team/swarm landing pages, multi-agent orchestration (Services/Agents dialect)
 */
declare function FeaturesAgentTeam({ title, description, agents, integrationIcon, code, language, orbitRadius, orbitSpeed, className, }: FeaturesAgentTeamProps): react_jsx_runtime.JSX.Element;

interface FeaturesSplitProps {
    /**
     * Media position on desktop.
     * - `'right'` (default): content left, image/code right.
     * - `'left'`: image/code left, content right.
     * @default 'right'
     */
    position?: 'left' | 'right';
    heading?: string;
    description?: string;
    /** Feature list with checkmarks — recommended: exactly 3 items */
    features?: Array<{
        icon?: ReactNode;
        text: string;
    }>;
    /** Secondary button below the feature list */
    button?: {
        text: string;
        url: string;
    };
    /** Optional ghost "Learn more" link below features or buttons */
    learnMore?: {
        text: string;
        url: string;
    };
    image?: {
        src: string;
        alt: string;
    };
    mediaType?: 'image' | 'code';
    codeWindow?: {
        code: string;
        language: string;
        filename?: string;
    };
    className?: string;
}
/**
 * FeaturesSplit - Two-column feature section with media on one side.
 *
 * One prop-driven component covering both split directions (formerly FeaturesSplit-right /
 * FeaturesSplit-left): `position="right"` puts the media on the right (content left),
 * `position="left"` mirrors it. The content always stacks above the media on
 * mobile; the columns swap on desktop.
 */
declare const FeaturesSplit: ({ position, heading, description, features, button, learnMore, image, mediaType, codeWindow, className, }: FeaturesSplitProps) => react_jsx_runtime.JSX.Element;

/**
 * Props for FeaturesShowcaseIcons component
 *
 * @remarks
 * **CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Each feature MUST have an `icon` prop (React element)
 * - Icons should be from react-icons (Lu* icons recommended)
 * - Supports 1-5 feature steps
 * - Each step supports image or code window display
 * - Best for step-by-step workflows with distinct icons per step
 */
interface FeaturesShowcaseIconsProps {
    /** Section heading */
    heading?: string;
    /** Section description */
    description?: string;
    /** Array of feature steps with icons (supports 1-5 steps) */
    features?: Array<{
        /** Icon element to display (required) */
        icon: ReactNode;
        title: string;
        description: string;
        /** Bullet points - shown when button is not provided */
        bullets?: string[];
        /** Secondary button - replaces bullets when provided */
        button?: {
            text: string;
            url: string;
        };
        /** Optional ghost "Learn more" link below bullets or buttons */
        learnMore?: {
            text: string;
            url: string;
        };
        image?: {
            src: string;
            alt: string;
        };
        codeWindow?: {
            code: string;
            language: string;
            filename?: string;
        };
    }>;
    /** Toggle between image and code window display */
    mediaType?: 'image' | 'code';
    className?: string;
}
/**
 * FeaturesShowcaseIcons - Feature showcase cards with icons instead of numbers
 *
 * Similar to FeaturesShowcase but uses custom icons instead of numbered indicators.
 * Each step displays an icon in a rounded badge, making it ideal for
 * showcasing workflows where each step has a distinct visual identity.
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────────┐
 * │  [Icon]                      ┌──────────┐  │
 * │  Title                       │  Image   │  │
 * │  Description                 │    or    │  │
 * │  - Bullet 1                  │   Code   │  │
 * │  - Bullet 2                  └──────────┘  │
 * │  [Button] [Learn more]                     │
 * └────────────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Step-by-step tutorials with distinct actions
 * - Feature showcases where icons convey meaning
 * - Installation/setup guides with visual indicators
 *
 * @example
 * ```tsx
 * import { Download, Code, Rocket } from 'lucide-react'
 *
 * <FeaturesShowcaseIcons
 *   heading="Get Started"
 *   features={[
 *     { icon: <Download />, title: 'Install', description: '...' },
 *     { icon: <Code />, title: 'Configure', description: '...' },
 *     { icon: <Rocket />, title: 'Deploy', description: '...' },
 *   ]}
 * />
 * ```
 */
declare const FeaturesShowcaseIcons: ({ features, heading, description: sectionDescription, mediaType, className, }: FeaturesShowcaseIconsProps) => react_jsx_runtime.JSX.Element;

interface CarouselFeature {
    title: string;
    /** Feature description - supports Markdown (inline code, links, bold, etc.) */
    description: string;
    /** Optional button below description */
    button?: {
        text: string;
        url: string;
    };
    /** Display type for this slide */
    mediaType?: 'image' | 'code';
    /** Image configuration (used when mediaType is 'image') */
    image?: {
        src: string;
        alt: string;
    };
    /** Code window configuration (used when mediaType is 'code') */
    codeWindow?: {
        code: string;
        language: string;
        filename?: string;
    };
}
/**
 * FeaturesCarousel block props (carousel feature showcase)
 *
 * @remarks
 * **CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Carousel layout with prev/next navigation
 * - Each slide has title, description, and either image or code window
 * - Media fills right side of slide
 * - Each slide can independently be image or code
 * - Best with 3-5 features for good carousel experience
 * - Muted background on each slide
 * - Optional section heading and description above carousel
 *
 * **Markdown Support in Feature Descriptions:**
 * - `**bold**` for emphasis
 * - `\`inline code\`` for code snippets
 * - `- item` for bullet lists
 * - `[text](url)` for links
 * - `\n\n` for paragraph breaks
 */
interface FeaturesCarouselProps {
    /** Optional section heading above carousel */
    heading?: string;
    /** Optional section description below heading */
    description?: string;
    /** Feature items to display in carousel */
    features?: CarouselFeature[];
    /** Code window theme (applies to all code slides) */
    codeTheme?: 'dark' | 'light' | 'auto';
    className?: string;
}
declare const FeaturesCarousel: ({ heading, description, features, codeTheme, className, }: FeaturesCarouselProps) => react_jsx_runtime.JSX.Element;

interface StatsProps {
    /** Optional heading displayed above stats */
    heading?: string;
    /** Optional description displayed below heading */
    description?: string;
    stats: {
        value: string;
        label: string;
    }[];
    className?: string;
}
declare function Stats({ heading, description, stats, className }: StatsProps): react_jsx_runtime.JSX.Element | null;

/**
 * Performance - Split layout with text left, stats grid right
 *
 * Features:
 * - Two-tone heading support (main text + accent text)
 * - Stats grid with semi-transparent cards
 * - Labels in primary/accent color
 * - Responsive: stacks on mobile, side-by-side on desktop
 */
interface PerformanceStat {
    /** Large value displayed prominently (e.g., "100K-500K", "90%") */
    value: string;
    /** Small label below value (e.g., "TPS", "Latency") */
    label: string;
}
interface PerformanceProps {
    /** Main heading text */
    heading?: string;
    /** Accent-colored heading text (displayed after main heading) */
    headingAccent?: string;
    /** Description paragraph */
    description?: string;
    /** Stats to display in the grid */
    stats?: PerformanceStat[];
    /** Optional className for the section */
    className?: string;
}
declare const Performance: ({ heading, headingAccent, description, stats, className, }: PerformanceProps) => react_jsx_runtime.JSX.Element;

interface FeatureItem$1 {
    icon: ReactNode;
    title: string;
    /** Feature description - supports Markdown (bold, code, links) */
    description: string;
}
/**
 * FeaturesRow - Horizontal row of features with icon + title + description
 *
 * **Layout:**
 * ```
 * ┌──────────────────────────────────────────────────────────────────┐
 * │ [icon] Title    │ [icon] Title    │ [icon] Title    │ [icon] Title │
 * │ Description...  │ Description...  │ Description...  │ Description..│
 * └──────────────────────────────────────────────────────────────────┘
 * │                        border-b                                   │
 * ```
 *
 * **CONSTRAINTS:**
 * - Simple horizontal layout with icon + title + description
 * - Supports any number of features (3, 4, 6, etc.)
 * - Responsive: 1 col mobile, 2 cols tablet, configurable desktop columns
 * - Border bottom for visual separation
 * - No header section - just the feature items
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Icons should be consistent size (h-5 w-5)
 * - Best with 3, 4, or 6 items for balanced layout
 * - Columns prop controls desktop layout (3 or 4 columns)
 */
interface FeaturesRowProps {
    /** Feature items with icon, title, and description */
    features?: FeatureItem$1[];
    /** Number of columns on desktop (default: 4) */
    columns?: 3 | 4;
    className?: string;
}
declare const FeaturesRow: ({ features, columns, className, }: FeaturesRowProps) => react_jsx_runtime.JSX.Element;

/**
 * FeaturesTimeline - Single row 3-column grid with gradient divider lines
 *
 * **Layout:**
 * ```
 * ┌─────────────────────────────────────────────┐
 * │            Centered Section Title            │
 * │            Description text                  │
 * ├─────────────┼─────────────┼─────────────────┤
 * │  [icon]     │  [icon]     │   [icon]        │
 * │   Title     │   Title     │    Title        │
 * │   Desc      │   Desc      │    Desc         │
 * └─────────────┴─────────────┴─────────────────┘
 * ```
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Requires exactly 3 features for single row layout
 * - Each feature needs `icon`, `title`, and `description`
 * - Icons constrained to size-5 (20px) in size-10 (40px) circular background
 * - Best used for highlighting top 3 features or key differentiators
 */
interface FeaturesTimelineFeature {
    icon: ReactNode;
    title: string;
    /** Feature description - supports Markdown (bold, code, links) */
    description: string;
}
interface FeaturesTimelineProps {
    /** Section heading - centered above grid */
    heading?: string;
    /** Section description - centered below heading */
    description?: string;
    /** Feature items - requires 3 for single row layout */
    features?: FeaturesTimelineFeature[];
    className?: string;
}
/**
 * FeaturesTimeline - Feature grid with gradient divider lines (single row, 3 columns)
 *
 * @example
 * ```tsx
 * <FeaturesTimeline
 *   heading="Why Choose Us"
 *   description="Three reasons to get started today"
 *   features={[
 *     { icon: <Zap />, title: 'Fast', description: 'Speed optimized' },
 *     { icon: <Shield />, title: 'Secure', description: 'Enterprise security' },
 *     { icon: <Gauge />, title: 'Scalable', description: 'Grows with you' },
 *   ]}
 * />
 * ```
 */
declare const FeaturesTimeline: ({ heading, description, features, className, }: FeaturesTimelineProps) => react_jsx_runtime.JSX.Element;

/**
 * FeaturesDividers - 3x2 grid with gradient divider lines between cells
 *
 * **Layout:**
 * ```
 * ┌─────────────────────────────────────────────┐
 * │            Centered Section Title            │
 * │            Description text                  │
 * ├─────────────┼─────────────┼─────────────────┤
 * │  [icon]     │  [icon]     │   [icon]        │
 * │   Title     │   Title     │    Title        │
 * │   Desc      │   Desc      │    Desc         │
 * ├─────────────┼─────────────┼─────────────────┤
 * │  [icon]     │  [icon]     │   [icon]        │
 * │   Title     │   Title     │    Title        │
 * │   Desc      │   Desc      │    Desc         │
 * └─────────────┴─────────────┴─────────────────┘
 * ```
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Requires exactly 6 features for balanced 3x2 layout on desktop
 * - Each feature needs `icon`, `title`, and `description`
 * - Icons constrained to size-5 (20px) in size-10 (40px) circular background
 * - Best used for comprehensive feature overviews
 */
interface FeaturesDividersFeature {
    icon: ReactNode;
    title: string;
    /** Feature description - supports Markdown (bold, code, links) */
    description: string;
}
interface FeaturesDividersProps {
    /** Section heading - centered above grid */
    heading?: string;
    /** Section description - centered below heading */
    description?: string;
    /** Feature items - requires 6 for balanced 3x2 grid */
    features?: FeaturesDividersFeature[];
    className?: string;
}
/**
 * FeaturesDividers - Feature grid with gradient divider lines (3x2 layout)
 *
 * @example
 * ```tsx
 * <FeaturesDividers
 *   heading="Everything You Need"
 *   description="All the tools to build amazing products"
 *   features={[
 *     { icon: <Zap />, title: 'Fast', description: 'Speed optimized' },
 *     // ... 5 more features
 *   ]}
 * />
 * ```
 */
declare const FeaturesDividers: ({ heading, description, features, className, }: FeaturesDividersProps) => react_jsx_runtime.JSX.Element;

/**
 * FeaturesGrid - 3-column grid layout with icons
 * Maps to FeaturesGrid component
 */
declare function FeaturesGrid(props: Omit<FeaturesGridProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesRight - Split layout with content left, image/code right
 * (FeaturesSplit position="right")
 */
declare function FeaturesRight(props: Omit<FeaturesRightProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesLeft - Split layout with image/code left, content right
 * (FeaturesSplit position="left")
 */
declare function FeaturesLeft(props: Omit<FeaturesLeftProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesShowcase - Numbered showcase cards with images and bullet points
 * Maps to FeaturesShowcase from shadcnblocks
 */
declare function FeaturesShowcase(props: Omit<FeaturesShowcaseProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesSticky - Sticky header with scrolling feature cards
 * Maps to FeaturesSticky from shadcnblocks
 */
declare function FeaturesSticky(props: Omit<FeaturesStickyProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesGallery - 2x2 grid with stacked images and text content blocks
 * Maps to FeaturesGallery from shadcnblocks
 */
declare function FeaturesGallery(props: Omit<FeaturesGalleryProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesCodeCards - 2-column grid with borderless code windows and text content
 * Maps to FeaturesCodeCards from shadcnblocks
 */
declare function FeaturesCodeCards(props: Omit<FeaturesCodeCardsProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesSplitCode - Split layout with content left, code window right with gradient overlay
 * Maps to FeaturesSplitCode from shadcnblocks
 */
declare function FeaturesSplitCode(props: Omit<FeaturesSplitCodeProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesStats - Stats row with 3-4 metric items
 * Maps to Stats component
 */
declare function FeaturesStats(props: Omit<FeaturesStatsProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesCodeTabs - Tab-based feature switcher with code windows per tab
 * Maps to FeaturesCodeTabs component
 */
declare function FeaturesCodeTabs(props: Omit<FeaturesCodeTabsProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * FeaturesCodeCardSingle - Single code card with muted background
 * Maps to FeaturesCodeCardSingle component
 */
declare function FeaturesCodeCardSingle(props: Omit<FeaturesCodeCardSingleProps, 'variant'>): react_jsx_runtime.JSX.Element;

interface FooterMediumProps {
    /** Logo as image object (with optional title for icon+text), or plain string text */
    logo?: {
        url: string;
        src: string;
        alt: string;
        /** Optional text displayed next to the logo image */
        title?: string;
    } | string;
    className?: string;
    sections?: Array<{
        title: string;
        links: Array<{
            name: string;
            href: string;
        }>;
    }>;
    description?: string;
    socialLinks?: Array<{
        icon: ReactNode;
        href: string;
        label: string;
    }>;
    /** Domain name for copyright (e.g., "dotdo.ai") */
    domain?: string;
    legalLinks?: Array<{
        name: string;
        href: string;
    }>;
    /** Show email capture form */
    showEmailCapture?: boolean;
    /** Email capture placeholder */
    emailPlaceholder?: string;
    /** Email capture button text */
    emailButtonText?: string;
    /** Email capture submit handler */
    onEmailSubmit?: (email: string) => void | Promise<void>;
    /** Email capture subcopy (e.g., privacy policy notice) */
    emailSubcopy?: ReactNode;
    /** Show "Open in AI" feature next to social icons */
    showOpenInAI?: boolean;
    /** OpenInAI variant: 'icons' shows all AI platform icons, 'dropdown' shows a single button */
    openInAIVariant?: 'icons' | 'dropdown';
    /** OpenInAI actions for icons variant */
    openInAIActions?: OpenInAIAction[];
    /** OpenInAI default prompt for dropdown variant */
    openInAIDefaultPrompt?: string;
    /** OpenInAI platforms to show */
    openInAIPlatforms?: OpenInAIPlatform[];
    /** Page title for OpenInAI context */
    pageTitle?: string;
}
declare const FooterMedium: ({ logo, sections, description, socialLinks, domain, legalLinks, showEmailCapture, emailPlaceholder, emailButtonText, onEmailSubmit, emailSubcopy, showOpenInAI, openInAIVariant, openInAIActions, openInAIDefaultPrompt, openInAIPlatforms, pageTitle, className, }: FooterMediumProps) => react_jsx_runtime.JSX.Element;

interface FooterLargeProps {
    /** Logo as image object (with optional title for icon+text), or plain string text */
    logo?: {
        url: string;
        src: string;
        alt: string;
        /** Optional text displayed next to the logo image */
        title?: string;
    } | string;
    className?: string;
    sections?: Array<{
        title: string;
        links: Array<{
            name: string;
            href: string;
        }>;
    }>;
    socialLinks?: Array<{
        icon: ReactNode;
        href: string;
        label: string;
    }>;
    /** Domain name for copyright (e.g., "dotdo.ai") */
    domain?: string;
    legalLinks?: Array<{
        name: string;
        href: string;
    }>;
    /** Show email capture form */
    showEmailCapture?: boolean;
    /** Email capture placeholder */
    emailPlaceholder?: string;
    /** Email capture button text */
    emailButtonText?: string;
    /** Email capture submit handler */
    onEmailSubmit?: (email: string) => void | Promise<void>;
    /** Email capture subcopy (e.g., privacy policy notice) */
    emailSubcopy?: ReactNode;
    /** Show "Open in AI" feature next to social icons */
    showOpenInAI?: boolean;
    /** OpenInAI variant: 'icons' shows all AI platform icons, 'dropdown' shows a single button */
    openInAIVariant?: 'icons' | 'dropdown';
    /** OpenInAI actions for icons variant */
    openInAIActions?: OpenInAIAction[];
    /** OpenInAI default prompt for dropdown variant */
    openInAIDefaultPrompt?: string;
    /** OpenInAI platforms to show */
    openInAIPlatforms?: OpenInAIPlatform[];
    /** Page title for OpenInAI context */
    pageTitle?: string;
}
declare const FooterLarge: ({ logo, sections, socialLinks, domain, legalLinks, showEmailCapture, emailPlaceholder, emailButtonText, onEmailSubmit, emailSubcopy, showOpenInAI, openInAIVariant, openInAIActions, openInAIDefaultPrompt, openInAIPlatforms, pageTitle, className, }: FooterLargeProps) => react_jsx_runtime.JSX.Element;

interface FooterSmallProps {
    /** Logo as image object (with optional title for icon+text), or plain string text */
    logo?: {
        url: string;
        src: string;
        alt: string;
        /** Optional text displayed next to the logo image */
        title?: string;
    } | string;
    className?: string;
    /** Navigation links (e.g., Docs, API, CLI) */
    links?: Array<{
        name: string;
        href: string;
    }>;
    socialLinks?: Array<{
        icon: ReactNode;
        href: string;
        label: string;
    }>;
    /** Domain name for copyright (e.g., "dotdo.ai") */
    domain?: string;
    legalLinks?: Array<{
        name: string;
        href: string;
    }>;
    /** Show "Open in AI" feature next to social icons */
    showOpenInAI?: boolean;
    /** OpenInAI variant: 'icons' shows all AI platform icons, 'dropdown' shows a single button */
    openInAIVariant?: 'icons' | 'dropdown';
    /** OpenInAI actions for icons variant */
    openInAIActions?: OpenInAIAction[];
    /** OpenInAI default prompt for dropdown variant */
    openInAIDefaultPrompt?: string;
    /** OpenInAI platforms to show */
    openInAIPlatforms?: OpenInAIPlatform[];
    /** Page title for OpenInAI context */
    pageTitle?: string;
}
declare const FooterSmall: ({ logo, links, socialLinks, domain, legalLinks, showOpenInAI, openInAIVariant, openInAIActions, openInAIDefaultPrompt, openInAIPlatforms, pageTitle, className, }: FooterSmallProps) => react_jsx_runtime.JSX.Element;

type CodeTheme = 'dark' | 'light' | 'auto';
interface CodeWindowConfig {
    code: string;
    language: string;
    filename?: string;
}
interface FeatureItem {
    icon?: ReactNode;
    title: string;
    description: string;
}
interface CardContent {
    label: string;
    title: string;
    description?: string;
    link?: {
        text: string;
        url: string;
    };
}
interface InstallSnippetConfig {
    package: string;
    command?: PackageManager$1;
}
interface HeroBaseProps {
    /** Main hero headline (plain text) */
    title: string;
    /** Supporting subheadline. Supports Markdown — bold, italic, `inline code`, [links](url), lists. */
    subtitle?: string;
    /** Primary button text */
    callToAction?: string;
    /** Primary button URL */
    callToActionUrl?: string;
    /** Secondary button text */
    secondaryCallToAction?: string;
    /** Secondary button URL */
    secondaryCallToActionUrl?: string;
    /** Background pattern (GradientBlur, GridDashed, Particles, etc.) */
    background?: ReactNode;
    /** Extend behind sticky navbar. @default true */
    behindNavbar?: boolean;
    /** Additional class name */
    className?: string;
}
interface HeroMediaProps {
    /** Hero image URL */
    image?: string;
    /** Display image or code window. @default 'image' */
    mediaType?: 'image' | 'code';
    /** Code window content (when mediaType is 'code') */
    codeWindow?: CodeWindowConfig;
    /** Code window color theme. @default 'auto' */
    codeTheme?: CodeTheme;
}
/** Simple centered text with optional social proof */
interface HeroCenteredProps extends HeroBaseProps {
    variant: 'centered';
    reviews?: {
        count: number;
        avatars: {
            src: string;
            alt: string;
        }[];
        rating?: number;
    };
    socialProofPosition?: 'top' | 'bottom';
}
/** Centered with image + feature cards below */
interface HeroCenterFeaturesProps extends HeroBaseProps, HeroMediaProps {
    variant: 'center-image-features';
    badge?: string;
    showBadge?: boolean;
    features?: FeatureItem[];
    showFeatures?: boolean;
    installSnippet?: InstallSnippetConfig;
}
/** Centered with dual media slots (primary + secondary) */
interface HeroMediaGridProps extends HeroBaseProps {
    variant: 'image-grid';
    primaryImage?: {
        src: string;
        alt: string;
    };
    primaryMediaType?: 'image' | 'code';
    primaryCodeWindow?: CodeWindowConfig;
    secondaryImage?: {
        src: string;
        alt: string;
        ctaText?: string;
        ctaUrl?: string;
    };
    secondaryMediaType?: 'image' | 'code';
    secondaryCodeWindow?: CodeWindowConfig;
    codeTheme?: CodeTheme;
    codeShowCopy?: boolean;
    installSnippet?: InstallSnippetConfig;
}
/** Announcement banner + media below */
interface HeroCenterAnnouncementProps extends HeroBaseProps, HeroMediaProps {
    variant: 'center-announcement';
    announcement?: {
        badge?: string;
        text?: string;
        url: string;
    };
    installSnippet?: InstallSnippetConfig;
}
/** Bento grid with 3 code windows + cards */
interface HeroBentoProps extends HeroBaseProps {
    variant: 'code-bento';
    mainCard?: CardContent;
    codeWindowMain?: CodeWindowConfig;
    leftCard?: CardContent;
    codeWindowLeft?: CodeWindowConfig;
    rightCard?: CardContent;
    codeWindowRight?: CodeWindowConfig;
    codeTheme?: CodeTheme;
    installSnippet?: InstallSnippetConfig;
}
type HeroVariant = HeroProps['variant'];
type HeroProps = HeroCenteredProps | HeroCenterFeaturesProps | HeroMediaGridProps | HeroCenterAnnouncementProps | HeroBentoProps;

declare function Hero(props: HeroProps): React__default.ReactElement;

/**
 * HeroCentered - Simple centered layout with optional social proof
 * When reviews are provided, displays avatars and rating above or below the headline
 *
 * @remarks
 * **AI GENERATION NOTE:** Do NOT add social proof (reviews prop) unless the user
 * explicitly requests it. Social proof requires real customer data and should
 * only be added when the business has actual reviews/testimonials to display.
 */
declare const HeroCentered: ({ title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, reviews, socialProofPosition, background, behindNavbar, className, }: Omit<HeroCenteredProps, "variant">) => react_jsx_runtime.JSX.Element;

declare const HeroMediaGrid: ({ title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, installSnippet, primaryImage, primaryMediaType, primaryCodeWindow, secondaryImage, secondaryMediaType, secondaryCodeWindow, codeTheme, codeShowCopy, background, behindNavbar, className, }: Omit<HeroMediaGridProps, "variant">) => react_jsx_runtime.JSX.Element;

/**
 * HeroCenterAnnouncement - Centered hero with announcement badge, bottom border, and media below
 *
 * **Background prop:**
 * Use the `background` prop to render a background pattern inside the hero:
 * ```tsx
 * <HeroCenterAnnouncement
 *   title="Build Beautiful Interfaces"
 *   background={<GradientBlur />}
 * />
 * ```
 *
 * **CRITICAL LAYOUT REQUIREMENT:**
 * This component has a full-width `border-b` and uses an internal `container` class.
 * DO NOT wrap this component in a `max-w-*` container - the border will be cut off.
 */
declare const HeroCenterAnnouncement: ({ announcement, title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, installSnippet, image, mediaType, codeWindow, codeTheme, background, behindNavbar, className, }: Omit<HeroCenterAnnouncementProps, "variant">) => react_jsx_runtime.JSX.Element;

declare const HeroCenterFeatures: ({ badge, showBadge, title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, installSnippet, image, mediaType, codeWindow, codeTheme, features, showFeatures, background, behindNavbar, className, }: Omit<HeroCenterFeaturesProps, "variant">) => react_jsx_runtime.JSX.Element;

/**
 * HeroBento - Centered hero with bento grid of code windows and card content
 *
 * **Layout:**
 * ```
 * +------------------------------------+
 * |           Heading                  |
 * |         Description                |
 * |     [Primary] [Secondary]          |
 * +-----------------+------------------+
 * |   Main Card     |   Code Window    |
 * |   Content       |   (borderless)   |
 * +--------+--------+------------------+
 * |  Code  |   Right Card   |  Code    |
 * |  Left  |   Content      |  Right   |
 * +--------+----------------+----------+
 * ```
 *
 * **Best Use Cases:**
 * - Developer documentation landing pages
 * - SDK/API getting started sections
 * - Code-first product showcases
 */
declare const HeroBento: ({ title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, installSnippet, mainCard, codeWindowMain, leftCard, codeWindowLeft, rightCard, codeWindowRight, codeTheme, background, behindNavbar, className, }: Omit<HeroBentoProps, "variant">) => react_jsx_runtime.JSX.Element;

/**
 * HeroSplitCode block props (split-code hero - content left, code right with gradient overlay)
 *
 * @remarks
 * **CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Code window ONLY - no image support, NO copy button (gradient overlay covers it)
 * - Uses `theme="auto"` - code window bg uses theme variables (bg-background), not hardcoded colors
 * - CSS mask creates seamless edge fade (works in any theme)
 * - Supports primary/secondary button group above or below bullets
 * - `installSnippet` REPLACES the button group (same substitution rule as
 *   center-announcement — install IS the action; never both)
 * - Best for: hero sections showcasing code examples with feature highlights
 * - Best hero background: beams-center, spotlight-top-left, gradient-blur
 */
interface HeroSplitCodeProps {
    /** Main heading */
    title?: string;
    /** Supporting subtitle */
    subtitle?: string;
    /** Feature bullet items with check icons */
    features?: string[];
    /** Primary action button */
    primaryButton?: {
        text: string;
        url: string;
    };
    /** Secondary action button */
    secondaryButton?: {
        text: string;
        url: string;
    };
    /** Button position relative to features list */
    buttonPosition?: "above" | "below";
    /** Install snippet — REPLACES the button group when present (install is the
     *  action). Positioned by `buttonPosition` like the buttons it replaces. */
    installSnippet?: InstallSnippetConfig;
    /** Code to display */
    code?: {
        code: string;
        language: string;
    };
    /** Optional background pattern (e.g., GradientBlur, GridDashed, etc.) */
    background?: ReactNode;
    /**
     * When true, extends the hero section behind the sticky navbar.
     * Uses negative margin to pull section up, with padding to keep content visible.
     * @default true
     */
    behindNavbar?: boolean;
    className?: string;
}
declare const HeroSplitCode: ({ title, subtitle, features, primaryButton, secondaryButton, buttonPosition, installSnippet, code, background, behindNavbar, className, }: HeroSplitCodeProps) => react_jsx_runtime.JSX.Element;

/**
 * HeroSplitImage block props (split-image hero - content left, image right with outer frame)
 *
 * @remarks
 * **CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Image ONLY - no code window support
 * - Image extends beyond container on right side with outer frame
 * - Check icons (no circles) for feature bullets
 * - Supports primary/secondary button group above or below bullets
 * - Supports optional dark mode image with `darkSrc`
 * - Best for: hero sections showcasing product screenshots with feature highlights
 */
interface HeroSplitImageProps {
    /**
     * Optional eyebrow rendered inside the hero content column, above the
     * heading and WITHIN the hero's background. Use for a small role/category
     * badge so it sits on the aurora/grid instead of floating on the bare
     * page background above the hero.
     */
    eyebrow?: ReactNode;
    /** Main heading */
    title?: string;
    /** Supporting subtitle */
    subtitle?: string;
    /** Feature bullet items with check icons */
    features?: string[];
    /** Primary action button */
    primaryButton?: {
        text: string;
        url: string;
    };
    /** Secondary action button */
    secondaryButton?: {
        text: string;
        url: string;
    };
    /** Button position relative to features list */
    buttonPosition?: 'above' | 'below';
    /** Image to display (optional darkSrc for dark mode) */
    image?: {
        src: string;
        alt: string;
        /** Optional dark mode image - if provided, swaps automatically */
        darkSrc?: string;
    };
    /** Optional background pattern (e.g., GradientBlur, GridDashed, etc.) */
    background?: ReactNode;
    /**
     * When true, extends the hero section behind the sticky navbar.
     * Uses negative margin to pull section up, with padding to keep content visible.
     * @default true
     */
    behindNavbar?: boolean;
    className?: string;
}
declare const HeroSplitImage: ({ title, subtitle, features, primaryButton, secondaryButton, buttonPosition, eyebrow, image, background, behindNavbar, className, }: HeroSplitImageProps) => react_jsx_runtime.JSX.Element;

interface HeroCenterTableProps extends Omit<HeroBaseProps, 'variant'> {
    /** Column header labels */
    columns?: string[];
    /** Row data — each inner array maps to columns */
    rows?: string[][];
    /** Summary text for the floating pill at the bottom */
    summary?: string;
}
/**
 * HeroCenterTable - Centered hero with a prop-driven data table below
 */
declare const HeroCenterTable: ({ title, subtitle, callToAction, callToActionUrl, secondaryCallToAction, secondaryCallToActionUrl, columns, rows, summary, background, behindNavbar, className, }: HeroCenterTableProps) => react_jsx_runtime.JSX.Element;

interface HeroSplitTableProps {
    /** Main heading */
    title?: string;
    /** Supporting text below the heading */
    subtitle?: string;
    /** Feature bullet items with check icons */
    features?: string[];
    /** Primary action button */
    primaryButton?: {
        text: string;
        url: string;
    };
    /** Secondary action button */
    secondaryButton?: {
        text: string;
        url: string;
    };
    /** Button position relative to features list */
    buttonPosition?: "above" | "below";
    /** Column header labels */
    columns?: string[];
    /** Row data — each inner array maps to columns */
    rows?: string[][];
    /** Summary text for the floating pill at the bottom */
    summary?: string;
    /** Optional background pattern (e.g., GradientBlur, GridDashed, etc.) */
    background?: ReactNode;
    /** Extend behind sticky navbar. @default true */
    behindNavbar?: boolean;
    className?: string;
}
declare const HeroSplitTable: ({ title, subtitle, features, primaryButton, secondaryButton, buttonPosition, columns, rows, summary, background, behindNavbar, className, }: HeroSplitTableProps) => react_jsx_runtime.JSX.Element;

/**
 * Hero background RENDERER — the React layer that turns a typed, rules-checked spec
 * into rendered `background` JSX. The pure rules, types, preset menu, and legal-space
 * enumerator live in ./hero-background-spec (importable on a backend with no React).
 *
 * - `heroBackground(spec)` is the sanctioned way to set a hero `background` —
 *   never hand-write `background={<GridDashedTop />}` or stack components yourself.
 * - This file is the only place that imports background components.
 *
 * Everything from ./hero-background-spec is re-exported here so existing
 * `@mdxui/neo` barrel consumers keep importing from one place.
 */

/** THE hero-background entry point. Pass its result to a hero's `background` prop. */
declare function heroBackground(bg: SectionBackground): ReactNode;
/** Page-level grain. Render once at the layout root, NOT inside a hero (R6). */
declare function pageNoise(opts?: {
    fixed?: boolean;
}): ReactNode;

/**
 * Optional per-step code block.
 * - `type: 'code'` renders a one-line syntax-highlighted snippet.
 * - `type: 'install'` renders an interactive InstallSnippet (copy-to-clipboard).
 */
type HowItWorksStepCode = {
    type: 'code';
    code: string;
    language?: string;
} | {
    type: 'install';
    package: string;
    command?: PackageManager$1;
};
/** Single step in the simple (horizontal arrow-flow) how-it-works layout. */
interface HowItWorksSimpleStep {
    title: string;
    /** Step description — supports Markdown. Keep to ~3 lines when steps carry code. */
    description: string;
    /** Optional code or install block at the bottom of the step. Omit for a text-only step. */
    code?: HowItWorksStepCode;
}
interface HowItWorksSimpleProps {
    /** Section id for anchor links */
    id?: string;
    /** Small label above heading */
    label?: string;
    /** Section heading */
    heading?: string;
    /** Section description — supports Markdown */
    description?: string;
    /** Array of steps (3 recommended to match the 3-column layout) */
    steps?: HowItWorksSimpleStep[];
    className?: string;
}
/**
 * HowItWorksSimple — horizontal steps connected by arrows (the simple default).
 *
 * One prop-driven layout covering text-only, inline-code, and install steps
 * (formerly HowItWorks2 / HowItWorks2Code / HowItWorks2CodeInstall). Each step
 * may carry an optional `code` block (`type: 'code'` or `type: 'install'`); omit
 * it for a clean text-only step. When ANY step has code, the cards switch to the
 * aligned layout (numbered, fixed min-heights, code pinned to the bottom).
 *
 * **Layout:**
 * ```
 * ┌────────────┐  →  ┌────────────┐  →  ┌────────────┐
 * │ 01 Title   │     │ 02 Title   │     │ 03 Title   │
 * │ Desc       │     │ Desc       │     │ Desc       │
 * │ [code]     │     │ [code]     │     │ [code]     │
 * └────────────┘     └────────────┘     └────────────┘
 * ```
 *
 * @example
 * ```tsx
 * <HowItWorksSimple
 *   heading="Just 3 Steps"
 *   steps={[
 *     { title: 'Install', description: 'Add the package', code: { type: 'install', package: 'mdxui', command: 'pnpm add' } },
 *     { title: 'Import', description: 'Pull in components', code: { type: 'code', code: "import { Hero } from 'mdxui'" } },
 *     { title: 'Build', description: 'Compose your page', code: { type: 'code', code: '<Hero title="Welcome" />', language: 'tsx' } },
 *   ]}
 * />
 * ```
 */
declare const HowItWorksSimple: ({ id, label, heading, description, steps, className, }: HowItWorksSimpleProps) => react_jsx_runtime.JSX.Element;

/** Single step in the vertical (connecting-line timeline) how-it-works layout. */
interface HowItWorksVerticalStep {
    /** Step number displayed (e.g., "01", "02") */
    number: string;
    /** Step title */
    title: string;
    /** Step description — supports Markdown */
    description: string;
    /** Optional code or install block below the description. Omit for a text-only step. */
    code?: HowItWorksStepCode;
}
interface HowItWorksVerticalProps {
    /** Small label above heading */
    label?: string;
    /** Section heading */
    heading?: string;
    /** Section description — supports Markdown */
    description?: string;
    /** Array of steps (3-5 recommended) */
    steps?: HowItWorksVerticalStep[];
    className?: string;
}
/**
 * HowItWorksVertical — alternating timeline with a connecting line.
 *
 * One prop-driven layout covering text-only, inline-code, and install steps
 * (formerly HowItWorks3 / HowItWorks3Code / HowItWorks3CodeInstall). Each step
 * may carry an optional `code` block (`type: 'code'` or `type: 'install'`); omit
 * it for a text-only step. Steps stack vertically on mobile and alternate
 * left/right around a centered line on desktop.
 *
 * @example
 * ```tsx
 * <HowItWorksVertical
 *   heading="Simple steps to get started"
 *   steps={[
 *     { number: '01', title: 'Install', description: 'Add the package', code: { type: 'install', package: 'mdxui', command: 'pnpm add' } },
 *     { number: '02', title: 'Import', description: 'Pull in components', code: { type: 'code', code: "import { Hero } from 'mdxui'" } },
 *     { number: '03', title: 'Build', description: 'Compose your page' },
 *   ]}
 * />
 * ```
 */
declare const HowItWorksVertical: ({ label, heading, description, steps, className, }: HowItWorksVerticalProps) => react_jsx_runtime.JSX.Element;

/** Single step in the how-it-works flow */
interface HowItWorksCardsStep {
    /** Step number displayed as badge (e.g., "01", "02") */
    number: string;
    title: string;
    /** Step description - supports Markdown (inline code, links, bold, etc.) */
    description: string;
    code: {
        code: string;
        language: string;
    };
}
interface HowItWorksCardsProps {
    /** Section id for anchor links */
    id?: string;
    /** Badge text */
    badge?: string;
    /** Section heading */
    heading?: string;
    /** Section description */
    description?: string;
    /** Array of steps (3) */
    steps?: HowItWorksCardsStep[];
    className?: string;
}
/**
 * HowItWorksCards - Numbered steps grid with code windows
 * 3-column grid with numbered badges, titles, descriptions, and code snippets
 */
declare const HowItWorksCards: ({ id, badge, heading, description, steps, className, }: HowItWorksCardsProps) => react_jsx_runtime.JSX.Element;

/** Single step in the how-it-works flow */
interface HowItWorksLongStep {
    /** Step number displayed as badge (e.g., "01", "02") */
    number: string;
    title: string;
    /** Step description - supports Markdown (inline code, links, bold, etc.) */
    description: string;
    code: {
        code: string;
        language: string;
    };
}
interface HowItWorksLongProps {
    /** Badge text */
    badge?: string;
    /** Section heading */
    heading?: string;
    /** Section description */
    description?: string;
    /** Array of steps (typically 3-4) */
    steps?: HowItWorksLongStep[];
    className?: string;
}
/**
 * HowItWorksLong - Stacked steps with code on right
 *
 * **Use this variant when:**
 * - Code snippets are 5+ lines
 * - You need to show meaningful code context
 * - Users shouldn't have to scroll within code windows
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────────────┐
 * │ ┌─────────────────┬──────────────────────────┐ │
 * │ │ [01]            │                          │ │
 * │ │ Title           │ Code snippet (5-15 lines)│ │
 * │ │ Description     │ with syntax highlighting │ │
 * │ └─────────────────┴──────────────────────────┘ │
 * ├────────────────────────────────────────────────┤
 * │ ┌─────────────────┬──────────────────────────┐ │
 * │ │ [02]            │                          │ │
 * │ │ Title           │ Code snippet             │ │
 * │ │ Description     │                          │ │
 * │ └─────────────────┴──────────────────────────┘ │
 * └────────────────────────────────────────────────┘
 * ```
 *
 * For short 1-3 line snippets, use `HowItWorksCards` (3-column grid) instead.
 */
declare const HowItWorksLong: ({ badge, heading, description, steps, className, }: HowItWorksLongProps) => react_jsx_runtime.JSX.Element;

interface ConnectItem {
    icon: string;
    title: string;
    description: string;
    /** Connected state — `rows` layout shows Connect vs Disconnect accordingly */
    connected?: boolean;
    /** Set to true for monochrome icons that need inversion in dark mode */
    darkModeInvert?: boolean;
}
interface ConnectProps {
    title?: string;
    description?: string;
    items?: ConnectItem[];
    /**
     * Layout:
     * - `grid` (default): 4-column overview cards, no action — an "available apps" wall
     * - `rows`: vertical rows each with a Connect/Disconnect button — the account-connection flow
     */
    layout?: 'grid' | 'rows';
    /** Connect/disconnect callback (`rows` layout) */
    onConnect?: (item: ConnectItem) => void;
    className?: string;
}
/**
 * Connect - App / account connection directory
 *
 * Prop-driven layout: `grid` (overview cards) or `rows` (connect flow with
 * per-row Connect/Disconnect buttons). Built for in-product account/app
 * connection flows (e.g. Zapier/Composio), not landing-page marketing — for a
 * "works with" logo wall on a landing page use `LogosSection`.
 */
declare function Connect({ title, description, items, layout, onConnect, className, }: ConnectProps): react_jsx_runtime.JSX.Element;

/**
 * A logo item can be either an image or text string
 */
type LogoItem = {
    /** Image source URL */
    src: string;
    /** Alt text for the image */
    alt: string;
    /** Optional link URL */
    href?: string;
} | string;
/**
 * Props for LogosCarousel component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Use semantic presets: `LogosSection` (bordered) or `LogosInline` (borderless)
 * - Logos can be image objects `{ src, alt, href? }` OR text strings like `"workers.do"`
 * - Text logos render as semibold text, image logos auto-invert in dark mode
 * - Both presets accept optional `title` (h2) or `description` (uppercase mono label)
 * - LogosSection: Standalone section between blocks (Hero → Logos → Features)
 * - LogosInline: Embedded inside Hero, CTA, or other components
 */
interface LogosProps {
    /** Array of logos - can be image objects or text strings */
    logos?: LogoItem[];
    /** Optional title (h2) above the carousel */
    title?: string;
    /** Optional description - renders as small uppercase mono text */
    description?: string;
    /** Show top/bottom borders on carousel items (default: true) */
    bordered?: boolean;
    /** Additional class name */
    className?: string;
    /** Auto-scroll speed (default: 1) */
    speed?: number;
    /** Scroll direction */
    direction?: 'forward' | 'backward';
}
/**
 * LogosCarousel - Auto-scrolling logo carousel with edge fade effects
 *
 * **DO NOT USE DIRECTLY** - Use semantic presets instead:
 * - `LogosSection` - Bordered, for standalone sections between blocks
 * - `LogosInline` - Borderless, for embedding inside Hero/CTA
 *
 * Both presets accept optional `title` and `description` props.
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────────────────────────┐
 * │  [fade]  │ Logo │ Logo │ Logo │ Logo │ Logo │  [fade]     │
 * └────────────────────────────────────────────────────────────┘
 * ```
 *
 * **Logo Types:**
 * - Image: `{ src: '/logos/acme.svg', alt: 'Acme', href?: 'https://acme.com' }`
 * - Text: `'workers.do'` - renders as semibold text
 *
 * @example
 * ```tsx
 * // Standalone section with title
 * <LogosSection
 *   title="Trusted by Industry Leaders"
 *   logos={[{ src: '/logos/acme.svg', alt: 'Acme' }, 'workers.do']}
 * />
 *
 * // Standalone section with description label
 * <LogosSection
 *   description="Built with"
 *   logos={['workers.do', 'functions.do', 'apis.do']}
 * />
 *
 * // Embedded in Hero/CTA (no borders)
 * <LogosInline logos={[{ src: '/logos/acme.svg', alt: 'Acme' }]} />
 * ```
 */
declare const LogosCarousel: ({ logos, title, description, bordered, className, speed, direction, }: LogosProps) => react_jsx_runtime.JSX.Element;

/**
 * LogosSection - Standalone logo carousel section
 *
 * Use for: Trust signals between blocks (Hero → Logos → Features)
 * - Bordered carousel items for visual separation
 * - Optional title (h2) or description (uppercase mono label)
 */
declare const LogosSection: (props: Omit<LogosProps, "bordered">) => react_jsx_runtime.JSX.Element;
/**
 * LogosInline - Embedded logo carousel
 *
 * Use for: Logos inside Hero, CTA, or other components
 * - No borders for seamless integration
 * - Optional title or description still supported
 */
declare const LogosInline: (props: Omit<LogosProps, "bordered">) => react_jsx_runtime.JSX.Element;

interface NavItem {
    name: string;
    link: string;
}
interface Logo {
    /** Link target @default '/' */
    url?: string;
    /** Logo image — omit for a text-only wordmark */
    src?: string;
    /** Image alt text @default title */
    alt?: string;
    /** Wordmark text, shown next to the image (or alone when src is omitted) */
    title?: string;
}
/**
 * CTA button configuration.
 * Supports both URL-based navigation and onClick handlers.
 * When both are provided, onClick takes precedence.
 */
interface CTA {
    text: string;
    /** URL for navigation (optional if onClick is provided) */
    url?: string;
    /** Click handler - takes precedence over url when provided */
    onClick?: () => void;
}
/**
 * Controls the navbar background appearance when scrolled.
 * - `translucent`: Semi-transparent with backdrop blur (default). Best for clean backgrounds.
 * - `solid`: Fully opaque background. Use when page has noise texture or busy backgrounds
 *   that would show through the translucent backdrop.
 */
type NavbarAppearance = 'translucent' | 'solid';
interface NavbarSimpleProps {
    /**
     * Brand mark on the left: pass a plain string for a text-only wordmark
     * (`logo="acme.do"`), or a Logo object for image + text.
     */
    logo?: string | Logo;
    menu?: NavItem[];
    githubUrl?: string;
    primaryCta?: CTA;
    secondaryCta?: CTA;
    /**
     * Controls the navbar background appearance when scrolled.
     * - `translucent`: Semi-transparent with backdrop blur (default). Best for clean backgrounds.
     * - `solid`: Fully opaque background. Use when page has noise texture or busy backgrounds.
     * @default 'translucent'
     */
    appearance?: NavbarAppearance;
    /**
     * Enable noise texture blending for the navbar background.
     * When true, the navbar renders its own noise layer that matches the page's NoiseTexture.
     * Use this when the page has a non-fixed NoiseTexture and you want the navbar to blend
     * seamlessly instead of appearing as a clean bar over noisy content.
     *
     * Note: This only applies when the navbar has a visible background (when scrolled).
     * @default false
     *
     * @example
     * ```tsx
     * <NoiseTexture /> {/* Non-fixed, scrolls with page *\/}
     * <NavbarSimple noiseBlend />
     * <Hero />
     * ```
     */
    noiseBlend?: boolean;
    className?: string;
}
declare const NavbarSimple: ({ logo, menu, githubUrl, primaryCta, secondaryCta, appearance, noiseBlend, className, }: NavbarSimpleProps) => react_jsx_runtime.JSX.Element;

/**
 * Pricing Mappers
 *
 * Maps mdxui PricingProps to various shadcnblocks pricing block props.
 */

/** PricingPlans (comparison variant) plan type */
interface PricingPlansPlan {
    name: string;
    badge: string;
    monthlyPrice: string;
    yearlyPrice: string;
    features: string[];
    buttonText: string;
    isPopular?: boolean;
}
/** PricingPlans (comparison variant) props */
interface PricingPlansProps$1 {
    title: string;
    description: string;
    plans: PricingPlansPlan[];
    className?: string;
}
/** PricingCompact (simple variant) props */
interface PricingCompactProps$1 {
    heading: string;
    description: string;
    price: number | string;
    priceSuffix: string;
    features: string[][];
    buttonText: string;
}
/**
 * Maps semantic variant names to shadcnblocks component names
 */
declare const PRICING_VARIANT_MAP: {
    /** Simple single-tier display */
    readonly simple: "PricingCompact";
    /** Comparison table with multiple tiers */
    readonly comparison: "PricingPlans";
    /** Monthly/yearly toggle pricing */
    readonly toggle: "PricingPlans";
};
type PricingVariant = keyof typeof PRICING_VARIANT_MAP;
/**
 * Map mdxui PricingProps to PricingPlansProps (comparison variant)
 */
declare function mapToPricingPlansProps(props: Omit<PricingProps, 'variant'>): PricingPlansProps$1;
/**
 * Map mdxui PricingProps to PricingCompactProps (simple variant)
 *
 * This variant shows a single pricing tier, so we select the most relevant one:
 * - Uses the highlighted tier if available
 * - Otherwise uses the first tier
 */
declare function mapToPricingCompactProps(props: Omit<PricingProps, 'variant'>): PricingCompactProps$1;

interface PricingAdapterProps extends Omit<PricingProps, 'variant'> {
    /** Layout variant - determines which block component to use */
    variant?: PricingVariant;
}
/**
 * Pricing Adapter
 *
 * Renders mdxui PricingProps using shadcnblocks pricing components.
 * Select variant to control the visual style:
 * - simple: Single-tier focused display (PricingCompact)
 * - comparison: Multi-tier comparison layout (PricingPlans)
 * - toggle: Monthly/yearly toggle display (PricingPlans)
 *
 * @example
 * ```tsx
 * <Pricing
 *   title="Simple Pricing"
 *   tiers={[
 *     { name: 'Pro', price: '$29/mo', features: ['...'], callToAction: 'Start' }
 *   ]}
 *   variant="comparison"
 * />
 * ```
 */
declare function Pricing({ variant, ...props }: PricingAdapterProps): react_jsx_runtime.JSX.Element;
/**
 * PricingSimple - Single-tier focused display
 *
 * Best for: Single pricing tier, simple offerings, free tools
 * Uses: PricingCompact block
 */
declare function PricingSimple(props: Omit<PricingProps, 'variant'>): react_jsx_runtime.JSX.Element;
/**
 * PricingToggle - Monthly/yearly toggle display
 *
 * Best for: Subscription pricing with annual discounts
 * Uses: PricingPlans block
 */
declare function PricingToggle(props: Omit<PricingProps, 'variant'>): react_jsx_runtime.JSX.Element;

interface PricingPlan$1 {
    name: string;
    badge: string;
    badgeVariant?: 'default' | 'secondary' | 'outline';
    monthlyPrice: string;
    /** Yearly price — only used when billing is 'recurring'. */
    yearlyPrice?: string;
    /** Sub-label under the price in 'one-time' billing (e.g. "one-time", "per project"). Omit for no label. */
    priceSuffix?: string;
    features: string[];
    buttonText: string;
    buttonUrl?: string;
    isPopular?: boolean;
}
interface PricingPlansProps {
    title?: string;
    description?: string;
    plans?: PricingPlan$1[];
    /**
     * Billing model.
     * - `'recurring'` (default): Monthly/Yearly toggle, prices show "Per month"/"Per year".
     * - `'one-time'`: no toggle, a single price (`monthlyPrice`) with optional `priceSuffix`.
     *   Use for pay-once / one-time-outcome services where monthly/yearly makes no sense.
     * @default 'recurring'
     */
    billing?: 'recurring' | 'one-time';
    className?: string;
}
declare const PricingPlans: ({ title, description, plans, billing, className, }: PricingPlansProps) => react_jsx_runtime.JSX.Element;

interface PricingCompactProps {
    heading?: string;
    description?: string;
    price?: string | number;
    priceSuffix?: string;
    features?: string[][];
    buttonText?: string;
    buttonUrl?: string;
    className?: string;
}
declare const PricingCompact: ({ heading, description, price, priceSuffix, features, buttonText, buttonUrl, className, }: PricingCompactProps) => react_jsx_runtime.JSX.Element;

/**
 * Props for PricingPanel component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Single pricing tier with muted background
 * - Features displayed in grid below the card
 * - Best for simple "one plan fits all" pricing
 */
interface PricingPanelProps {
    /** Main heading text */
    heading?: string;
    /** Description text below heading */
    description?: string;
    /** Price display (e.g., "16/month") */
    price?: string;
    /** Price prefix (e.g., "$") */
    pricePrefix?: string;
    /** Subtext below price */
    priceSubtext?: string;
    /** Button text */
    buttonText?: string;
    /** Button URL */
    buttonUrl?: string;
    /** Section title above features */
    featuresTitle?: string;
    /** List of features */
    features?: string[];
    /** Additional CSS classes */
    className?: string;
}
/**
 * PricingPanel - Single tier pricing with feature grid
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────┐
 * │              Heading                   │
 * │            Description                 │
 * │         ┌─────────────┐                │
 * │         │  Starting at│                │
 * │         │   $16/mo    │                │
 * │         │  [Button]   │                │
 * │         └─────────────┘                │
 * │     What's included in the plan        │
 * │  ✓ Feature   ✓ Feature   ✓ Feature    │
 * │  ✓ Feature   ✓ Feature   ✓ Feature    │
 * └────────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Simple single-plan pricing
 * - SaaS products with one tier
 * - Free trial promotions
 *
 * @example
 * ```tsx
 * <PricingPanel
 *   heading="Simple Pricing"
 *   description="One plan, everything included."
 *   price="29/month"
 *   features={['Unlimited users', '24/7 support', 'API access']}
 * />
 * ```
 */
declare const PricingPanel: ({ heading, description, price, pricePrefix, priceSubtext, buttonText, buttonUrl, featuresTitle, features, className, }: PricingPanelProps) => react_jsx_runtime.JSX.Element;

interface AddOn {
    name: string;
    description: string;
    price: {
        unit: string;
        amount: string;
    };
    buttonText?: string;
    buttonUrl?: string;
}
interface PricingAddOnsProps {
    badge?: string;
    heading?: string;
    addOns?: AddOn[];
    className?: string;
}
declare const PricingAddOns: ({ badge, heading, addOns, className, }: PricingAddOnsProps) => react_jsx_runtime.JSX.Element;

interface PricingPlan {
    name: string;
    monthlyPrice: string;
    /** Yearly price — only used when billing is 'recurring'. */
    yearlyPrice?: string;
    period?: {
        monthly: string;
        yearly: string;
    };
    /** Sub-label under the price in 'one-time' billing (e.g. "one-time", "per project"). Omit for no label. */
    priceSuffix?: string;
    description?: string;
    buttonText: string;
    buttonUrl?: string;
    buttonVariant?: 'default' | 'outline';
    highlighted?: boolean;
    features: string[];
}
/**
 * Props for PricingPlansBordered component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Three pricing tiers with toggle for monthly/yearly
 * - Cards with rounded corners and feature lists
 * - Middle tier can be highlighted with border
 */
interface PricingPlansBorderedProps {
    /** Main heading text */
    heading?: string;
    /** Supporting description shown centered under the heading */
    description?: string;
    /** Pricing plans configuration */
    plans?: PricingPlan[];
    /**
     * Billing model.
     * - `'recurring'` (default): Monthly/Yearly toggle, prices use each plan's `period` labels.
     * - `'one-time'`: no toggle, a single price (`monthlyPrice`) with optional `priceSuffix`.
     *   Use for pay-once / one-time-outcome services where monthly/yearly makes no sense.
     * @default 'recurring'
     */
    billing?: 'recurring' | 'one-time';
    /** Additional CSS classes */
    className?: string;
}
/**
 * PricingPlansBordered - Three tier pricing with toggle
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────────┐
 * │         Simple Pricing Plans           │
 * │         [Monthly] [Yearly]             │
 * │  ┌──────┐  ┌──────────┐  ┌──────┐     │
 * │  │Basic │  │ Standard │  │Premium│     │
 * │  │ $0   │  │   $20    │  │Custom │     │
 * │  │      │  │(highlight)│  │      │     │
 * │  └──────┘  └──────────┘  └──────┘     │
 * └────────────────────────────────────────┘
 * ```
 */
declare const PricingPlansBordered: ({ heading, description, plans, billing, className, }: PricingPlansBorderedProps) => react_jsx_runtime.JSX.Element;

interface PricingTier {
    /** Tier name (e.g. "Free", "Pro") */
    name: string;
    /** Short supporting tagline */
    description?: string;
    /** Headline price (e.g. "$0", "$20") */
    price: string;
    /** Price unit/cadence shown after the price (e.g. "mo") */
    priceDescription?: string;
    /** CTA button label */
    buttonText?: string;
    /** CTA link target (used when `onButtonClick` is not provided) */
    buttonUrl?: string;
    /** CTA button style */
    buttonVariant?: 'default' | 'outline';
    /** CTA click handler (takes precedence over `buttonUrl`) */
    onButtonClick?: () => void;
}
interface PricingComparisonFeature {
    /** Feature/row label */
    feature: string;
    /**
     * Cell values, one per tier, aligned to `tiers` by index.
     * `true`/`false` render a check / dash icon; strings render verbatim.
     */
    values: (string | boolean)[];
}
interface PricingMatrixProps {
    /** Section heading (omit/empty to hide the header block) */
    heading?: string;
    /** Section description */
    description?: string;
    /**
     * Pricing tiers rendered as connected cards with a comparison column each.
     * Fully dynamic — supply any number of tiers (typically 2–4).
     */
    tiers?: PricingTier[];
    /** Feature comparison rows; each row's `values` align to `tiers` by index. */
    features?: PricingComparisonFeature[];
    /** Additional CSS classes */
    className?: string;
}
/**
 * PricingMatrix - Tiered pricing with a feature comparison table
 *
 * A connected row of plan cards above a feature×tier comparison grid. The tier
 * count is data-driven via the `tiers` prop, and the comparison matrix is keyed
 * by tier index via each feature's `values` array, so the same component renders
 * two, three, or more tiers from props alone.
 *
 * **Layout:**
 * ```
 * +--------------------------------------------------+
 * |                   Pricing                        |
 * |                 Description                       |
 * |  +-------------+-------------+-------------+      |
 * |  |   Tier 1    |   Tier 2    |   Tier 3    |      |
 * |  |     $0      |     $20     |    $500     |      |
 * |  +-------------+-------------+-------------+      |
 * |  +--------------------------------------------+  |
 * |  | Feature       Tier 1   Tier 2   Tier 3    |  |
 * |  | Credits       10/mo    100/mo   1,000/mo  |  |
 * |  +--------------------------------------------+  |
 * +--------------------------------------------------+
 * ```
 */
declare const PricingMatrix: ({ heading, description, tiers, features, className, }: PricingMatrixProps) => react_jsx_runtime.JSX.Element;

interface PricingAgentsAttribute {
    /** Unique key to match with agent values */
    key: string;
    /** Display label for the row */
    label: string;
}
interface PricingAgentsAgent {
    /** Agent name */
    name: string;
    /** Agent avatar */
    image?: {
        src: string;
        alt: string;
    };
    /** CTA button text */
    buttonText?: string;
    /** CTA button URL */
    buttonUrl?: string;
    /** Highlight this agent column */
    highlighted?: boolean;
    /** Attribute values - key matches attributes[].key */
    values: Record<string, string | boolean>;
}
/**
 * Props for PricingAgents component
 *
 * @remarks
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - Supports 2-4 agents for comparison
 * - Attributes can be boolean (check/dash) or text values
 * - Use highlighted prop to emphasize recommended agent
 * - Use teamMode to show unified "Hire the Team" CTA instead of individual buttons
 */
interface PricingAgentsProps {
    /** Section heading */
    heading?: string;
    /** Section description */
    description?: string;
    /** Comparison attributes (rows) */
    attributes?: PricingAgentsAttribute[];
    /** Agents to compare (columns) */
    agents?: PricingAgentsAgent[];
    /** Team mode - shows capability coverage with single "Hire the Team" CTA */
    teamMode?: boolean;
    /** Team CTA button text (team mode only) */
    teamButtonText?: string;
    /** Team CTA button URL (team mode only) */
    teamButtonUrl?: string;
    /** Team pricing display (team mode only) */
    teamPrice?: string;
    /** Additional CSS classes */
    className?: string;
}
/**
 * PricingAgents - Agent comparison table
 *
 * **Compare Mode (default):**
 * ```
 * ┌─────────────┬──────────┬──────────┬──────────┐
 * │             │  (○)Tom  │ (○)Priya │  (○)Sam  │
 * ├─────────────┼──────────┼──────────┼──────────┤
 * │ Frontend    │    ✓     │    ✓     │    —     │
 * │ Backend     │    ✓     │    —     │    ✓     │
 * ├─────────────┼──────────┼──────────┼──────────┤
 * │             │  [Hire]  │  [Hire]  │  [Hire]  │
 * └─────────────┴──────────┴──────────┴──────────┘
 * ```
 *
 * **Team Mode (teamMode=true):**
 * ```
 * ┌─────────────┬──────────┬──────────┬──────────┐
 * │             │  (○)Tom  │ (○)Priya │  (○)Sam  │
 * ├─────────────┼──────────┼──────────┼──────────┤
 * │ Frontend    │    ✓     │    ✓     │    —     │
 * │ Backend     │    ✓     │    —     │    ✓     │
 * │ Security    │    —     │    —     │    ✓     │
 * ├─────────────┴──────────┴──────────┴──────────┤
 * │  Full Stack Coverage · $15k/mo               │
 * │           [ Hire the Team ]                  │
 * └──────────────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Compare mode: Help users choose between agents
 * - Team mode: Show complete dev stack coverage, sell the whole team
 */
declare const PricingAgents: ({ heading, description, attributes, agents, teamMode, teamButtonText, teamButtonUrl, teamPrice, className, }: PricingAgentsProps) => react_jsx_runtime.JSX.Element;

/**
 * PromotionBadge - A subtle pill badge that appears in the bottom-right corner
 *
 * **Behavior:**
 * - Slides in from the right on mount
 * - Automatically slides out and disappears after 60 seconds
 * - Respects prefers-reduced-motion
 *
 * **Usage:**
 * Simply drop the component anywhere in your app - no props needed.
 *
 * @example
 * ```tsx
 * import { PromotionBadge } from '@mdxui/neo'
 *
 * function App() {
 *   return (
 *     <>
 *       <main>...</main>
 *       <PromotionBadge />
 *     </>
 *   )
 * }
 * ```
 */
declare const PromotionBadge: ({ className }: {
    className?: string;
}) => react_jsx_runtime.JSX.Element;

interface TeamCardsMember {
    name: string;
    role: string;
    department?: string;
    description?: string;
    expertise?: string[];
    avatar?: string;
    href?: string;
}
interface TeamCardsProps {
    title?: string;
    description?: string;
    /** Optional CTA button */
    cta?: {
        text: string;
        url: string;
    };
    members?: TeamCardsMember[];
    /** Show department badge under role */
    showBadge?: boolean;
    /** Show member description */
    showDescription?: boolean;
    /** Show expertise tags at bottom */
    showBottomBadges?: boolean;
    /** Show learn more button */
    showButton?: boolean;
    className?: string;
}
/**
 * TeamCards - Card-based team grid with detailed member profiles
 *
 * A team section with centered header and 3-column card grid.
 * Each card shows avatar, name, role, department badge, description, and expertise tags.
 *
 * Best for: Leadership teams, about pages, smaller teams (3-9 members)
 */
declare function TeamCards({ title, description, cta, members, showBadge, showDescription, showBottomBadges, showButton, className, }: TeamCardsProps): react_jsx_runtime.JSX.Element;

interface TeamCompactMember {
    name: string;
    role: string;
    avatar?: string;
}
interface TeamCompactProps {
    title?: string;
    description?: string;
    cta?: {
        text: string;
        url: string;
    };
    members?: TeamCompactMember[];
    className?: string;
}
/**
 * TeamCompact - Compact team grid with left-aligned header
 *
 * A team section with a left-aligned header, description, and CTA button,
 * followed by a compact 4-column grid of team members with small avatars.
 *
 * Best for: Large teams (8-16+ members), career pages
 */
declare function TeamCompact({ title, description, cta, members, className, }: TeamCompactProps): react_jsx_runtime.JSX.Element;

interface TestimonialSingleProps {
    className?: string;
    quote?: string;
    author?: {
        name: string;
        role: string;
        avatar: {
            src: string;
            alt: string;
        };
    };
}
/**
 * TestimonialSingle - Centered single testimonial with large quote
 *
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - DO NOT use unless a "Testimonial" is explicitly defined in the input docs
 * - Requires actual quote, customer name, and role
 *
 * **Layout:**
 * ```
 * ┌────────────────────────────────────┐
 * │                                    │
 * │     "Large centered quote text"    │
 * │                                    │
 * │         [Avatar] Name              │
 * │                   Role             │
 * └────────────────────────────────────┘
 * ```
 *
 * **Best Use Cases:**
 * - Hero testimonials with single powerful quote
 * - Featured customer stories
 * - Social proof sections
 *
 * @example
 * ```tsx
 * <TestimonialSingle
 *   quote="This product changed everything for us."
 *   author={{
 *     name: "Jane Doe",
 *     role: "CEO at Company",
 *     avatar: { src: "/avatars/jane.jpg", alt: "Jane Doe" }
 *   }}
 * />
 * ```
 */
declare function TestimonialSingle({ className, quote, author, }: TestimonialSingleProps): react_jsx_runtime.JSX.Element;

/**
 * TestimonialItem - Twitter/X API-compatible testimonial data
 *
 * This interface aligns with Twitter API v2 response structure for easy
 * integration with programmatic tweet fetching (e.g., mentions of @dotdo_ai).
 *
 * **Twitter API v2 Mapping:**
 * ```
 * TestimonialItem     Twitter API v2
 * ─────────────────   ──────────────────────
 * id                  tweet.id
 * content             tweet.text
 * name                user.name
 * username            user.username (without @)
 * avatar              user.profile_image_url
 * verified            user.verified (legacy) or user.verified_type
 * tweetId             tweet.id (for linking)
 * tweetUrl            https://x.com/{username}/status/{tweet.id}
 * profileUrl          https://x.com/{username}
 * createdAt           tweet.created_at (ISO 8601)
 * ```
 *
 * @example Manual entry
 * ```ts
 * { id: '1', name: 'Jane', username: 'jane', content: 'Great product!' }
 * ```
 *
 * @example From Twitter API
 * ```ts
 * {
 *   id: tweet.id,
 *   content: tweet.text,
 *   name: user.name,
 *   username: user.username,
 *   avatar: user.profile_image_url,
 *   verified: user.verified,
 *   tweetId: tweet.id,
 *   tweetUrl: `https://x.com/${user.username}/status/${tweet.id}`,
 *   profileUrl: `https://x.com/${user.username}`,
 *   createdAt: tweet.created_at,
 * }
 * ```
 */
interface TestimonialItem {
    /** Unique identifier (use tweet.id when from API) */
    id: string;
    /** User's display name */
    name: string;
    /** Twitter handle without @ */
    username: string;
    /** Profile image URL */
    avatar?: string;
    /** Tweet/testimonial text content */
    content: string;
    /** Whether user has verified badge */
    verified?: boolean;
    /** Original tweet ID (for API-sourced items) */
    tweetId?: string;
    /** Direct link to the tweet */
    tweetUrl?: string;
    /** Link to user's profile */
    profileUrl?: string;
    /** ISO 8601 timestamp (e.g., "2024-01-15T10:30:00.000Z") */
    createdAt?: string;
}
interface TestimonialTwitterProps {
    className?: string;
    heading?: string;
    description?: string;
    testimonials?: TestimonialItem[];
}
/**
 * TestimonialTwitter - Twitter/X-style testimonial masonry grid
 *
 * **IMPORTANT CONSTRAINTS FOR AI/PROGRAMMATIC GENERATION:**
 * - DO NOT use in initial landing page generation phases
 * - Requires Twitter/X API integration to be set up first
 * - MINIMUM 3 tweets required for balanced grid layout
 * - Only use when curated tweets mentioning the brand are available
 *
 * **Layout:**
 * ```
 * ┌─────────────────────────────────────────┐
 * │           Heading (centered)            │
 * │           Description                   │
 * ├─────────┬─────────┬─────────────────────┤
 * │ Card 1  │ Card 2  │ Card 3              │
 * │         │         ├─────────────────────┤
 * │         ├─────────┤ Card 6              │
 * ├─────────┤ Card 5  │                     │
 * │ Card 4  │         │                     │
 * │ (fade)  │ (fade)  │ (fade)              │
 * └─────────┴─────────┴─────────────────────┘
 * ```
 *
 * **Features:**
 * - Responsive masonry grid (1→2→3 columns)
 * - Twitter/X card design with verified badges
 * - Bottom fade effect for visual polish
 * - Scroll-triggered animations
 * - API-compatible data structure for programmatic tweet fetching
 *
 * @example
 * ```tsx
 * <TestimonialTwitter
 *   heading="What our customers say"
 *   description="Real feedback from real users"
 *   testimonials={[
 *     { id: '1', name: 'John', username: 'john', content: 'Amazing!' },
 *     { id: '2', name: 'Jane', username: 'jane', content: 'Love it!' },
 *     { id: '3', name: 'Bob', username: 'bob', content: 'Great work!' },
 *   ]}
 * />
 * ```
 */
declare function TestimonialTwitter({ className, heading, description, testimonials, }: TestimonialTwitterProps): react_jsx_runtime.JSX.Element;

interface LinkProps {
    href: string;
    children: React.ReactNode;
    className?: string;
    ref?: React.Ref<HTMLAnchorElement>;
    onClick?: (e: React.MouseEvent) => void;
}
declare function LinkProvider({ value, children, }: {
    value: React.ComponentType<LinkProps>;
    children: React.ReactNode;
}): react_jsx_runtime.JSX.Element;
declare function useLink(): React$1.ComponentType<LinkProps>;

/**
 * @mdxui/neo - Components
 *
 * Marketing and landing page components with mdxui-compliant interfaces.
 * - Content at root level (title, subtitle, etc.)
 * - Flat CTA props (callToAction + callToActionUrl)
 * - Zod schemas for validation
 *
 * @example
 * ```tsx
 * import { Hero, Features, Pricing } from '@mdxui/neo'
 *
 * <Hero
 *   title="Welcome"
 *   subtitle="Build amazing things"
 *   callToAction="Get Started"
 *   callToActionUrl="/signup"
 *   variant="centered"
 * />
 * ```
 */

declare const COMPONENTS_VERSION = "0.1.0";

interface MarkdownProps {
    /** Markdown source string. Renders nothing when empty/undefined. */
    children?: string;
    /** Prose text scale. @default 'base' */
    size?: 'sm' | 'base' | 'lg';
    /**
     * Render inline: no surrounding prose block and paragraphs unwrap to their
     * inline content. Use inside an already-styled element (a quote, a single
     * display line) where a block `<p>` would break the layout.
     */
    inline?: boolean;
    /** Extra classes merged onto the prose wrapper (e.g. margins, alignment). */
    className?: string;
}
/**
 * Shared Markdown renderer for @mdxui/neo content props.
 *
 * Renders GitHub-flavored Markdown — **bold**, *italic*, `inline code`,
 * [links](url), lists, > blockquotes, and tables — with neo's theme-aware
 * prose styling. Every body/description content prop in neo flows through this
 * so authored markdown looks consistent across components.
 */
declare function Markdown({ children, size, inline, className }: MarkdownProps): ReactNode;

/**
 * Layout constants for consistent spacing across components
 */
/**
 * Standard navbar height in pixels.
 * Used for hero components that need to extend behind the sticky navbar.
 *
 * Calculation: py-4 (32px) + h-10 button height (40px) = 72px
 */
declare const NAVBAR_HEIGHT = 72;
/**
 * CSS classes to apply when a hero section should extend behind the navbar.
 * - `-mt-[72px]` pulls the section up behind the sticky navbar
 * - `pt-[72px]` pushes the content back down so it's visible below navbar
 *
 * Result: Background extends behind navbar, content stays in place.
 */
declare const BEHIND_NAVBAR_CLASSES = "-mt-[72px] pt-[72px]";

/**
 * ActionProp - Unified action type for mdxui components
 *
 * Actions can be specified as:
 * - A string URL for simple navigation
 * - An object with href and optional target/onClick
 * - A function for custom handling
 */
type ActionProp = string | {
    href: string;
    target?: '_blank' | '_self';
    onClick?: () => void;
} | (() => void);
/**
 * ActionsProp - Container for primary/secondary actions
 * Follows mdxui pattern of separating behavior from content
 */
interface ActionsProp {
    primary?: ActionProp;
    secondary?: ActionProp;
}
/**
 * ImageProp - Image content that can be a URL or ReactNode
 */
type ImageProp = string | ReactNode;
/**
 * Person - Common type for team members, authors, etc.
 */
interface Person {
    name: string;
    title?: string;
    role?: string;
    avatar?: string;
    bio?: string;
    social?: {
        twitter?: string;
        linkedin?: string;
        github?: string;
    };
}
/**
 * Integration - Third-party integration/partner
 */
interface Integration {
    name: string;
    description?: string;
    logo: ImageProp;
    category?: string;
    href?: string;
}
/**
 * Job - Career opening
 */
interface Job {
    title: string;
    department?: string;
    location?: string;
    type?: 'full-time' | 'part-time' | 'contract' | 'remote';
    description?: string;
    href?: string;
}

/**
 * Resolve an ActionProp to an href string
 *
 * @param action - The action prop to resolve
 * @returns The href string, or undefined if action is a function
 *
 * @example
 * resolveAction('/about') // '/about'
 * resolveAction({ href: '/about', target: '_blank' }) // '/about'
 * resolveAction(() => console.log('clicked')) // undefined
 */
declare function resolveAction(action: ActionProp | undefined): string | undefined;
/**
 * Resolve an ActionProp to link props (href + target)
 *
 * @param action - The action prop to resolve
 * @returns Object with href and optional target, or undefined
 *
 * @example
 * resolveActionProps({ href: '/about', target: '_blank' })
 * // { href: '/about', target: '_blank' }
 */
declare function resolveActionProps(action: ActionProp | undefined): {
    href: string;
    target?: '_blank' | '_self';
} | undefined;
/**
 * Check if an action is a click handler (function)
 */
declare function isClickAction(action: ActionProp | undefined): action is () => void;
/**
 * Get onClick handler from an ActionProp
 */
declare function getOnClick(action: ActionProp | undefined): (() => void) | undefined;

export { type ActionProp, type ActionsProp, type AdaptedFAQInputProps, type AdaptedFAQProps, BEHIND_NAVBAR_CLASSES, Beams, type BeamsProps, type BlockFaq1Props, type BlockFaqItem, BlogAuthor, type BlogAuthorProps, BlogCard, type BlogCardLinkProps, type BlogCardProps, BlogGrid, type BlogGridProps, BlogHeader, type BlogHeaderProps, BlogIcon, BlogPage, type BlogPageLinkProps, type BlogPageProps, type BlogPost, type BlogPostAuthor, type BlogPostFAQItem, BlogPostHeader, type BlogPostHeaderLinkProps, type BlogPostHeaderProps, BlogPostPage, type BlogPostPageLinkProps, type BlogPostPageProps, BlogPostSEO, type BlogPostSEOProps, type BlogSEOConfig, COMPONENTS_VERSION, CTA$1 as CTA, type CTAProps, CTASection, CTA_VARIANT_MAP, type CardContent, CodeBlock, type CodeBlockProps, type CodeCard, type CodeTheme, CodeWindowBase as CodeWindow, CodeWindowBase, type CodeWindowBaseProps, type CodeWindowConfig, CodeWindowCopyButton, type CodeWindowCopyButtonProps, CodeWindowHero, type CodeWindowHeroProps, type CodeWindowBaseProps as CodeWindowProps, Connect, type ConnectItem, type ConnectProps, CtaCentered, CtaCenteredCheck, type CtaCenteredCheckProps, type CtaCenteredProps, CtaChecklist, type CtaChecklistProps, CtaOrbiting, CtaOrbitingInstall, type CtaOrbitingInstallProps, type CtaOrbitingProps, CtaSplitMedia, CtaSplitMedia as CtaSplitMediaGradient, type CtaSplitMediaProps, type CtaVariant, DisplayAd, type DisplayAdLinkProps, type DisplayAdProps, DotsBottom, DotsCenter, DotsEdges, DotsFull, DotsTop, FAQ, type FAQItem, FAQNumberedGrid, type FAQNumberedGridProps, FAQSplitCTA, type FAQSplitCTAProps, type FeatureItem, Features, FeaturesAgentCards, type FeaturesAgentCardsAgent, type FeaturesAgentCardsHighlight, type FeaturesAgentCardsProps, FeaturesAgentFlow, type FeaturesAgentFlowProps, FeaturesAgentTeam, type FeaturesAgentTeamMember, type FeaturesAgentTeamProps, type FeaturesArrayProps, type FeaturesBaseProps, type ButtonConfig as FeaturesButtonConfig, type FeaturesButtonProps, FeaturesCarousel, FeaturesCodeCardSingle, type FeaturesCodeCardSingleProps, FeaturesCodeCards, type FeaturesCodeCardsProps, type CodeTabItem as FeaturesCodeTabItem, FeaturesCodeTabs, type FeaturesCodeTabsProps, type CodeWindowConfig$1 as FeaturesCodeWindowConfig, type ContentBlock as FeaturesContentBlock, FeaturesDividers, type FeaturesDividersFeature, type FeaturesDividersProps, type FeatureItem$2 as FeaturesFeatureItem, FeaturesGallery, type FeaturesGalleryProps, FeaturesGrid, type FeaturesGridProps, type LearnMoreConfig as FeaturesLearnMoreConfig, FeaturesLeft, type FeaturesLeftProps, type FeaturesMediaProps, type FeaturesProps, FeaturesRight, type FeaturesRightProps, FeaturesRow, type FeaturesRowProps, FeaturesShowcase, FeaturesShowcaseIcons, type FeaturesShowcaseIconsProps, type FeaturesShowcaseProps, FeaturesSplit, FeaturesSplitCode, type FeaturesSplitCodeProps, type FeaturesSplitProps, FeaturesStats, type FeaturesStatsProps, FeaturesSticky, FeaturesStickyHighlights, type FeaturesStickyHighlightsFeature, type FeaturesStickyHighlightsHighlight, type FeaturesStickyHighlightsProps, type FeaturesStickyProps, FeaturesTimeline, type FeaturesTimelineFeature, type FeaturesTimelineProps, type FeaturesVariant, FooterLarge, type FooterLargeProps, FooterMedium, type FooterMediumProps, FooterSmall, type FooterSmallProps, GlowBottom, type GlowBottomProps, GlowCenter, type GlowCenterProps, GlowTop, type GlowTopProps, GradientBlur, type GradientBlurProps, GridCrosshatchCenter, type GridCrosshatchCenterProps, GridCrosshatchEdges, type GridCrosshatchEdgesProps, GridCrosshatchTop, type GridCrosshatchTopProps, GridDashedBottom, GridDashedCenter, GridDashedEdges, GridDashedFull, GridDashedTop, GridDenseCenter, type GridDenseCenterProps, GridDenseEdges, type GridDenseEdgesProps, GridDenseTop, type GridDenseTopProps, GridDiagonalBottom, type GridDiagonalBottomProps, GridDiagonalCenter, type GridDiagonalCenterProps, GridDiagonalEdges, type GridDiagonalEdgesProps, GridDiagonalFull, type GridDiagonalFullProps, GridDiagonalTop, type GridDiagonalTopProps, GridPerspectiveBottom, type GridPerspectiveBottomProps, GridPerspectiveTop, type GridPerspectiveTopProps, GridSolidBottom, type GridSolidBottomProps, GridSolidCenter, type GridSolidCenterProps, GridSolidEdges, type GridSolidEdgesProps, GridSolidFull, type GridSolidFullProps, GridSolidTop, type GridSolidTopProps, GridSparseCenter, type GridSparseCenterProps, GridSparseEdges, type GridSparseEdgesProps, GridSparseTop, type GridSparseTopProps, HashScrollHandler, type HashScrollHandlerProps, Hero, type HeroBaseProps, HeroBento, type HeroBentoProps, HeroCenterAnnouncement, type HeroCenterAnnouncementProps, HeroCenterFeatures, type HeroCenterFeaturesProps, HeroCenterTable, type HeroCenterTableProps, HeroCentered, type HeroCenteredProps, HeroMediaGrid, type HeroMediaGridProps, type HeroMediaProps, type HeroProps, HeroSplitCode, type HeroSplitCodeProps, HeroSplitImage, type HeroSplitImageProps, HeroSplitTable, type HeroSplitTableProps, type HeroVariant, HowItWorksCards, type HowItWorksCardsProps, type HowItWorksCardsStep, HowItWorksLong, type HowItWorksLongProps, type HowItWorksLongStep, HowItWorksSimple, type HowItWorksSimpleProps, type HowItWorksSimpleStep, type HowItWorksStepCode, HowItWorksVertical, type HowItWorksVerticalProps, type HowItWorksVerticalStep, type HowToData, type HowToStep, type ImageProp, type InstallSnippetConfig, type Integration, type Job, type LinkProps, LinkProvider, type LogoItem, LogosCarousel, LogosInline, type LogosProps, LogosSection, Markdown, MarkdownContent, type MarkdownProps, MdxPre, type MdxPreProps, NAVBAR_HEIGHT, NavbarSimple, type NavbarSimpleProps, NoiseTexture, type NoiseTextureProps, type OrbitItem$1 as OrbitItem, PRICING_VARIANT_MAP, Particles, type ParticlesProps, Performance, type PerformanceProps, type PerformanceStat, type Person, Pricing, type PricingAdapterProps, type AddOn as PricingAddOn, PricingAddOns, type PricingAddOnsProps, PricingAgents, type PricingAgentsAgent, type PricingAgentsAttribute, type PricingAgentsProps, PricingCompact, type PricingCompactProps$1 as PricingCompactProps, PricingMatrix, type PricingComparisonFeature as PricingMatrixFeature, type PricingTier as PricingMatrixPlan, type PricingMatrixProps, PricingPanel, type PricingPanelProps, PricingPlans, PricingPlansBordered, type PricingPlan as PricingPlansBorderedPlan, type PricingPlansBorderedProps, type PricingPlansPlan, type PricingPlansProps$1 as PricingPlansProps, PricingSimple, PricingToggle, type PricingVariant, PromotionBadge, type ReadMoreLinkProps, ReadMoreSection, type ReadMoreSectionProps, type SEOAuthor, type SEOPublisher, SectionBackground, SpotlightTopLeft, type SpotlightTopLeftProps, SpotlightTopRight, type SpotlightTopRightProps, Stats, type StatsProps, TableOfContents, type TableOfContentsAuthor, type TableOfContentsProps, TagFilter, type TagFilterLinkProps, type TagFilterProps, TeamCards, type TeamCardsMember, type TeamCardsProps, TeamCompact, type TeamCompactMember, type TeamCompactProps, type TestimonialItem, TestimonialSingle, type TestimonialSingleProps, TestimonialTwitter, type TestimonialTwitterProps, type TocComponentProps, type ViewMode, ViewModeToggle, type ViewModeToggleLinkProps, type ViewModeToggleProps, formatDate, getBlogIcon, getOnClick, heroBackground, isClickAction, mapCtaSectionProps, mapFAQItemToBlock, mapFAQProps, mapToCtaSplitMediaProps, mapToPricingCompactProps, mapToPricingPlansProps, markdownTableComponents, pageNoise, parseDate, resolveAction, resolveActionProps, useLink };