@nimblegiant/stilts 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,706 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MainNavProps {
+    currentPath: string;
+    isPortfolioPage?: boolean;
+}
+declare function MainNav({ currentPath, isPortfolioPage }: MainNavProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Layout Components
+ */
+
+declare const index$2_MainNav: typeof MainNav;
+declare namespace index$2 {
+  export { index$2_MainNav as MainNav };
+}
+
+interface ToastOptions {
+    type?: "success" | "error" | "info" | "warning";
+    title?: string;
+    message?: string;
+    duration?: number;
+}
+declare global {
+    interface Window {
+        showToast: (options: ToastOptions) => void;
+    }
+}
+declare function ToastContainer(): react_jsx_runtime.JSX.Element;
+
+/**
+ * UI Components
+ */
+
+declare namespace index$1 {
+  export { ToastContainer as Toast };
+}
+
+/**
+ * PageHero.tsx
+ * Simple hero section with optional background image
+ * Uses design system patterns
+ */
+interface PageHeroProps {
+    title: string;
+    subtitle?: string;
+    description?: string;
+    eyebrow?: string;
+    backgroundImage?: string;
+    align?: "left" | "center" | "right";
+    children?: React.ReactNode;
+}
+declare function PageHero({ title, subtitle, eyebrow, description, backgroundImage, align, children, }: PageHeroProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * VideoHero.tsx
+ * Full-screen hero with video background and floating orbs
+ * Uses design system patterns
+ */
+interface ServiceCard {
+    href: string;
+    icon: string;
+    title: string;
+    description: string;
+}
+interface VideoHeroProps {
+    videoSrc?: string;
+    fallbackImage?: string;
+    eyebrow?: string;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    serviceCards?: ServiceCard[];
+    showScrollIndicator?: boolean;
+    scrollTarget?: string;
+    children?: React.ReactNode;
+}
+declare function VideoHero({ videoSrc, fallbackImage, eyebrow, title, subtitle, description, serviceCards, showScrollIndicator, scrollTarget, children, }: VideoHeroProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TeamGrid.tsx
+ * Team member display grid
+ * Uses design system patterns
+ */
+interface TeamMember {
+    name: string;
+    role: string;
+    title?: string;
+    image: string;
+    bio: string;
+    linkedin?: string;
+    twitter?: string;
+    email?: string;
+}
+interface TeamGridProps {
+    members: TeamMember[];
+    cols?: 2 | 3 | 4;
+    title?: string;
+}
+declare function TeamGrid({ members, cols, title }: TeamGridProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ServiceSection.tsx
+ * Service section with title, description, and features grid
+ * Uses design system patterns
+ */
+interface Feature {
+    title: string;
+    description: string;
+}
+interface ServiceSectionProps {
+    id: string;
+    title: string;
+    description: string;
+    features: Feature[];
+}
+declare function ServiceSection({ id, title, description, features }: ServiceSectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ProcessSteps.tsx
+ * Horizontal or vertical process steps
+ * Uses design system patterns
+ */
+interface Step {
+    number?: number;
+    title: string;
+    description: string;
+}
+interface ProcessStepsProps {
+    steps: Step[];
+    title?: string;
+    variant?: "horizontal" | "vertical";
+    background?: "default" | "muted";
+}
+declare function ProcessSteps({ steps, title, variant, background, }: ProcessStepsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatBar.tsx
+ * Statistics display with optional header
+ * Uses design system patterns
+ */
+interface StatData {
+    value: string | number;
+    label: string;
+    prefix?: string;
+    suffix?: string;
+}
+interface StatBarProps {
+    stats: StatData[];
+    title?: string;
+    description?: string | string[];
+    centered?: boolean;
+    background?: "default" | "muted";
+}
+declare function StatBar({ stats, title, description, centered, background, }: StatBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * IndustryGrid.tsx
+ * Industry cards in a grid layout
+ * Uses design system patterns
+ */
+interface Industry {
+    title: string;
+    description: string;
+}
+interface IndustryGridProps {
+    industries: Industry[];
+    title?: string;
+    cols?: 2 | 3;
+}
+declare function IndustryGrid({ industries, title, cols }: IndustryGridProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ContentPage.tsx
+ * Simple content page wrapper for MDX
+ */
+interface ContentPageProps {
+    title: string;
+    subtitle?: string;
+    lastUpdated?: string;
+    children: React.ReactNode;
+}
+declare function ContentPage({ title, subtitle, lastUpdated, children }: ContentPageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pattern Components
+ */
+
+declare const index_ContentPage: typeof ContentPage;
+declare const index_IndustryGrid: typeof IndustryGrid;
+declare const index_PageHero: typeof PageHero;
+declare const index_ProcessSteps: typeof ProcessSteps;
+declare const index_ServiceSection: typeof ServiceSection;
+declare const index_StatBar: typeof StatBar;
+declare const index_TeamGrid: typeof TeamGrid;
+declare const index_VideoHero: typeof VideoHero;
+declare namespace index {
+  export { index_ContentPage as ContentPage, index_IndustryGrid as IndustryGrid, index_PageHero as PageHero, index_ProcessSteps as ProcessSteps, index_ServiceSection as ServiceSection, index_StatBar as StatBar, index_TeamGrid as TeamGrid, index_VideoHero as VideoHero };
+}
+
+/**
+ * Section component data types
+ * These define the shape of data passed to section components
+ */
+interface CaseStudyBreakdown$1 {
+    type?: "case_study_breakdown";
+    title: string;
+    what_we_did: string;
+    how_we_did_it: string;
+    services_used: string[];
+    results?: string;
+    metrics: Array<{
+        value: string;
+        suffix?: string;
+        label: string;
+        description?: string;
+        trend?: "up" | "down";
+        icon?: string;
+    }>;
+}
+interface VideoHeroSection {
+    type?: "video_hero";
+    video: string;
+    title: string;
+    content: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    device_frame?: string;
+    overlay?: boolean;
+    overlay_position?: string;
+    overlay_content?: string;
+    caption?: string;
+}
+interface BeforeAfterSection {
+    type?: "before_after";
+    before_image: string;
+    after_image: string;
+    title: string;
+    content: string;
+    default_offset?: number;
+    before_label?: string;
+    after_label?: string;
+    caption?: string;
+}
+interface ImageGridSection {
+    type?: "image_grid";
+    grid_type: "50-50" | "2x2" | "3x3";
+    title: string;
+    content?: string;
+    full_width?: boolean;
+    images: Array<string | {
+        src: string;
+        alt: string;
+        caption?: string;
+    }>;
+    grid_caption?: string;
+}
+interface TextBlockSection {
+    type?: "text_block";
+    layout: "standard" | "centered" | "wide";
+    text_align?: "left" | "center" | "right";
+    title?: string;
+    content: string;
+    text_size?: "normal" | "large";
+    quote?: string;
+    quote_author?: string;
+    lists?: Array<{
+        title: string;
+        style: "bullets" | "checkmarks" | "numbered";
+        items: string[];
+    }>;
+    cta?: {
+        text: string;
+        url: string;
+        style: "primary" | "secondary";
+    };
+}
+interface FullWidthImageSection {
+    type?: "full_width_image";
+    image: string;
+    alt: string;
+    title?: string;
+    content?: string;
+    overlay?: boolean;
+    overlay_type?: string;
+    overlay_content?: string;
+    caption?: string;
+}
+interface ProblemStatementSection {
+    type?: "problem_statement";
+    title: string;
+    subtitle?: string;
+    problem: string;
+    context: string;
+    goals: string[];
+    stakeholders: Array<{
+        role: string;
+        description: string;
+    }>;
+}
+interface SolutionSummarySection {
+    type?: "solution_summary";
+    title: string;
+    subtitle?: string;
+    overview: string;
+    approach: Array<{
+        title: string;
+        description: string;
+    }>;
+    key_features: Array<{
+        title: string;
+        description: string;
+    }>;
+    technologies?: string[];
+    quote?: {
+        text: string;
+        author: string;
+        title: string;
+    };
+}
+interface ProcessTimelineSection {
+    type?: "process_timeline";
+    title: string;
+    subtitle?: string;
+    layout: "vertical" | "horizontal";
+    style: "default" | "minimal" | "cards";
+    steps: Array<{
+        phase: string;
+        title: string;
+        description: string;
+        deliverables?: string[];
+        duration?: string;
+        icon?: string;
+    }>;
+    summary?: string;
+}
+interface TeamCreditsSection {
+    type?: "team_credits";
+    title: string;
+    subtitle?: string;
+    layout: "grid" | "list" | "carousel";
+    style?: "default";
+    members: Array<{
+        name: string;
+        role: string;
+        company?: string;
+        photo?: string;
+        company_logo?: string;
+        contribution?: string;
+        quote?: string;
+        social?: Record<string, string>;
+    }>;
+    note?: string;
+}
+interface ImageGridModalSection {
+    type?: "image_grid_modal";
+    title: string;
+    subtitle?: string;
+    grid_type: "mixed" | "50-50" | "2x2" | "3x3";
+    images: Array<{
+        src: string;
+        alt: string;
+        caption?: string;
+        layout?: "landscape" | "portrait" | "square" | "wide";
+    }>;
+    description?: string;
+}
+
+interface Props$c {
+    data: BeforeAfterSection;
+}
+declare function BeforeAfter({ data }: Props$c): react_jsx_runtime.JSX.Element;
+
+interface Props$b {
+    data: CaseStudyBreakdown$1;
+}
+declare function CaseStudyBreakdown({ data }: Props$b): react_jsx_runtime.JSX.Element;
+
+interface CompactContactFormData {
+    firstname: string;
+    email: string;
+}
+interface HubSpotConfig$1 {
+    portalId: string;
+    formId: string;
+    region?: string;
+}
+interface CompactContactFormProps extends Partial<HubSpotConfig$1> {
+    onSubmit?: (formData: CompactContactFormData) => Promise<void>;
+    onSuccess?: (response: any) => void;
+    onError?: (error: Error) => void;
+    submitButtonText?: string;
+    loadingText?: string;
+    namePlaceholder?: string;
+    emailPlaceholder?: string;
+}
+declare function CompactContactForm({ portalId, formId, region, onSubmit, onSuccess, onError, submitButtonText, loadingText, namePlaceholder, emailPlaceholder, }: CompactContactFormProps): react_jsx_runtime.JSX.Element;
+
+interface ContactFormData {
+    firstname: string;
+    email: string;
+    company: string;
+    services: string[];
+    project_budget: string;
+    project_description: string;
+}
+interface HubSpotConfig {
+    portalId: string;
+    formId: string;
+    region?: string;
+}
+interface ContactFormProps extends Partial<HubSpotConfig> {
+    onSubmit?: (formData: ContactFormData) => Promise<void>;
+    onSuccess?: (response: any) => void;
+    onError?: (error: Error) => void;
+    submitButtonText?: string;
+    loadingText?: string;
+    serviceOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+    budgetOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+declare function ContactForm({ portalId, formId, region, onSubmit, onSuccess, onError, submitButtonText, loadingText, serviceOptions, budgetOptions, }: ContactFormProps): react_jsx_runtime.JSX.Element;
+
+interface Props$a {
+    data: FullWidthImageSection;
+}
+declare function FullWidthImage({ data }: Props$a): react_jsx_runtime.JSX.Element;
+
+interface Props$9 {
+    data: ImageGridSection;
+}
+declare function ImageGrid({ data }: Props$9): react_jsx_runtime.JSX.Element;
+
+interface Props$8 {
+    data: ImageGridModalSection;
+}
+declare function ImageGridModal({ data }: Props$8): react_jsx_runtime.JSX.Element;
+
+interface Props$7 {
+    data: ProblemStatementSection;
+}
+declare function ProblemStatement({ data }: Props$7): react_jsx_runtime.JSX.Element;
+
+interface Props$6 {
+    data: ProcessTimelineSection;
+}
+declare function ProcessTimeline({ data }: Props$6): react_jsx_runtime.JSX.Element;
+
+interface ProjectInfo {
+    title: string;
+    thumbnail: string;
+    role: string;
+    year: string | number;
+    meta_description: string;
+}
+interface RelatedProjectsData {
+    type?: "related_projects";
+    title: string;
+    subtitle?: string;
+    layout: "grid" | "list" | "carousel";
+    show_role?: boolean;
+    show_year?: boolean;
+    show_description?: boolean;
+    projects: string[];
+    cta?: {
+        text: string;
+        url: string;
+        style?: "primary" | "outline";
+    };
+}
+interface Props$5 {
+    data: RelatedProjectsData;
+    allProjects: Record<string, ProjectInfo>;
+}
+declare function RelatedProjects({ data, allProjects }: Props$5): react_jsx_runtime.JSX.Element | null;
+
+interface Props$4 {
+    data: SolutionSummarySection;
+}
+declare function SolutionSummary({ data }: Props$4): react_jsx_runtime.JSX.Element;
+
+interface Props$3 {
+    data: TeamCreditsSection;
+}
+declare function TeamCredits({ data }: Props$3): react_jsx_runtime.JSX.Element | null;
+
+interface TestimonialItem {
+    quote: string;
+    name: string;
+    title?: string;
+    company?: string;
+    photo?: string;
+    rating?: number;
+    context?: string;
+}
+interface TestimonialSectionData {
+    type: "testimonial";
+    title: string;
+    subtitle?: string;
+    testimonials?: TestimonialItem[];
+    single_quote?: {
+        text: string;
+        author: string;
+        title?: string;
+        company?: string;
+    };
+}
+interface Props$2 {
+    data: TestimonialSectionData;
+}
+declare function Testimonial({ data }: Props$2): react_jsx_runtime.JSX.Element | null;
+
+interface Props$1 {
+    data: TextBlockSection;
+}
+declare function TextBlock({ data }: Props$1): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    data: VideoHeroSection;
+}
+declare function VideoSection({ data }: Props): react_jsx_runtime.JSX.Element;
+
+/**
+ * Color tokens extracted from Stilts Design System
+ * Use these for programmatic access to design tokens
+ */
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#e6f9fb";
+        readonly 100: "#b3eef3";
+        readonly 200: "#80e3eb";
+        readonly 300: "#4dd8e3";
+        readonly 400: "#26cfdc";
+        readonly DEFAULT: "#02aec2";
+        readonly 600: "#029aad";
+        readonly 700: "#017d8c";
+        readonly 800: "#01606b";
+        readonly 900: "#00434a";
+    };
+    readonly accent: {
+        readonly warm: {
+            readonly DEFAULT: "#f59e0b";
+            readonly light: "#fcd34d";
+            readonly dark: "#d97706";
+        };
+        readonly violet: {
+            readonly DEFAULT: "#8b5cf6";
+            readonly light: "#a78bfa";
+            readonly dark: "#7c3aed";
+        };
+        readonly emerald: {
+            readonly DEFAULT: "#10b981";
+            readonly light: "#34d399";
+            readonly dark: "#059669";
+        };
+        readonly rose: {
+            readonly DEFAULT: "#f43f5e";
+            readonly light: "#fb7185";
+            readonly dark: "#e11d48";
+        };
+    };
+    readonly dot: {
+        readonly red: "#ed3125";
+        readonly yellow: "#f8be1a";
+        readonly blue: "#0066d5";
+        readonly magenta: "#ef4467";
+        readonly purple: "#8863f3";
+        readonly turquoise: "#02afc2";
+    };
+    readonly semantic: {
+        readonly success: {
+            readonly DEFAULT: "#10b981";
+            readonly light: "#d1fae5";
+            readonly dark: "#059669";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#f59e0b";
+            readonly light: "#fef3c7";
+            readonly dark: "#d97706";
+        };
+        readonly error: {
+            readonly DEFAULT: "#ef4444";
+            readonly light: "#fee2e2";
+            readonly dark: "#dc2626";
+        };
+        readonly info: {
+            readonly DEFAULT: "#3b82f6";
+            readonly light: "#dbeafe";
+            readonly dark: "#2563eb";
+        };
+    };
+    readonly gray: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+};
+type ColorToken = typeof colors;
+
+/**
+ * Spacing tokens extracted from Stilts Design System
+ * Based on 4px base unit
+ */
+declare const spacing: {
+    readonly px: "1px";
+    readonly 0: "0";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 2.5: "0.625rem";
+    readonly 3: "0.75rem";
+    readonly 3.5: "0.875rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+    readonly 11: "2.75rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 28: "7rem";
+    readonly 32: "8rem";
+    readonly 36: "9rem";
+    readonly 40: "10rem";
+    readonly 44: "11rem";
+    readonly 48: "12rem";
+    readonly 52: "13rem";
+    readonly 56: "14rem";
+    readonly 60: "15rem";
+    readonly 64: "16rem";
+};
+declare const sectionPadding: {
+    readonly sm: "var(--section-padding-sm)";
+    readonly md: "var(--section-padding-md)";
+    readonly lg: "var(--section-padding-lg)";
+};
+type SpacingToken = typeof spacing;
+type SectionPaddingToken = typeof sectionPadding;
+
+/**
+ * Animation tokens extracted from Stilts Design System
+ */
+declare const durations: {
+    readonly instant: "0ms";
+    readonly fast: "100ms";
+    readonly normal: "200ms";
+    readonly moderate: "300ms";
+    readonly slow: "400ms";
+    readonly slower: "500ms";
+    readonly slowest: "700ms";
+    readonly glacial: "1000ms";
+};
+declare const easings: {
+    readonly linear: "linear";
+    readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly inOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+    readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    readonly smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+    readonly snappy: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly enter: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+};
+type DurationToken = typeof durations;
+type EasingToken = typeof easings;
+
+/**
+ * Shared types for Stilts Design System
+ */
+interface BaseComponentProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+interface LinkLike {
+    href: string;
+    label: string;
+}
+type Theme = 'light' | 'dark';
+type Alignment = 'left' | 'center' | 'right';
+type GridCols = 2 | 3 | 4;
+
+export { type Alignment, type BaseComponentProps, BeforeAfter, CaseStudyBreakdown, type ColorToken, CompactContactForm, ContactForm, ContentPage, type DurationToken, type EasingToken, FullWidthImage, type GridCols, ImageGrid, ImageGridModal, IndustryGrid, index$2 as Layout, type LinkLike, MainNav, PageHero, index as Patterns, ProblemStatement, ProcessSteps, ProcessTimeline, RelatedProjects, type SectionPaddingToken, ServiceSection, SolutionSummary, type SpacingToken, StatBar, TeamCredits, TeamGrid, Testimonial, TextBlock, type Theme, ToastContainer as Toast, index$1 as UI, VideoHero, VideoSection, colors, durations, easings, sectionPadding, spacing };