@almadar/ui 2.15.8 → 2.15.11

package/dist/components/molecules/AnimatedCounter.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export 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;
+}
+export declare const AnimatedCounter: React.FC<AnimatedCounterProps>;

package/dist/components/molecules/ArticleSection.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ArticleSection Molecule Component
+ *
+ * A centered content section with a title and constrained max-width,
+ * suitable for article or documentation layouts.
+ */
+import React from 'react';
+export interface ArticleSectionProps {
+    /** Section title */
+    title: string;
+    /** Section content */
+    children: React.ReactNode;
+    /** Maximum width constraint */
+    maxWidth?: 'sm' | 'md' | 'lg';
+    /** Additional class names */
+    className?: string;
+}
+export declare const ArticleSection: React.FC<ArticleSectionProps>;

package/dist/components/molecules/CTABanner.d.ts

@@ -0,0 +1,31 @@
+/**
+ * CTABanner Molecule Component
+ *
+ * A call-to-action banner with title, subtitle, and action buttons.
+ * Uses the site's theme naturally - no forced color inversions.
+ */
+import React from 'react';
+export type CTABannerBackground = 'default' | 'alt' | 'dark' | 'gradient' | 'primary';
+export 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;
+}
+export declare const CTABanner: React.FC<CTABannerProps>;

package/dist/components/molecules/CaseStudyCard.d.ts

@@ -0,0 +1,24 @@
+/**
+ * CaseStudyCard Molecule Component
+ *
+ * A card for displaying case studies with category badge, title,
+ * description, and a call-to-action link button.
+ */
+import React from 'react';
+export 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;
+}
+export declare const CaseStudyCard: React.FC<CaseStudyCardProps>;

package/dist/components/molecules/CodeExample.d.ts

@@ -0,0 +1,23 @@
+/**
+ * CodeExample Molecule Component
+ *
+ * Displays a block of code with an optional title bar, copy button,
+ * and scrollable area. A standalone fallback for code display
+ * without syntax highlighting.
+ */
+import React from 'react';
+export interface CodeExampleProps {
+    /** The code content to display */
+    code: string;
+    /** Programming language label */
+    language: string;
+    /** Optional title shown in the header bar */
+    title?: string;
+    /** Whether to show a copy button */
+    copyable?: boolean;
+    /** Maximum height of the code area (CSS value) */
+    maxHeight?: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const CodeExample: React.FC<CodeExampleProps>;

package/dist/components/molecules/CommunityLinks.d.ts

@@ -0,0 +1,25 @@
+/**
+ * CommunityLinks Molecule Component
+ *
+ * Displays community platform links (GitHub, Discord, Twitter) as styled buttons.
+ * Composes VStack, HStack, Typography, Button, and Icon atoms.
+ */
+import React from 'react';
+export interface CommunityLinksProps {
+    github?: {
+        url: string;
+        stars?: number;
+    };
+    discord?: {
+        url: string;
+        members?: number;
+    };
+    twitter?: {
+        url: string;
+        followers?: number;
+    };
+    heading?: string;
+    subtitle?: string;
+    className?: string;
+}
+export declare const CommunityLinks: React.FC<CommunityLinksProps>;

package/dist/components/molecules/DocBreadcrumb.d.ts

@@ -0,0 +1,20 @@
+/**
+ * DocBreadcrumb Molecule Component
+ *
+ * A breadcrumb navigation component for documentation pages.
+ * Composes from HStack, Typography, and Icon atoms.
+ */
+import React from 'react';
+export interface DocBreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Navigation href (omit for the current/last item) */
+    href?: string;
+}
+export interface DocBreadcrumbProps {
+    /** Breadcrumb path items, last item is treated as current page */
+    items: DocBreadcrumbItem[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DocBreadcrumb: React.FC<DocBreadcrumbProps>;

package/dist/components/molecules/DocCodeBlock.d.ts

@@ -0,0 +1,13 @@
+export interface DocCodeBlockProps {
+    /** Code content to display */
+    code: string;
+    /** Programming language label */
+    language?: string;
+    /** Optional title/filename shown in the header bar */
+    title?: string;
+    /** Show line numbers in the gutter */
+    showLineNumbers?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+export declare function DocCodeBlock({ code, language, title, showLineNumbers, className, }: DocCodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/DocPagination.d.ts

@@ -0,0 +1,14 @@
+export interface DocPaginationLink {
+    label: string;
+    href: string;
+    category?: string;
+}
+export interface DocPaginationProps {
+    /** Previous page link */
+    prev?: DocPaginationLink;
+    /** Next page link */
+    next?: DocPaginationLink;
+    /** Additional class names */
+    className?: string;
+}
+export declare function DocPagination({ prev, next, className }: DocPaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/DocSearch.d.ts

@@ -0,0 +1,15 @@
+export interface DocSearchResult {
+    title: string;
+    href: string;
+    excerpt?: string;
+    category?: string;
+}
+export interface DocSearchProps {
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Callback invoked with the search query, returns results */
+    onSearch?: (query: string) => DocSearchResult[] | Promise<DocSearchResult[]>;
+    /** Additional class names */
+    className?: string;
+}
+export declare function DocSearch({ placeholder, onSearch, className, }: DocSearchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/DocSidebar.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DocSidebar Molecule Component
+ *
+ * A documentation navigation sidebar with collapsible category sections.
+ * Composes from Box, VStack, HStack, Typography, and Icon atoms.
+ */
+import React from 'react';
+export interface DocSidebarItem {
+    /** Display label */
+    label: string;
+    /** Navigation href */
+    href?: string;
+    /** Nested child items (makes this a collapsible category) */
+    items?: DocSidebarItem[];
+    /** Whether this item is currently active */
+    active?: boolean;
+}
+export interface DocSidebarProps {
+    /** Sidebar navigation items */
+    items: DocSidebarItem[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DocSidebar: React.FC<DocSidebarProps>;

package/dist/components/molecules/DocTOC.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DocTOC Molecule Component
+ *
+ * A table of contents component with active section highlighting.
+ * Composes from Box, VStack, and Typography atoms.
+ */
+import React from 'react';
+export interface DocTOCItem {
+    /** Heading element id to link to */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Heading level: 2 for h2, 3 for h3, etc. */
+    level: number;
+}
+export interface DocTOCProps {
+    /** Table of contents items */
+    items: DocTOCItem[];
+    /** Currently active section id */
+    activeId?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const DocTOC: React.FC<DocTOCProps>;

package/dist/components/molecules/FeatureCard.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FeatureCard Molecule Component
+ *
+ * A card highlighting a feature with icon, title, description, and optional link.
+ * Composes Card, VStack, Icon, Typography, and Button atoms.
+ */
+import React from 'react';
+export 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;
+}
+export declare const FeatureCard: React.FC<FeatureCardProps>;

package/dist/components/molecules/FeatureGrid.d.ts

@@ -0,0 +1,19 @@
+/**
+ * FeatureGrid Molecule Component
+ *
+ * A responsive grid layout for displaying multiple FeatureCards.
+ * Composes SimpleGrid and FeatureCard molecules.
+ */
+import React from 'react';
+import { type FeatureCardProps } from './FeatureCard';
+export 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;
+}
+export declare const FeatureGrid: React.FC<FeatureGridProps>;

package/dist/components/molecules/GradientDivider.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface GradientDividerProps {
+    /** Override the center color (CSS value). Defaults to var(--color-primary). */
+    color?: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const GradientDivider: React.FC<GradientDividerProps>;

package/dist/components/molecules/HeroSection.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export 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;
+}
+export declare const HeroSection: React.FC<HeroSectionProps>;

package/dist/components/molecules/InstallBox.d.ts

@@ -0,0 +1,16 @@
+/**
+ * InstallBox Molecule Component
+ *
+ * A copyable command display box for install/CLI commands.
+ * Shows a monospace command with a copy-to-clipboard button.
+ */
+import React from 'react';
+export interface InstallBoxProps {
+    /** The command to display and copy */
+    command: string;
+    /** Optional label above the command */
+    label?: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const InstallBox: React.FC<InstallBoxProps>;

package/dist/components/molecules/MarketingFooter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface FooterLinkItem {
+    label: string;
+    href: string;
+}
+export interface FooterLinkColumn {
+    title: string;
+    items: FooterLinkItem[];
+}
+export interface MarketingFooterProps {
+    columns: FooterLinkColumn[];
+    copyright?: string;
+    logo?: {
+        src: string;
+        alt: string;
+        href?: string;
+    };
+    className?: string;
+}
+export declare const MarketingFooter: React.FC<MarketingFooterProps>;

package/dist/components/molecules/PricingCard.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface PricingCardProps {
+    name: string;
+    price: string;
+    description?: string;
+    features: string[];
+    action: {
+        label: string;
+        href: string;
+    };
+    highlighted?: boolean;
+    badge?: string;
+    className?: string;
+}
+export declare const PricingCard: React.FC<PricingCardProps>;

package/dist/components/molecules/PricingGrid.d.ts

@@ -0,0 +1,13 @@
+/**
+ * PricingGrid Molecule Component
+ *
+ * A responsive grid of PricingCard molecules.
+ * Composes: SimpleGrid + PricingCard.
+ */
+import React from 'react';
+import { type PricingCardProps } from './PricingCard';
+export interface PricingGridProps {
+    plans: PricingCardProps[];
+    className?: string;
+}
+export declare const PricingGrid: React.FC<PricingGridProps>;

package/dist/components/molecules/PullQuote.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface PullQuoteProps {
+    /** The quote text */
+    children: string;
+    /** Additional class names */
+    className?: string;
+}
+export declare const PullQuote: React.FC<PullQuoteProps>;

package/dist/components/molecules/ServiceCatalog.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ServiceCatalog Molecule Component
+ *
+ * Displays a grid of services organized by layer, each shown as a card
+ * with a layer badge and service name.
+ */
+import React from 'react';
+export interface ServiceCatalogItem {
+    name: string;
+    layer: string;
+    layerColor?: string;
+}
+export interface ServiceCatalogProps {
+    /** List of services to display */
+    services: ServiceCatalogItem[];
+    /** Additional class names */
+    className?: string;
+}
+export declare const ServiceCatalog: React.FC<ServiceCatalogProps>;

package/dist/components/molecules/ShowcaseCard.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface ShowcaseCardProps {
+    title: string;
+    description?: string;
+    image: {
+        src: string;
+        alt: string;
+    };
+    href?: string;
+    badge?: string;
+    accentColor?: string;
+    className?: string;
+}
+export declare const ShowcaseCard: React.FC<ShowcaseCardProps>;

package/dist/components/molecules/SocialProof.d.ts

@@ -0,0 +1,25 @@
+/**
+ * SocialProof Molecule Component
+ *
+ * Displays social proof in three variants: company logos, customer quotes,
+ * or technology badges. Composes HStack, SimpleGrid, Card, Badge,
+ * Box, and Typography atoms.
+ */
+import React from 'react';
+export interface SocialProofItem {
+    /** Optional logo URL */
+    logo?: string;
+    /** Company or person name */
+    name: string;
+    /** Optional quote or testimonial text */
+    quote?: string;
+}
+export interface SocialProofProps {
+    /** List of social proof items */
+    items: SocialProofItem[];
+    /** Display variant */
+    variant?: 'logos' | 'quotes' | 'badges';
+    /** Additional class names */
+    className?: string;
+}
+export declare const SocialProof: React.FC<SocialProofProps>;

package/dist/components/molecules/SplitSection.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export 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;
+}
+export declare const SplitSection: React.FC<SplitSectionProps>;

package/dist/components/molecules/StatsGrid.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+import React from 'react';
+export interface StatsGridProps {
+    stats: {
+        value: string;
+        label: string;
+    }[];
+    columns?: 2 | 3 | 4 | 6;
+    className?: string;
+}
+export declare const StatsGrid: React.FC<StatsGridProps>;

package/dist/components/molecules/StepFlow.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StepFlow Molecule Component
+ *
+ * A step-by-step progress indicator supporting horizontal and vertical orientations.
+ * Composes Center, Typography, Icon, HStack, VStack, Box, and Divider atoms.
+ */
+import React from 'react';
+export interface StepItemProps {
+    number?: number;
+    title: string;
+    description: string;
+    icon?: string;
+}
+export interface StepFlowProps {
+    steps: StepItemProps[];
+    orientation?: 'horizontal' | 'vertical';
+    showConnectors?: boolean;
+    className?: string;
+}
+export declare const StepFlow: React.FC<StepFlowProps>;

package/dist/components/molecules/TagCloud.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TagCloud Molecule Component
+ *
+ * A collection of tags displayed as badges in a wrapping layout.
+ * Composes HStack and Badge atoms.
+ */
+import React from 'react';
+export interface TagCloudItem {
+    label: string;
+    href?: string;
+    variant?: string;
+}
+export interface TagCloudProps {
+    tags: string[] | TagCloudItem[];
+    variant?: 'default' | 'primary' | 'accent';
+    className?: string;
+}
+export declare const TagCloud: React.FC<TagCloudProps>;

package/dist/components/molecules/TeamCard.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TeamCard Molecule Component
+ *
+ * A card displaying a team member with avatar, name, role, and bio.
+ * Composes Card, VStack, Avatar, and Typography atoms.
+ */
+import React from 'react';
+export interface TeamCardProps {
+    name: string;
+    nameAr?: string;
+    role: string;
+    bio: string;
+    avatar?: string | {
+        initials: string;
+    };
+    className?: string;
+}
+export declare const TeamCard: React.FC<TeamCardProps>;

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

@@ -57,3 +57,22 @@ export { SwipeableRow, type SwipeableRowProps, type SwipeAction } from './Swipea
 export { SortableList, type SortableListProps } from './SortableList';
 export { Carousel, type CarouselProps } from './Carousel';
 export { PullToRefresh, type PullToRefreshProps } from './PullToRefresh';
+export { InstallBox, type InstallBoxProps } from './InstallBox';
+export { FeatureCard, type FeatureCardProps } from './FeatureCard';
+export { FeatureGrid, type FeatureGridProps } from './FeatureGrid';
+export { CTABanner, type CTABannerProps, type CTABannerBackground } from './CTABanner';
+export { HeroSection, type HeroSectionProps } from './HeroSection';
+export { PricingCard, type PricingCardProps } from './PricingCard';
+export { PricingGrid, type PricingGridProps } from './PricingGrid';
+export { StatsGrid, type StatsGridProps } from './StatsGrid';
+export { ServiceCatalog, type ServiceCatalogProps, type ServiceCatalogItem } from './ServiceCatalog';
+export { CaseStudyCard, type CaseStudyCardProps } from './CaseStudyCard';
+export { ArticleSection, type ArticleSectionProps } from './ArticleSection';
+export { CodeExample, type CodeExampleProps } from './CodeExample';
+export { SocialProof, type SocialProofProps, type SocialProofItem } from './SocialProof';
+export { StepFlow, type StepFlowProps, type StepItemProps } from './StepFlow';
+export { SplitSection, type SplitSectionProps } from './SplitSection';
+export { TagCloud, type TagCloudProps, type TagCloudItem } from './TagCloud';
+export { CommunityLinks, type CommunityLinksProps } from './CommunityLinks';
+export { TeamCard, type TeamCardProps } from './TeamCard';
+export { ShowcaseCard, type ShowcaseCardProps } from './ShowcaseCard';

package/dist/components/molecules/svg/AIGenerates.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface AIGeneratesProps {
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+export declare const AIGenerates: React.FC<AIGeneratesProps>;