@caqophony/ui 0.3.0 → 0.4.0

package/dist/markdown.js

@@ -2,7 +2,8 @@
 "use client";
 import {
   MarkdownRenderer
-} from "./chunk-4YA6BZDJ.js";
+} from "./chunk-ODRGJV46.js";
+import "./chunk-DP5WQAPO.js";
 export {
   MarkdownRenderer
 };

package/dist/marketing.d.mts

@@ -0,0 +1,437 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode, AnchorHTMLAttributes } from 'react';
+
+interface MarketingNavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+interface MarketingHeaderProps {
+    /** Brand name displayed next to logo mark */
+    brandName: string;
+    /** Brand initials shown in the logo badge */
+    brandInitials: string;
+    /** Navigation items */
+    navItems?: MarketingNavItem[];
+    /** Optional right-side actions (buttons, links) */
+    actions?: ReactNode;
+    /** Additional className */
+    className?: string;
+    /**
+     * Visual variant:
+     *   - "light" (default): white card bg, dark text
+     *   - "dark": dark glassmorphic bg, light text (v4 marketing pages)
+     */
+    variant?: 'light' | 'dark';
+}
+/**
+ * Marketing site header with logo, navigation, and CTA actions.
+ * Sticky top navigation bar for product landing pages.
+ *
+ * Two variants:
+ *   light — standard white bg for app pages
+ *   dark — glassmorphic dark bg for the v4 marketing landing
+ *
+ * #5948: below `md` the links and actions fold into the library's one phone
+ * drawer (`NavbarMenu`), in both variants. The drawer stands on the card
+ * surface whichever the variant, so its links are drawn for that surface.
+ *
+ * #5952: the row has a limit, and past it the bar folds into the same drawer at
+ * any width (`useFold`), so a brand is never squeezed to make room for links.
+ * Before hydration the links give way (the nav has no basis of its own and
+ * clips them), so a server render keeps the brand and never scrolls the page.
+ *
+ * `actions` are one instance. They render into one node, and the node moves
+ * between the bar and the open drawer, so an action keeps its state and any
+ * modal it owns when the drawer closes around it. A server render has no
+ * portal, so they start inline and enter the node on mount.
+ *
+ * Authored by Caqophony
+ */
+declare function MarketingHeader({ brandName, brandInitials, navItems, actions, className, variant, }: MarketingHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface MarketingHeroProps {
+    /** Main headline text */
+    headline: string;
+    /** Subtitle/description text */
+    subtitle: string;
+    /** Action buttons rendered in a horizontal row */
+    actions?: ReactNode;
+    /** Optional visual element for split-layout heroes (e.g., a product mock) */
+    visual?: ReactNode;
+    /** Layout variant: centered (default) or split (text left, visual right) */
+    layout?: 'centered' | 'split';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Marketing hero section on the brand's solid ground.
+ * Supports centered layout (most pages) or split layout (copy beside a visual).
+ *
+ * CSS values traced from HTML mockups:
+ *   padding: 96px 48px 80px (centered), 80px 48px (split)
+ *   headline: the type scale, 900, line-height 1.1, max-width 800px
+ *   subtitle: 20px/400 line-height 1.6, max-width 640px
+ *   actions gap: 16px
+ *
+ * Authored by Caqophony
+ */
+declare function MarketingHero({ headline, subtitle, actions, visual, layout, className, }: MarketingHeroProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureCardProps {
+    /** Icon element rendered in the 48x48 icon container */
+    icon: ReactNode;
+    /** Feature title */
+    title: string;
+    /** Feature description */
+    description: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Feature card used in marketing feature grids.
+ * Displays an icon, title, and description in a bordered card.
+ *
+ * CSS values traced from HTML mockups:
+ *   card: bg card, border 1px border, border-radius 12px, padding 24px, shadow-sm
+ *   icon container: 48x48, bg primary/10, border-radius 8px
+ *   icon: 24x24, color primary
+ *   title: 16px/700, margin-bottom 8px
+ *   description: the type scale's sm, muted-fg, line-height 1.6
+ *
+ * Authored by Caqophony
+ */
+declare function FeatureCard({ icon, title, description, className, }: FeatureCardProps): react_jsx_runtime.JSX.Element;
+
+interface PricingTierProps {
+    /** Tier name (e.g., "Free Tier", "Pro") */
+    name: string;
+    /** Price display (e.g., "$0", "$29", "Usage-based") */
+    price: string;
+    /** Period text (e.g., "forever", "per AI agent/month") */
+    period: string;
+    /** List of feature strings */
+    features: string[];
+    /** Whether this tier is highlighted/recommended */
+    highlighted?: boolean;
+    /** Action button */
+    action?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Pricing tier card for marketing pricing sections.
+ * Supports a highlighted variant for the recommended plan.
+ *
+ * CSS values traced from HTML mockups:
+ *   card: bg card, border 1px border, border-radius 12px, padding 32px, text-align center
+ *   highlighted: border-color primary, shadow ring 2px primary/10 + shadow-lg
+ *   name: 18px/700
+ *   price: the type scale's 4xl, 900, primary-text
+ *   period: the type scale's sm, muted-fg, margin-bottom 24px
+ *   features: list-style none, text-align left, 14px, padding 6px 0, green dots 8px
+ *
+ * Authored by Caqophony
+ */
+declare function PricingTier({ name, price, period, features, highlighted, action, className, }: PricingTierProps): react_jsx_runtime.JSX.Element;
+
+interface MarketingFAQItemProps {
+    /** The question */
+    question: string;
+    /** The answer */
+    answer: string;
+    /** Whether this is displayed on a dark background */
+    dark?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Individual FAQ item for marketing FAQ sections.
+ * Displays a question and answer with a bottom border separator.
+ *
+ * CSS values traced from HTML mockups:
+ *   container: border-bottom 1px dark-border, padding 24px 0
+ *   question: 16px/600 (dark: dark-fg color)
+ *   answer: 14px, line-height 1.7, color dark-muted
+ *
+ * Authored by Caqophony
+ */
+declare function MarketingFAQItem({ question, answer, dark, className, }: MarketingFAQItemProps): react_jsx_runtime.JSX.Element;
+
+interface CTABannerProps {
+    /** Main headline */
+    headline: string;
+    /** Description text */
+    description: string;
+    /** Action buttons */
+    actions?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Full-width CTA banner section for marketing pages.
+ * The brand's solid ground with centered text and actions.
+ *
+ * CSS values traced from HTML mockups:
+ *   padding 80px 48px, text-align center
+ *   headline: 36px/800, margin-bottom 16px
+ *   description: 18px, margin-bottom 32px
+ *   actions: flex, gap 16px, justify-content center
+ *
+ * Authored by Caqophony
+ */
+declare function CTABanner({ headline, description, actions, className, }: CTABannerProps): react_jsx_runtime.JSX.Element;
+
+type MarketingCtaGround = 'light' | 'brand' | 'dark' | 'image';
+type MarketingCtaEmphasis = 'primary' | 'secondary';
+interface MarketingCtaProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'> {
+    /** Where it goes. */
+    href: string;
+    /** What it stands on: `brand` is the primary colour, `dark` a night band, `image` a picture. */
+    ground: MarketingCtaGround;
+    /** `primary` is the one action a section asks for; `secondary` the quieter one beside it. */
+    emphasis: MarketingCtaEmphasis;
+    children: ReactNode;
+}
+/** A marketing call to action, drawn for the ground it stands on. */
+declare function MarketingCta({ href, ground, emphasis, className, children, ...anchor }: MarketingCtaProps): react_jsx_runtime.JSX.Element;
+
+interface HowItWorksStepProps {
+    /** Step number (1, 2, 3, 4) */
+    stepNumber: number;
+    /** Step title */
+    title: string;
+    /** Step description */
+    description: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Individual step card for "How It Works" sections.
+ * Centered layout with numbered circle, title, and description.
+ *
+ * CSS values traced from HTML mockups:
+ *   container: text-align center
+ *   number circle: 48x48, border-radius 50%, bg primary-solid,
+ *     font-size 20px/700, margin 0 auto 16px
+ *   title: the type scale's base, 700, margin-bottom 8px
+ *   description: the type scale's sm, muted-fg, line-height 1.6
+ *
+ * Authored by Caqophony
+ */
+declare function HowItWorksStep({ stepNumber, title, description, className, }: HowItWorksStepProps): react_jsx_runtime.JSX.Element;
+
+interface UseCaseCardProps {
+    /** Persona/audience name (e.g., "Development Teams", "Solo Founders") */
+    persona: string;
+    /** Scenario description */
+    scenario: string;
+    /** Outcome/result text (displayed in success color) */
+    outcome: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Use case card for marketing persona/audience sections.
+ * Bordered card with persona, scenario description, and outcome.
+ *
+ * CSS values traced from HTML mockups:
+ *   card: bg card, border 1px border, border-radius 12px, padding 32px
+ *   persona: 18px/700, margin-bottom 12px
+ *   scenario: 14px muted-fg, line-height 1.6, margin-bottom 16px
+ *   outcome: 14px/500 success color, line-height 1.5
+ *
+ * Authored by Caqophony
+ */
+declare function UseCaseCard({ persona, scenario, outcome, className, }: UseCaseCardProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPost {
+    id: string;
+    title: string;
+    excerpt?: string;
+    date: string;
+    author?: string;
+    authorAvatar?: string;
+    thumbnail?: string;
+    category?: string;
+    href?: string;
+}
+interface BlogGridProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'threeColumn' | 'featured' | 'list';
+    /** Blog posts */
+    posts: BlogPost[];
+    /** Section heading */
+    heading?: string;
+    /** Section description */
+    description?: string;
+}
+declare function BlogGrid({ variant, posts, heading, description, className, ...props }: BlogGridProps): react_jsx_runtime.JSX.Element;
+
+interface ComparisonPlan {
+    id: string;
+    name: string;
+    description?: string;
+    featured?: boolean;
+    /** The label over a featured plan's column (`featured` variant) */
+    badge?: string;
+}
+interface ComparisonFeature {
+    key: string;
+    label: string;
+    values: Record<string, boolean | string>;
+}
+interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Layout variant */
+    variant?: 'simple' | 'featured';
+    /** Plans to compare */
+    plans: ComparisonPlan[];
+    /** Feature rows */
+    features: ComparisonFeature[];
+    /** Section heading */
+    heading?: string;
+}
+declare function ComparisonTable({ variant, plans, features, heading, className, ...props }: ComparisonTableProps): react_jsx_runtime.JSX.Element;
+
+interface LogoItem {
+    name: string;
+    src?: string;
+    icon?: React.ReactNode;
+}
+interface LogoCloudProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'simple' | 'branded' | 'scrolling';
+    /** Logo items */
+    logos: LogoItem[];
+    /** Section heading */
+    heading?: string;
+}
+declare function LogoCloud({ variant, logos, heading, className, ...props }: LogoCloudProps): react_jsx_runtime.JSX.Element;
+
+interface TeamMember {
+    id: string;
+    name: string;
+    role: string;
+    bio?: string;
+    avatar?: string;
+    socialLinks?: {
+        label: string;
+        href: string;
+        icon?: React.ReactNode;
+    }[];
+}
+interface TeamSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'grid' | 'list' | 'cards';
+    /** Team members */
+    members: TeamMember[];
+    /** Section heading */
+    heading?: string;
+    /** Section description */
+    description?: string;
+    /** Grid columns (grid/cards variant) */
+    columns?: 2 | 3 | 4;
+}
+declare function TeamSection({ variant, members, heading, description, columns, className, ...props }: TeamSectionProps): react_jsx_runtime.JSX.Element;
+
+interface NewsletterSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'centered' | 'split' | 'inline';
+    /** Section heading */
+    heading?: string;
+    /** Section description */
+    description?: string;
+    /** CTA button label */
+    ctaLabel?: string;
+    /** Placeholder for email input */
+    placeholder?: string;
+    /** Called with the email value on submit */
+    onSubscribe?: (email: string) => void;
+}
+declare function NewsletterSection({ variant, heading, description, ctaLabel, placeholder, onSubscribe, className, ...props }: NewsletterSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ContactFormData {
+    name: string;
+    email: string;
+    message: string;
+}
+interface ContactSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'splitForm' | 'centered' | 'withMap';
+    /** Section heading */
+    heading?: string;
+    /** Section description */
+    description?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Called with form data on submit */
+    onSubmitForm?: (data: ContactFormData) => void;
+    /** Map slot (withMap variant) */
+    mapSlot?: React.ReactNode;
+}
+declare function ContactSection({ variant, heading, description, submitLabel, onSubmitForm, mapSlot, className, ...props }: ContactSectionProps): react_jsx_runtime.JSX.Element;
+
+interface FooterLink {
+    label: string;
+    href: string;
+}
+interface FooterLinkGroup {
+    title: string;
+    links: FooterLink[];
+}
+interface SocialLink {
+    label: string;
+    href: string;
+    icon: React.ReactNode;
+}
+interface MarketingFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'simple' | 'multiColumn' | 'withNewsletter';
+    /** Company/product name */
+    brandName: string;
+    /** The product's mark: drawn in a 24px box, in the `primary-text` colour */
+    logo?: React.ReactNode;
+    /** Link groups (multiColumn variant) */
+    linkGroups?: FooterLinkGroup[];
+    /** Flat links (simple variant) */
+    links?: FooterLink[];
+    /** Social media links */
+    socialLinks?: SocialLink[];
+    /** Legal/copyright text */
+    legalText?: string;
+    /** Newsletter heading (withNewsletter variant) */
+    newsletterHeading?: string;
+    /** Newsletter description */
+    newsletterDescription?: string;
+    /** Called with email on newsletter subscribe */
+    onSubscribe?: (email: string) => void;
+}
+declare function MarketingFooter({ variant, brandName, logo, linkGroups, links, socialLinks, legalText, newsletterHeading, newsletterDescription, onSubscribe, className, ...props }: MarketingFooterProps): react_jsx_runtime.JSX.Element;
+
+interface Testimonial {
+    id: string;
+    quote: string;
+    name: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+    logo?: string;
+}
+interface TestimonialSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout variant */
+    variant?: 'grid' | 'carousel' | 'singleQuote' | 'wallOfLove';
+    /** Testimonial data */
+    testimonials: Testimonial[];
+    /** Section heading */
+    heading?: string;
+    /** Section subheading */
+    subheading?: string;
+    /** Grid columns (grid variant) */
+    columns?: 2 | 3;
+    /** Auto-advance interval in ms (carousel variant, 0 to disable) */
+    autoPlayInterval?: number;
+}
+declare function TestimonialSection({ variant, testimonials, heading, subheading, columns, autoPlayInterval, className, ...props }: TestimonialSectionProps): react_jsx_runtime.JSX.Element;
+
+export { BlogGrid, type BlogGridProps, type BlogPost, CTABanner, type CTABannerProps, type ComparisonFeature, type ComparisonPlan, ComparisonTable, type ComparisonTableProps, type ContactFormData, ContactSection, type ContactSectionProps, FeatureCard, type FeatureCardProps, type FooterLink, type FooterLinkGroup, LogoCloud, type LogoCloudProps, type LogoItem, MarketingCta, type MarketingCtaEmphasis, type MarketingCtaGround, type MarketingCtaProps, MarketingFAQItem, type MarketingFAQItemProps, MarketingFooter, type MarketingFooterProps, MarketingHeader, type MarketingHeaderProps, MarketingHero, type MarketingHeroProps, HowItWorksStep as MarketingHowItWorksStep, type HowItWorksStepProps as MarketingHowItWorksStepProps, type MarketingNavItem, PricingTier as MarketingPricingTier, type PricingTierProps as MarketingPricingTierProps, NewsletterSection, type NewsletterSectionProps, type SocialLink, type TeamMember, TeamSection, type TeamSectionProps, type Testimonial, TestimonialSection, type TestimonialSectionProps, UseCaseCard, type UseCaseCardProps };