@almadar/ui 2.15.8 → 2.15.11

package/dist/marketing/index.d.cts

@@ -0,0 +1,831 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * Box Component
+ *
+ * A versatile layout primitive that provides spacing, background, border, and shadow controls.
+ * Think of it as a styled div with consistent design tokens.
+ */
+
+type BoxPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type BoxMargin = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto";
+type BoxBg = "transparent" | "primary" | "secondary" | "muted" | "accent" | "surface" | "overlay";
+type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Padding on all sides */
+    padding?: BoxPadding;
+    /** Horizontal padding (overrides padding for x-axis) */
+    paddingX?: BoxPadding;
+    /** Vertical padding (overrides padding for y-axis) */
+    paddingY?: BoxPadding;
+    /** Margin on all sides */
+    margin?: BoxMargin;
+    /** Horizontal margin */
+    marginX?: BoxMargin;
+    /** Vertical margin */
+    marginY?: BoxMargin;
+    /** Background color */
+    bg?: BoxBg;
+    /** Show border */
+    border?: boolean;
+    /** Border radius */
+    rounded?: BoxRounded;
+    /** Box shadow */
+    shadow?: BoxShadow;
+    /** Display type */
+    display?: "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid";
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Overflow behavior */
+    overflow?: "auto" | "hidden" | "visible" | "scroll";
+    /** Position */
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    /** HTML element to render as */
+    as?: React.ElementType;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+    /** Declarative hover event — emits UI:{hoverEvent} with { hovered: true/false } on mouseEnter/mouseLeave */
+    hoverEvent?: string;
+}
+/**
+ * Box - Versatile container component with design tokens
+ */
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Stack Component
+ *
+ * A layout primitive for arranging children in a vertical or horizontal stack with consistent spacing.
+ * Includes convenience exports VStack and HStack for common use cases.
+ */
+
+type StackDirection = "horizontal" | "vertical";
+type StackGap = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+interface StackProps {
+    /** Stack direction */
+    direction?: StackDirection;
+    /** Gap between children */
+    gap?: StackGap;
+    /** Align items on the cross axis */
+    align?: StackAlign;
+    /** Justify items on the main axis */
+    justify?: StackJustify;
+    /** Allow items to wrap */
+    wrap?: boolean;
+    /** Reverse the order of children */
+    reverse?: boolean;
+    /** Fill available space (flex: 1) */
+    flex?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Children elements */
+    children?: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Keyboard handler */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Role for accessibility */
+    role?: string;
+    /** Tab index for focus management */
+    tabIndex?: number;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+    /** When true, horizontal stacks flip to vertical below the md breakpoint (768px) */
+    responsive?: boolean;
+}
+/**
+ * VStack - Vertical stack shorthand
+ */
+interface VStackProps extends Omit<StackProps, "direction"> {
+}
+declare const VStack: React.FC<VStackProps>;
+/**
+ * HStack - Horizontal stack shorthand
+ */
+interface HStackProps extends Omit<StackProps, "direction"> {
+}
+declare const HStack: React.FC<HStackProps>;
+
+/**
+ * Typography Atom Component
+ *
+ * Text elements following the KFlow design system with theme-aware styling.
+ */
+
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "heading" | "subheading" | "body1" | "body2" | "body" | "caption" | "overline" | "small" | "large" | "label";
+type TypographySize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+interface TypographyProps {
+    /** Typography variant */
+    variant?: TypographyVariant;
+    /** Heading level (1-6) - alternative to variant for headings */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text color */
+    color?: "primary" | "secondary" | "muted" | "error" | "success" | "warning" | "inherit";
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Font weight override */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    /** Font size override */
+    size?: TypographySize;
+    /** Truncate with ellipsis (single line) */
+    truncate?: boolean;
+    /** Overflow handling mode */
+    overflow?: "visible" | "hidden" | "wrap" | "clamp-2" | "clamp-3";
+    /** Custom HTML element */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** HTML id attribute */
+    id?: string;
+    /** Additional class names */
+    className?: string;
+    /** Inline style */
+    style?: React.CSSProperties;
+    /** Text content (alternative to children) */
+    content?: React.ReactNode;
+    /** Children elements */
+    children?: React.ReactNode;
+}
+declare const Typography: React.FC<TypographyProps>;
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    /** Left icon as ReactNode, Lucide component, or string name (e.g. "plus", "trash") */
+    leftIcon?: React.ReactNode | LucideIcon | string;
+    /** Right icon as ReactNode, Lucide component, or string name */
+    rightIcon?: React.ReactNode | LucideIcon | string;
+    /** Alias for leftIcon */
+    icon?: React.ReactNode | LucideIcon | string;
+    /** Alias for rightIcon */
+    iconRight?: React.ReactNode | LucideIcon | string;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: string;
+    /** Payload to include with the action event */
+    actionPayload?: Record<string, unknown>;
+    /** Button label text (alternative to children for schema-driven rendering) */
+    label?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Numeric count or amount to display in badge */
+    amount?: number;
+    /** Badge label text (alternative to children for schema-driven rendering) */
+    label?: string;
+    /** Icon name (Lucide icon string) or React node */
+    icon?: React.ReactNode;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Icon Atom Component
+ *
+ * A wrapper component for Lucide icons with consistent sizing and styling.
+ * Uses theme-aware CSS variables for stroke width and color.
+ *
+ * Supports two APIs:
+ * - `icon` prop: Pass a LucideIcon component directly
+ * - `name` prop: Pass a string icon name (resolved from iconMap)
+ */
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type IconAnimation = 'spin' | 'pulse' | 'none';
+interface IconProps {
+    /** Lucide icon component (preferred for type-safe usage) */
+    icon?: LucideIcon;
+    /** Icon name as string (resolved from iconMap) */
+    name?: string;
+    /** Size of the icon */
+    size?: IconSize;
+    /** Color class (Tailwind color class) or 'inherit' for theme default */
+    color?: string;
+    /** Animation type */
+    animation?: IconAnimation;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon stroke width - uses theme default if not specified */
+    strokeWidth?: number;
+    /** Inline style */
+    style?: React.CSSProperties;
+}
+declare const Icon: React.FC<IconProps>;
+
+type CardShadow = "none" | "sm" | "md" | "lg";
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "bordered" | "elevated" | "interactive";
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Card title - renders in header if provided */
+    title?: string;
+    /** Card subtitle - renders below title */
+    subtitle?: string;
+    /** Shadow size override */
+    shadow?: CardShadow;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Divider Atom Component
+ *
+ * A divider component for separating content sections.
+ */
+
+type DividerOrientation = "horizontal" | "vertical";
+type DividerVariant = "solid" | "dashed" | "dotted";
+interface DividerProps {
+    /**
+     * Orientation of the divider
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Text label to display in the divider
+     */
+    label?: string;
+    /**
+     * Line style variant
+     * @default 'solid'
+     */
+    variant?: DividerVariant;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+/**
+ * Center Component
+ *
+ * A layout utility that centers its children horizontally and/or vertically.
+ */
+
+interface CenterProps {
+    /** Center inline (width fits content) vs block (full width) */
+    inline?: boolean;
+    /** Center only horizontally */
+    horizontal?: boolean;
+    /** Center only vertically */
+    vertical?: boolean;
+    /** Minimum height (useful for vertical centering) */
+    minHeight?: string | number;
+    /** Fill available height */
+    fullHeight?: boolean;
+    /** Fill available width */
+    fullWidth?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Children elements */
+    children: React.ReactNode;
+    /** HTML element to render as */
+    as?: React.ElementType;
+}
+/**
+ * Center - Centers content horizontally and/or vertically
+ */
+declare const Center: React.FC<CenterProps>;
+
+/**
+ * Spacer Component
+ *
+ * A flexible spacer that expands to fill available space in a flex container.
+ * Useful for pushing elements apart or creating consistent spacing.
+ */
+
+type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto';
+interface SpacerProps {
+    /** Fixed size (auto = flex grow) */
+    size?: SpacerSize;
+    /** Orientation (for fixed sizes) */
+    axis?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Spacer - Flexible spacing element for flex layouts
+ *
+ * Usage:
+ * - size="auto" (default): Expands to fill available space (flex: 1)
+ * - size="md": Fixed size spacing
+ */
+declare const Spacer: React.FC<SpacerProps>;
+
+type ContentSectionBackground = "default" | "alt" | "dark" | "gradient";
+type ContentSectionPadding = "sm" | "md" | "lg";
+interface ContentSectionProps {
+    /** Section content */
+    children: React.ReactNode;
+    /** Background style */
+    background?: ContentSectionBackground;
+    /** Vertical padding size */
+    padding?: ContentSectionPadding;
+    /** HTML id for anchor linking */
+    id?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare const ContentSection: React.ForwardRefExoticComponent<ContentSectionProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * HeroSection Molecule Component
+ *
+ * A full-width hero section for landing pages and marketing content.
+ * Composes atoms: Box, VStack, HStack, Badge, Typography, Button.
+ * Optionally includes an InstallBox molecule for CLI commands.
+ */
+
+interface HeroSectionProps {
+    tag?: string;
+    tagVariant?: 'primary' | 'secondary' | 'accent';
+    title: string;
+    titleAccent?: string;
+    subtitle: string;
+    primaryAction?: {
+        label: string;
+        href: string;
+    };
+    secondaryAction?: {
+        label: string;
+        href: string;
+    };
+    installCommand?: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imagePosition?: 'below' | 'right' | 'background';
+    background?: 'dark' | 'gradient' | 'subtle';
+    align?: 'center' | 'left';
+    /** Background element (SVG animation, etc.) rendered behind hero content */
+    backgroundElement?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const HeroSection: React.FC<HeroSectionProps>;
+
+/**
+ * CTABanner Molecule Component
+ *
+ * A call-to-action banner with title, subtitle, and action buttons.
+ * Uses the site's theme naturally - no forced color inversions.
+ */
+
+type CTABannerBackground = 'default' | 'alt' | 'dark' | 'gradient' | 'primary';
+interface CTABannerProps {
+    /** Banner headline */
+    title: string;
+    /** Supporting text below the title */
+    subtitle?: string;
+    /** Primary action button config */
+    primaryAction?: {
+        label: string;
+        href: string;
+    };
+    /** Secondary action button config */
+    secondaryAction?: {
+        label: string;
+        href: string;
+    };
+    /** Background style */
+    background?: CTABannerBackground;
+    /** Content alignment */
+    align?: 'center' | 'left';
+    /** Additional class names */
+    className?: string;
+}
+declare const CTABanner: React.FC<CTABannerProps>;
+
+/**
+ * FeatureCard Molecule Component
+ *
+ * A card highlighting a feature with icon, title, description, and optional link.
+ * Composes Card, VStack, Icon, Typography, and Button atoms.
+ */
+
+interface FeatureCardProps {
+    /** Icon name (Lucide string) or ReactNode */
+    icon?: string | React.ReactNode;
+    /** Feature title */
+    title: string;
+    /** Feature description */
+    description: string;
+    /** Optional link URL */
+    href?: string;
+    /** Label for the link button */
+    linkLabel?: string;
+    /** Card visual variant */
+    variant?: 'default' | 'bordered' | 'elevated' | 'interactive';
+    /** Card size affecting icon and spacing */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class names */
+    className?: string;
+}
+declare const FeatureCard: React.FC<FeatureCardProps>;
+
+/**
+ * FeatureGrid Molecule Component
+ *
+ * A responsive grid layout for displaying multiple FeatureCards.
+ * Composes SimpleGrid and FeatureCard molecules.
+ */
+
+interface FeatureGridProps {
+    /** Array of feature card configurations */
+    items: FeatureCardProps[];
+    /** Number of grid columns */
+    columns?: 2 | 3 | 4 | 6;
+    /** Gap between grid items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Additional class names */
+    className?: string;
+}
+declare const FeatureGrid: React.FC<FeatureGridProps>;
+
+/**
+ * PricingCard Molecule Component
+ *
+ * A pricing tier card showing plan name, price, features, and CTA button.
+ * Composes atoms: Card, VStack, HStack, Badge, Typography, Icon, Divider, Spacer, Button.
+ */
+
+interface PricingCardProps {
+    name: string;
+    price: string;
+    description?: string;
+    features: string[];
+    action: {
+        label: string;
+        href: string;
+    };
+    highlighted?: boolean;
+    badge?: string;
+    className?: string;
+}
+declare const PricingCard: React.FC<PricingCardProps>;
+
+/**
+ * PricingGrid Molecule Component
+ *
+ * A responsive grid of PricingCard molecules.
+ * Composes: SimpleGrid + PricingCard.
+ */
+
+interface PricingGridProps {
+    plans: PricingCardProps[];
+    className?: string;
+}
+declare const PricingGrid: React.FC<PricingGridProps>;
+
+/**
+ * SplitSection Molecule Component
+ *
+ * A two-column content section with text on one side and an image (or custom content) on the other.
+ * Composes Box, HStack, VStack, Typography, and Icon atoms.
+ */
+
+interface SplitSectionProps {
+    title: string;
+    description: string | React.ReactNode;
+    bullets?: string[];
+    image?: {
+        src: string;
+        alt: string;
+    };
+    imagePosition?: 'left' | 'right';
+    background?: 'default' | 'alt';
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const SplitSection: React.FC<SplitSectionProps>;
+
+/**
+ * InstallBox Molecule Component
+ *
+ * A copyable command display box for install/CLI commands.
+ * Shows a monospace command with a copy-to-clipboard button.
+ */
+
+interface InstallBoxProps {
+    /** The command to display and copy */
+    command: string;
+    /** Optional label above the command */
+    label?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare const InstallBox: React.FC<InstallBoxProps>;
+
+/**
+ * StepFlow Molecule Component
+ *
+ * A step-by-step progress indicator supporting horizontal and vertical orientations.
+ * Composes Center, Typography, Icon, HStack, VStack, Box, and Divider atoms.
+ */
+
+interface StepItemProps {
+    number?: number;
+    title: string;
+    description: string;
+    icon?: string;
+}
+interface StepFlowProps {
+    steps: StepItemProps[];
+    orientation?: 'horizontal' | 'vertical';
+    showConnectors?: boolean;
+    className?: string;
+}
+declare const StepFlow: React.FC<StepFlowProps>;
+
+/**
+ * StatsGrid Molecule Component
+ *
+ * A responsive grid of stat items showing value + label pairs.
+ * Composes: SimpleGrid + VStack + Typography.
+ * Uses StatDisplay internally when available for consistent styling.
+ */
+
+interface StatsGridProps {
+    stats: {
+        value: string;
+        label: string;
+    }[];
+    columns?: 2 | 3 | 4 | 6;
+    className?: string;
+}
+declare const StatsGrid: React.FC<StatsGridProps>;
+
+/**
+ * TagCloud Molecule Component
+ *
+ * A collection of tags displayed as badges in a wrapping layout.
+ * Composes HStack and Badge atoms.
+ */
+
+interface TagCloudItem {
+    label: string;
+    href?: string;
+    variant?: string;
+}
+interface TagCloudProps {
+    tags: string[] | TagCloudItem[];
+    variant?: 'default' | 'primary' | 'accent';
+    className?: string;
+}
+declare const TagCloud: React.FC<TagCloudProps>;
+
+/**
+ * CommunityLinks Molecule Component
+ *
+ * Displays community platform links (GitHub, Discord, Twitter) as styled buttons.
+ * Composes VStack, HStack, Typography, Button, and Icon atoms.
+ */
+
+interface CommunityLinksProps {
+    github?: {
+        url: string;
+        stars?: number;
+    };
+    discord?: {
+        url: string;
+        members?: number;
+    };
+    twitter?: {
+        url: string;
+        followers?: number;
+    };
+    heading?: string;
+    subtitle?: string;
+    className?: string;
+}
+declare const CommunityLinks: React.FC<CommunityLinksProps>;
+
+/**
+ * ServiceCatalog Molecule Component
+ *
+ * Displays a grid of services organized by layer, each shown as a card
+ * with a layer badge and service name.
+ */
+
+interface ServiceCatalogItem {
+    name: string;
+    layer: string;
+    layerColor?: string;
+}
+interface ServiceCatalogProps {
+    /** List of services to display */
+    services: ServiceCatalogItem[];
+    /** Additional class names */
+    className?: string;
+}
+declare const ServiceCatalog: React.FC<ServiceCatalogProps>;
+
+/**
+ * ShowcaseCard Molecule Component
+ *
+ * A card for showcasing projects, demos, or portfolio items with an image, badge, and description.
+ * Composes Card, Box, VStack, Badge, and Typography atoms.
+ */
+
+interface ShowcaseCardProps {
+    title: string;
+    description?: string;
+    image: {
+        src: string;
+        alt: string;
+    };
+    href?: string;
+    badge?: string;
+    accentColor?: string;
+    className?: string;
+}
+declare const ShowcaseCard: React.FC<ShowcaseCardProps>;
+
+/**
+ * TeamCard Molecule Component
+ *
+ * A card displaying a team member with avatar, name, role, and bio.
+ * Composes Card, VStack, Avatar, and Typography atoms.
+ */
+
+interface TeamCardProps {
+    name: string;
+    nameAr?: string;
+    role: string;
+    bio: string;
+    avatar?: string | {
+        initials: string;
+    };
+    className?: string;
+}
+declare const TeamCard: React.FC<TeamCardProps>;
+
+/**
+ * CaseStudyCard Molecule Component
+ *
+ * A card for displaying case studies with category badge, title,
+ * description, and a call-to-action link button.
+ */
+
+interface CaseStudyCardProps {
+    /** Case study title */
+    title: string;
+    /** Short description of the case study */
+    description: string;
+    /** Category label shown as a badge */
+    category: string;
+    /** Custom background color for the category badge (CSS value) */
+    categoryColor?: string;
+    /** URL the card links to */
+    href: string;
+    /** Label for the link button */
+    linkLabel?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare const CaseStudyCard: React.FC<CaseStudyCardProps>;
+
+/**
+ * ArticleSection Molecule Component
+ *
+ * A centered content section with a title and constrained max-width,
+ * suitable for article or documentation layouts.
+ */
+
+interface ArticleSectionProps {
+    /** Section title */
+    title: string;
+    /** Section content */
+    children: React.ReactNode;
+    /** Maximum width constraint */
+    maxWidth?: 'sm' | 'md' | 'lg';
+    /** Additional class names */
+    className?: string;
+}
+declare const ArticleSection: React.FC<ArticleSectionProps>;
+
+/**
+ * SimpleGrid Component
+ *
+ * A simplified grid that automatically adjusts columns based on available space.
+ * Perfect for card layouts and item collections.
+ */
+
+type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface SimpleGridProps {
+    /** Minimum width of each child (e.g., 200, "200px", "15rem") */
+    minChildWidth?: number | string;
+    /** Maximum number of columns */
+    maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Exact number of columns (disables auto-fit) */
+    cols?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Gap between items */
+    gap?: SimpleGridGap;
+    /** Custom class name */
+    className?: string;
+    /** Children elements */
+    children: React.ReactNode;
+}
+/**
+ * SimpleGrid - Auto-responsive grid layout
+ */
+declare const SimpleGrid: React.FC<SimpleGridProps>;
+
+/**
+ * MarketingFooter Molecule Component
+ *
+ * A themed footer for marketing/documentation sites.
+ * Displays link columns, optional logo, and copyright text.
+ * Uses @almadar/ui theme CSS variables for consistent branding.
+ */
+
+interface FooterLinkItem {
+    label: string;
+    href: string;
+}
+interface FooterLinkColumn {
+    title: string;
+    items: FooterLinkItem[];
+}
+interface MarketingFooterProps {
+    columns: FooterLinkColumn[];
+    copyright?: string;
+    logo?: {
+        src: string;
+        alt: string;
+        href?: string;
+    };
+    className?: string;
+}
+declare const MarketingFooter: React.FC<MarketingFooterProps>;
+
+/**
+ * GradientDivider Molecule Component
+ *
+ * A horizontal line that fades from transparent at edges to primary color at center.
+ * Used between major sections for visual separation without hard background-color breaks.
+ */
+
+interface GradientDividerProps {
+    /** Override the center color (CSS value). Defaults to var(--color-primary). */
+    color?: string;
+    /** Additional class names */
+    className?: string;
+}
+declare const GradientDivider: React.FC<GradientDividerProps>;
+
+/**
+ * PullQuote Molecule Component
+ *
+ * Large italic text with a thick left border in primary color.
+ * Breaks up prose walls on long-form pages like Vision and case studies.
+ */
+
+interface PullQuoteProps {
+    /** The quote text */
+    children: string;
+    /** Additional class names */
+    className?: string;
+}
+declare const PullQuote: React.FC<PullQuoteProps>;
+
+/**
+ * AnimatedCounter Molecule Component
+ *
+ * Counts from 0 to a target value on scroll-into-view using IntersectionObserver.
+ * Replaces static stat numbers with animated versions for visual impact.
+ */
+
+interface AnimatedCounterProps {
+    /** Target value to count to (e.g. "500+", "99.9%", "3x") */
+    value: string;
+    /** Label displayed below the number */
+    label: string;
+    /** Animation duration in ms */
+    duration?: number;
+    /** Additional class names */
+    className?: string;
+}
+declare const AnimatedCounter: React.FC<AnimatedCounterProps>;
+
+export { AnimatedCounter, type AnimatedCounterProps, ArticleSection, type ArticleSectionProps, Badge, Box, Button, CTABanner, type CTABannerProps, Card, CaseStudyCard, type CaseStudyCardProps, Center, CommunityLinks, type CommunityLinksProps, ContentSection, type ContentSectionProps, Divider, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, type FooterLinkColumn, type FooterLinkItem, GradientDivider, type GradientDividerProps, HStack, HeroSection, type HeroSectionProps, Icon, InstallBox, type InstallBoxProps, MarketingFooter, type MarketingFooterProps, PricingCard, type PricingCardProps, PricingGrid, type PricingGridProps, PullQuote, type PullQuoteProps, ServiceCatalog, type ServiceCatalogProps, ShowcaseCard, type ShowcaseCardProps, SimpleGrid, Spacer, SplitSection, type SplitSectionProps, StatsGrid, type StatsGridProps, StepFlow, type StepFlowProps, type StepItemProps, TagCloud, type TagCloudProps, TeamCard, type TeamCardProps, Typography, VStack };