@salesmind-ai/design-system 0.2.1 → 0.3.1

package/README.md

@@ -40,10 +40,38 @@ function App() {
 |---|---|
 | `@salesmind-ai/design-system` | Main components |
 | `@salesmind-ai/design-system/core` | Core primitives |
+| `@salesmind-ai/design-system/sections` | Section shell and section primitives |
+| `@salesmind-ai/design-system/nav` | Navigation components |
+| `@salesmind-ai/design-system/motion` | Motion-enabled components |
+| `@salesmind-ai/design-system/social-proof` | Social proof components |
+| `@salesmind-ai/design-system/marketing` | Marketing/conversion components |
+| `@salesmind-ai/design-system/blog` | Blog and long-form content components |
+| `@salesmind-ai/design-system/charts` | Chart components |
 | `@salesmind-ai/design-system/report` | Report engine components |
-| `@salesmind-ai/design-system/web` | Web/marketing components (analytics, cookies) |
+| `@salesmind-ai/design-system/web` | Backward-compatible mixed web entry |
+| `@salesmind-ai/design-system/web/server` | Server-safe SEO + JSON-LD utilities |
+| `@salesmind-ai/design-system/web/client` | Client-only consent + analytics utilities |
+| `@salesmind-ai/design-system/theme` | Theme system |
+| `@salesmind-ai/design-system/i18n` | Internationalization helpers |
 | `@salesmind-ai/design-system/styles.css` | Compiled CSS |
 
+### Web boundary rule
+
+- Use `@salesmind-ai/design-system/web/server` for JSON-LD and schema generators in server components.
+- Use `@salesmind-ai/design-system/web/client` for cookie consent hooks/components and analytics loaders.
+- Treat `@salesmind-ai/design-system/web` as backward compatibility only, not the preferred import for new code.
+
+### CSS contract
+
+Public CSS entrypoints are part of the package contract:
+
+- `@salesmind-ai/design-system/styles.css`
+- `@salesmind-ai/design-system/index.css`
+- `@salesmind-ai/design-system/core.css`
+- `@salesmind-ai/design-system/web.css`
+
+Consumers should rely on these public CSS exports instead of private `dist/` paths.
+
 ## Development
 
 This project uses **pnpm**. Make sure you have it installed:
@@ -106,7 +134,9 @@ Changes in `src/` are rebuilt by tsup and hot-reloaded in consuming apps automat
 src/
 ├── components/      # React components
 ├── core/            # Core/primitive exports
-├── web/             # Web/marketing utilities (analytics, cookies)
+├── web/             # Mixed legacy web boundary (backward compat)
+│   ├── server/      # Server-safe SEO/JSON-LD exports
+│   └── client/      # Client-only consent/analytics exports
 ├── report-engine/   # Report generation logic
 ├── report-export/   # Report export utilities
 ├── i18n/            # Internationalization (react-intl)

package/dist/AppearancePanel-UT57J69V.d.cts

@@ -0,0 +1,51 @@
+import React__default from 'react';
+
+/** All translatable labels for the AppearancePanel. */
+interface AppearancePanelLabels {
+    /** Panel heading. @default "Appearance Settings" */
+    title?: string;
+    /** Theme section heading. @default "Theme" */
+    themeHeading?: string;
+    /** Brand section heading. @default "Brand" */
+    brandHeading?: string;
+    /** Density section heading. @default "Density" */
+    densityHeading?: string;
+    /** Geometry section heading. @default "Geometry" */
+    geometryHeading?: string;
+    /** Navigation section heading. @default "Navigation Layout" */
+    navHeading?: string;
+    /** Accent color label (shown for Custom brand). @default "Accent Color" */
+    accentColorLabel?: string;
+    /** Reset button text. @default "Reset to Defaults" */
+    resetLabel?: string;
+    themeLight?: string;
+    themeLightContrast?: string;
+    themeDark?: string;
+    themeDarkContrast?: string;
+    brandDefault?: string;
+    brandDefaultDescription?: string;
+    brandSalesmind?: string;
+    brandSalesmindDescription?: string;
+    brandCustom?: string;
+    brandCustomDescription?: string;
+    densityComfortable?: string;
+    densityComfortableDescription?: string;
+    densityCompact?: string;
+    densityCompactDescription?: string;
+    radiusPlayful?: string;
+    radiusPlayfulDescription?: string;
+    radiusSharp?: string;
+    radiusSharpDescription?: string;
+    navLeft?: string;
+    navRight?: string;
+    navBottom?: string;
+}
+interface AppearancePanelProps {
+    /** Custom class name */
+    className?: string;
+    /** Override default English labels for i18n. */
+    labels?: AppearancePanelLabels;
+}
+declare const AppearancePanel: React__default.ForwardRefExoticComponent<AppearancePanelProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { AppearancePanel as A, type AppearancePanelLabels as a, type AppearancePanelProps as b };

package/dist/AppearancePanel-UT57J69V.d.ts

@@ -0,0 +1,51 @@
+import React__default from 'react';
+
+/** All translatable labels for the AppearancePanel. */
+interface AppearancePanelLabels {
+    /** Panel heading. @default "Appearance Settings" */
+    title?: string;
+    /** Theme section heading. @default "Theme" */
+    themeHeading?: string;
+    /** Brand section heading. @default "Brand" */
+    brandHeading?: string;
+    /** Density section heading. @default "Density" */
+    densityHeading?: string;
+    /** Geometry section heading. @default "Geometry" */
+    geometryHeading?: string;
+    /** Navigation section heading. @default "Navigation Layout" */
+    navHeading?: string;
+    /** Accent color label (shown for Custom brand). @default "Accent Color" */
+    accentColorLabel?: string;
+    /** Reset button text. @default "Reset to Defaults" */
+    resetLabel?: string;
+    themeLight?: string;
+    themeLightContrast?: string;
+    themeDark?: string;
+    themeDarkContrast?: string;
+    brandDefault?: string;
+    brandDefaultDescription?: string;
+    brandSalesmind?: string;
+    brandSalesmindDescription?: string;
+    brandCustom?: string;
+    brandCustomDescription?: string;
+    densityComfortable?: string;
+    densityComfortableDescription?: string;
+    densityCompact?: string;
+    densityCompactDescription?: string;
+    radiusPlayful?: string;
+    radiusPlayfulDescription?: string;
+    radiusSharp?: string;
+    radiusSharpDescription?: string;
+    navLeft?: string;
+    navRight?: string;
+    navBottom?: string;
+}
+interface AppearancePanelProps {
+    /** Custom class name */
+    className?: string;
+    /** Override default English labels for i18n. */
+    labels?: AppearancePanelLabels;
+}
+declare const AppearancePanel: React__default.ForwardRefExoticComponent<AppearancePanelProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { AppearancePanel as A, type AppearancePanelLabels as a, type AppearancePanelProps as b };

package/dist/AppearanceProvider-C36a8-eb.d.cts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Theme = 'light' | 'light-contrast' | 'dark' | 'dark-contrast';
+type Brand = 'default' | 'salesmind' | 'custom';
+type NavPlacement = 'left' | 'right' | 'bottom';
+type Density = 'comfortable' | 'compact';
+type Radius = 'playful' | 'sharp';
+interface AppearanceSettings {
+    theme: Theme;
+    brand: Brand;
+    navPlacement: NavPlacement;
+    density: Density;
+    radius: Radius;
+    /** Hex color for custom brand (e.g., "#ff2d8a") */
+    customColor: string;
+}
+interface AppearanceContextValue extends AppearanceSettings {
+    setTheme: (theme: Theme) => void;
+    setBrand: (brand: Brand) => void;
+    setNavPlacement: (nav: NavPlacement) => void;
+    setDensity: (density: Density) => void;
+    setRadius: (radius: Radius) => void;
+    setCustomColor: (color: string) => void;
+    setAppearance: (settings: Partial<AppearanceSettings>) => void;
+    resetToDefaults: () => void;
+}
+/** Detect system color scheme preference */
+/** Convert hex color to RGB triplet string (e.g., "255, 45, 138") */
+declare function hexToRgb(hex: string): string;
+/** Check if user prefers reduced motion */
+declare function prefersReducedMotion(): boolean;
+interface AppearanceProviderProps {
+    /** Initial settings (overrides localStorage) */
+    initialSettings?: Partial<AppearanceSettings>;
+    /** Disable localStorage persistence */
+    disablePersistence?: boolean;
+    /** Children */
+    children: React__default.ReactNode;
+}
+declare function AppearanceProvider({ initialSettings, disablePersistence, children, }: AppearanceProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAppearance(): AppearanceContextValue;
+declare function initializeAppearance(settings?: Partial<AppearanceSettings>): void;
+
+export { type AppearanceContextValue as A, type Brand as B, type Density as D, type NavPlacement as N, type Radius as R, type Theme as T, AppearanceProvider as a, type AppearanceProviderProps as b, type AppearanceSettings as c, hexToRgb as h, initializeAppearance as i, prefersReducedMotion as p, useAppearance as u };

package/dist/AppearanceProvider-C36a8-eb.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Theme = 'light' | 'light-contrast' | 'dark' | 'dark-contrast';
+type Brand = 'default' | 'salesmind' | 'custom';
+type NavPlacement = 'left' | 'right' | 'bottom';
+type Density = 'comfortable' | 'compact';
+type Radius = 'playful' | 'sharp';
+interface AppearanceSettings {
+    theme: Theme;
+    brand: Brand;
+    navPlacement: NavPlacement;
+    density: Density;
+    radius: Radius;
+    /** Hex color for custom brand (e.g., "#ff2d8a") */
+    customColor: string;
+}
+interface AppearanceContextValue extends AppearanceSettings {
+    setTheme: (theme: Theme) => void;
+    setBrand: (brand: Brand) => void;
+    setNavPlacement: (nav: NavPlacement) => void;
+    setDensity: (density: Density) => void;
+    setRadius: (radius: Radius) => void;
+    setCustomColor: (color: string) => void;
+    setAppearance: (settings: Partial<AppearanceSettings>) => void;
+    resetToDefaults: () => void;
+}
+/** Detect system color scheme preference */
+/** Convert hex color to RGB triplet string (e.g., "255, 45, 138") */
+declare function hexToRgb(hex: string): string;
+/** Check if user prefers reduced motion */
+declare function prefersReducedMotion(): boolean;
+interface AppearanceProviderProps {
+    /** Initial settings (overrides localStorage) */
+    initialSettings?: Partial<AppearanceSettings>;
+    /** Disable localStorage persistence */
+    disablePersistence?: boolean;
+    /** Children */
+    children: React__default.ReactNode;
+}
+declare function AppearanceProvider({ initialSettings, disablePersistence, children, }: AppearanceProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAppearance(): AppearanceContextValue;
+declare function initializeAppearance(settings?: Partial<AppearanceSettings>): void;
+
+export { type AppearanceContextValue as A, type Brand as B, type Density as D, type NavPlacement as N, type Radius as R, type Theme as T, AppearanceProvider as a, type AppearanceProviderProps as b, type AppearanceSettings as c, hexToRgb as h, initializeAppearance as i, prefersReducedMotion as p, useAppearance as u };

package/dist/Breadcrumb-RX-B_gDV.d.cts

@@ -0,0 +1,44 @@
+import React__default from 'react';
+
+interface BreadcrumbProps extends React__default.HTMLAttributes<HTMLElement> {
+    /** Override the default aria-label for the nav element. @default "Breadcrumb" */
+    'aria-label'?: string;
+}
+/**
+ * Navigation breadcrumb trail. Wrap `BreadcrumbList`, `BreadcrumbItem`,
+ * `BreadcrumbLink`, and `BreadcrumbPage` inside this root element.
+ *
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+declare const Breadcrumb: React__default.ForwardRefExoticComponent<BreadcrumbProps & React__default.RefAttributes<HTMLElement>>;
+type BreadcrumbListProps = React__default.OlHTMLAttributes<HTMLOListElement>;
+declare const BreadcrumbList: React__default.ForwardRefExoticComponent<BreadcrumbListProps & React__default.RefAttributes<HTMLOListElement>>;
+type BreadcrumbItemProps = React__default.LiHTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbItem: React__default.ForwardRefExoticComponent<BreadcrumbItemProps & React__default.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * When true, renders its child as the root element via Radix Slot.
+     * Use this to compose with routing Link components.
+     */
+    asChild?: boolean;
+}
+declare const BreadcrumbLink: React__default.ForwardRefExoticComponent<BreadcrumbLinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+type BreadcrumbPageProps = React__default.HTMLAttributes<HTMLSpanElement>;
+declare const BreadcrumbPage: React__default.ForwardRefExoticComponent<BreadcrumbPageProps & React__default.RefAttributes<HTMLSpanElement>>;
+type BreadcrumbSeparatorProps = React__default.LiHTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbSeparator: React__default.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React__default.RefAttributes<HTMLLIElement>>;
+type BreadcrumbEllipsisProps = React__default.HTMLAttributes<HTMLSpanElement>;
+declare const BreadcrumbEllipsis: React__default.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+export { Breadcrumb as B, BreadcrumbEllipsis as a, type BreadcrumbEllipsisProps as b, BreadcrumbItem as c, type BreadcrumbItemProps as d, BreadcrumbLink as e, type BreadcrumbLinkProps as f, BreadcrumbList as g, type BreadcrumbListProps as h, BreadcrumbPage as i, type BreadcrumbPageProps as j, type BreadcrumbProps as k, BreadcrumbSeparator as l, type BreadcrumbSeparatorProps as m };

package/dist/Breadcrumb-RX-B_gDV.d.ts

@@ -0,0 +1,44 @@
+import React__default from 'react';
+
+interface BreadcrumbProps extends React__default.HTMLAttributes<HTMLElement> {
+    /** Override the default aria-label for the nav element. @default "Breadcrumb" */
+    'aria-label'?: string;
+}
+/**
+ * Navigation breadcrumb trail. Wrap `BreadcrumbList`, `BreadcrumbItem`,
+ * `BreadcrumbLink`, and `BreadcrumbPage` inside this root element.
+ *
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+declare const Breadcrumb: React__default.ForwardRefExoticComponent<BreadcrumbProps & React__default.RefAttributes<HTMLElement>>;
+type BreadcrumbListProps = React__default.OlHTMLAttributes<HTMLOListElement>;
+declare const BreadcrumbList: React__default.ForwardRefExoticComponent<BreadcrumbListProps & React__default.RefAttributes<HTMLOListElement>>;
+type BreadcrumbItemProps = React__default.LiHTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbItem: React__default.ForwardRefExoticComponent<BreadcrumbItemProps & React__default.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * When true, renders its child as the root element via Radix Slot.
+     * Use this to compose with routing Link components.
+     */
+    asChild?: boolean;
+}
+declare const BreadcrumbLink: React__default.ForwardRefExoticComponent<BreadcrumbLinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+type BreadcrumbPageProps = React__default.HTMLAttributes<HTMLSpanElement>;
+declare const BreadcrumbPage: React__default.ForwardRefExoticComponent<BreadcrumbPageProps & React__default.RefAttributes<HTMLSpanElement>>;
+type BreadcrumbSeparatorProps = React__default.LiHTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbSeparator: React__default.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React__default.RefAttributes<HTMLLIElement>>;
+type BreadcrumbEllipsisProps = React__default.HTMLAttributes<HTMLSpanElement>;
+declare const BreadcrumbEllipsis: React__default.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+export { Breadcrumb as B, BreadcrumbEllipsis as a, type BreadcrumbEllipsisProps as b, BreadcrumbItem as c, type BreadcrumbItemProps as d, BreadcrumbLink as e, type BreadcrumbLinkProps as f, BreadcrumbList as g, type BreadcrumbListProps as h, BreadcrumbPage as i, type BreadcrumbPageProps as j, type BreadcrumbProps as k, BreadcrumbSeparator as l, type BreadcrumbSeparatorProps as m };

package/dist/ExportMenu-A2TLFiVv.d.cts

@@ -0,0 +1,311 @@
+import React__default from 'react';
+import { c as ReportMode, I as InsightType, A as AnalyticalState, D as DataStateDetails, s as TrendDirection } from './chart-types-BGVVO-zl.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ReportShellProps {
+    /** Report title */
+    title?: string;
+    /** Report subtitle or date range */
+    subtitle?: string;
+    /** Report mode (executive = minimal detail, analyst = full detail) */
+    mode?: ReportMode;
+    /** Brand variant for theming */
+    brand?: string;
+    /** Callback when mode changes */
+    onModeChange?: (mode: ReportMode) => void;
+    /** Report content */
+    children: React__default.ReactNode;
+    /** Header actions (export, share, etc.) */
+    actions?: React__default.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ReportShell is the root container for all reports.
+ * It provides mode context and establishes the report structure.
+ */
+declare const ReportShell: React__default.ForwardRefExoticComponent<ReportShellProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface ExecutiveThesisProps {
+    /** The main thesis statement - the single most important finding */
+    thesis: string;
+    /** Supporting context for the thesis */
+    context?: string;
+    /** Key metric supporting the thesis */
+    metric?: {
+        label: string;
+        value: string | number;
+        trend?: 'up' | 'down' | 'neutral';
+    };
+    /** AI-generated indicator */
+    aiGenerated?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ExecutiveThesis displays the single most important finding of a report.
+ * There should be exactly ONE of these per report, at the top.
+ *
+ * Composition Rule: R1 - ExecutiveThesis MUST appear exactly once, at the top.
+ */
+declare const ExecutiveThesis: React__default.ForwardRefExoticComponent<ExecutiveThesisProps & React__default.RefAttributes<HTMLElement>>;
+
+interface InsightBlockProps {
+    /** The type of insight - constrains allowed child charts */
+    type: InsightType;
+    /** The insight headline */
+    headline: string;
+    /** Supporting description */
+    description?: string;
+    /** Confidence score (0-100) */
+    confidence?: number;
+    /** Methodology notes (shown in analyst mode) */
+    methodology?: string;
+    /** Evidence charts (max 3 per composition rules) */
+    children: React__default.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * InsightBlock groups an insight with its supporting evidence.
+ *
+ * Composition Rules:
+ * - R2: InsightBlock MUST precede any chart it references
+ * - R3: Charts CANNOT appear without a parent InsightBlock
+ * - R6: Max 3 charts per InsightBlock
+ */
+declare const InsightBlock: React__default.ForwardRefExoticComponent<InsightBlockProps & React__default.RefAttributes<HTMLElement>>;
+
+interface EvidenceGroupProps {
+    /** Group title */
+    title?: string;
+    /** Layout direction */
+    layout?: 'row' | 'column' | 'grid';
+    /** Number of columns for grid layout */
+    columns?: 1 | 2 | 3;
+    /** Evidence charts (max 3 per composition rules) */
+    children: React__default.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * EvidenceGroup contains related charts under an InsightBlock.
+ *
+ * Composition Rule: R6 - Max 3 charts per InsightBlock (enforced via EvidenceGroup)
+ */
+declare const EvidenceGroup: React__default.ForwardRefExoticComponent<EvidenceGroupProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface ConfidenceIndicatorProps {
+    /** Confidence score (0-100) */
+    score: number;
+    /** Show the numeric score */
+    showScore?: boolean;
+    /** Show the label */
+    showLabel?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * ConfidenceIndicator displays the reliability score of an insight or data point.
+ * This is a guardrail component that helps users understand data quality.
+ */
+declare const ConfidenceIndicator: React__default.ForwardRefExoticComponent<ConfidenceIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DataCoverageBadgeProps {
+    /** Current sample size */
+    sampleSize: number;
+    /** Required minimum sample size */
+    requiredSize?: number;
+    /** Date range covered */
+    dateRange?: {
+        start: string;
+        end: string;
+    };
+    /** Show date range */
+    showDateRange?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * DataCoverageBadge shows the sample size and optionally the date range of the data.
+ * This is a guardrail component that helps users understand data coverage.
+ */
+declare const DataCoverageBadge: React__default.ForwardRefExoticComponent<DataCoverageBadgeProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface DataStateIndicatorProps {
+    /** Current analytical state */
+    state: AnalyticalState;
+    /** Additional details about the state */
+    details?: DataStateDetails;
+    /** Show full details or compact */
+    variant?: 'compact' | 'full';
+    /** Action button handler */
+    onAction?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * DataStateIndicator shows the analytical state of data (valid, insufficient, etc.).
+ * This is a guardrail component that prevents misleading outputs.
+ */
+declare const DataStateIndicator: React__default.ForwardRefExoticComponent<DataStateIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/** Translatable labels for the MethodologyNote component. */
+interface MethodologyNoteLabels {
+    /** Title text and aria-label. @default "Methodology" */
+    title?: string;
+    /** Label for the sample size row. @default "Sample Size" */
+    sampleSize?: string;
+    /** Label for the data sources row. @default "Data Sources" */
+    dataSources?: string;
+    /** Label for the calculation row. @default "Calculation" */
+    calculation?: string;
+}
+interface MethodologyNoteProps {
+    /** Methodology description */
+    children: React__default.ReactNode;
+    /** Sample size (triggers automatic display if < 100) */
+    sampleSize?: number;
+    /** Data sources used */
+    sources?: string[];
+    /** Calculation method */
+    calculation?: string;
+    /** Always show regardless of mode */
+    forceShow?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Override default English labels for i18n. */
+    labels?: MethodologyNoteLabels;
+}
+/**
+ * MethodologyNote documents how data was collected and calculated.
+ *
+ * Composition Rule: R4 - MethodologyNote MUST appear if sample size < 100
+ */
+declare const MethodologyNote: React__default.ForwardRefExoticComponent<MethodologyNoteProps & React__default.RefAttributes<HTMLElement>>;
+
+interface CaveatBlockProps {
+    /** Caveat title/summary */
+    title?: string;
+    /** Caveat details */
+    children: React__default.ReactNode;
+    /** Severity level */
+    severity?: 'info' | 'warning' | 'critical';
+    /** Confidence score that triggered this caveat */
+    confidence?: number;
+    /** Always show regardless of mode */
+    forceShow?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * CaveatBlock displays limitations and warnings about the data or analysis.
+ *
+ * Composition Rule: Required if confidence < 70%
+ */
+declare const CaveatBlock: React__default.ForwardRefExoticComponent<CaveatBlockProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KeyMetricProps {
+    /** Metric title/label */
+    title: string;
+    /** Primary value */
+    value: string | number;
+    /** Value prefix (e.g., '$', '#') */
+    prefix?: string;
+    /** Value suffix (e.g., '%', 'users') */
+    suffix?: string;
+    /** Trend indicator */
+    trend?: {
+        value: number;
+        direction: TrendDirection;
+        label?: string;
+    };
+    /** Secondary metric */
+    secondary?: {
+        label: string;
+        value: string | number;
+    };
+    /** Sample size for data state */
+    sampleSize?: number;
+    /** Confidence score */
+    confidence?: number;
+    /** Click handler for drill-down */
+    onClick?: () => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * KeyMetric displays a single KPI with trend indicator and optional drill-down.
+ * This is an analytical component with built-in data state awareness.
+ */
+declare const KeyMetric: React__default.ForwardRefExoticComponent<KeyMetricProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface TrendIndicatorProps {
+    /** Percentage change */
+    value: number;
+    /** Override direction (auto-detected from value) */
+    direction?: TrendDirection;
+    /** Positive is good (green) or bad (red) */
+    positiveIsGood?: boolean;
+    /** Show arrow icon */
+    showIcon?: boolean;
+    /** Show the percentage sign */
+    showPercent?: boolean;
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * TrendIndicator shows directional change with color coding.
+ * Requires at least 2 data points to be meaningful.
+ */
+declare const TrendIndicator: React__default.ForwardRefExoticComponent<TrendIndicatorProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+type ExportFormat = 'pdf' | 'csv' | 'xlsx' | 'pptx' | 'png' | 'json';
+interface ExportOption {
+    /** Export format */
+    format: ExportFormat;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface ExportMenuProps {
+    /** Available export options */
+    options?: ExportOption[];
+    /** Callback when an export option is selected */
+    onExport: (format: ExportFormat) => void;
+    /** Whether export is currently in progress */
+    isExporting?: boolean;
+    /** Button label */
+    label?: string;
+    /** Button size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Button variant */
+    variant?: 'primary' | 'secondary' | 'outline';
+    /** Additional CSS class */
+    className?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+/**
+ * ExportMenu provides a dropdown for exporting reports in various formats.
+ * This is an interface-only component - actual export logic is implemented at the app layer.
+ */
+declare function ExportMenu({ options, onExport, isExporting, label, size, variant, className, disabled, }: ExportMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace ExportMenu {
+    var displayName: string;
+}
+
+export { CaveatBlock as C, DataCoverageBadge as D, EvidenceGroup as E, InsightBlock as I, KeyMetric as K, MethodologyNote as M, ReportShell as R, TrendIndicator as T, type CaveatBlockProps as a, ConfidenceIndicator as b, type ConfidenceIndicatorProps as c, type DataCoverageBadgeProps as d, DataStateIndicator as e, type DataStateIndicatorProps as f, type EvidenceGroupProps as g, ExecutiveThesis as h, type ExecutiveThesisProps as i, type ExportFormat as j, ExportMenu as k, type ExportMenuProps as l, type ExportOption as m, type InsightBlockProps as n, type KeyMetricProps as o, type MethodologyNoteLabels as p, type MethodologyNoteProps as q, type ReportShellProps as r, type TrendIndicatorProps as s };