import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';

/**
 * Theme Bridge Types
 *
 * Simplified theme configuration for SDK sites that want to style blocks
 * without using the full CMS theme system.
 */
/**
 * Corner radius presets.
 */
type ThemeBridgeCorners = 'square' | 'soft' | 'rounded' | 'pill';
/**
 * Shadow intensity presets.
 */
type ThemeBridgeShadows = 'none' | 'low' | 'medium' | 'high';
/**
 * Spacing density presets.
 */
type ThemeBridgeSpacing = 'comfortable' | 'standard' | 'dense';
/**
 * Typography configuration.
 */
interface ThemeBridgeTypography {
    /** Font family for headings (defaults to system font stack) */
    headingFamily?: string;
    /** Font family for body text (defaults to system font stack) */
    bodyFamily?: string;
    /** Heading font weight (defaults to 600) */
    headingWeight?: number;
    /** Body font weight (defaults to 400) */
    bodyWeight?: number;
}
/**
 * Button component configuration for opt-in CSS generation.
 */
interface ThemeBridgeButtonConfig {
    /**
     * Which button variants to generate.
     * @default ['primary', 'secondary', 'outline', 'ghost']
     */
    variants?: Array<'primary' | 'secondary' | 'outline' | 'ghost'>;
}
/**
 * Card component configuration for opt-in CSS generation.
 */
interface ThemeBridgeCardConfig {
    /**
     * Which card variants to generate.
     * @default ['default']
     */
    variants?: Array<'default' | 'elevated' | 'outlined'>;
}
/**
 * Component CSS generation options.
 * Set to `true` to use defaults, or provide config for customization.
 */
interface ThemeBridgeComponents {
    /** Generate button CSS (.button-primary, .button-secondary, etc.) */
    buttons?: boolean | ThemeBridgeButtonConfig;
    /** Generate card CSS (.card-default, etc.) */
    cards?: boolean | ThemeBridgeCardConfig;
    /** Generate input CSS (.form-input, .form-label, etc.) */
    inputs?: boolean;
}
/**
 * Complete theme bridge configuration.
 *
 * @example Simple usage with tokens only
 * ```tsx
 * <ThemeBridgeProvider
 *   config={{
 *     tokens: {
 *       primary: '#6d28d9',
 *       secondary: '#4c1d95',
 *       background: '#ffffff',
 *       text: '#1e293b',
 *     },
 *   }}
 * >
 *   {children}
 * </ThemeBridgeProvider>
 * ```
 *
 * @example With component CSS
 * ```tsx
 * <ThemeBridgeProvider
 *   config={{
 *     tokens: {
 *       primary: '#6d28d9',
 *       secondary: '#4c1d95',
 *       white: '#ffffff',
 *       surface: '#f8fafc',
 *       text: '#1e293b',
 *       border: '#e2e8f0',
 *     },
 *     corners: 'rounded',
 *     components: {
 *       buttons: true,
 *       cards: true,
 *       inputs: true,
 *     },
 *   }}
 * >
 *   {children}
 * </ThemeBridgeProvider>
 * ```
 *
 * @example Pass-through to existing design system
 * ```tsx
 * <ThemeBridgeProvider
 *   config={{
 *     tokens: {
 *       primary: 'var(--brand-purple)',
 *       secondary: 'var(--brand-navy)',
 *       background: 'var(--ds-bg)',
 *     },
 *     components: { buttons: true },
 *   }}
 * >
 *   {children}
 * </ThemeBridgeProvider>
 * ```
 */
interface ThemeBridgeConfig {
    /**
     * Color tokens as key-value pairs.
     *
     * Keys become CSS variable names: `--color-{key}`
     *
     * Values can be:
     * - Hex colors: `'#6d28d9'` (converted to RGB: `109 40 217`)
     * - CSS variable refs: `'var(--brand-purple)'` (passed through)
     * - RGB values: `'109 40 217'` (used directly)
     *
     * Common token names used by blocks:
     * - `primary`, `secondary` - Brand colors
     * - `background`, `surface` - Background colors
     * - `text`, `mutedText` - Text colors
     * - `border` - Border color
     * - `white` - For button text on dark backgrounds
     * - `success`, `warning`, `danger`, `info` - Status colors
     */
    tokens: Record<string, string>;
    /** Typography settings */
    typography?: ThemeBridgeTypography;
    /** Spacing density (defaults to 'standard') */
    spacing?: ThemeBridgeSpacing;
    /** Corner radius preset (defaults to 'rounded') */
    corners?: ThemeBridgeCorners;
    /** Shadow intensity (defaults to 'medium') */
    shadows?: ThemeBridgeShadows;
    /**
     * Opt-in component CSS generation.
     *
     * By default, only CSS variables are generated.
     * Enable components to generate `.button-*`, `.card-*`, `.form-*` classes.
     */
    components?: ThemeBridgeComponents;
    /**
     * CSS overrides for component classes.
     *
     * Keys are CSS selectors (relative to the theme scope),
     * values are CSS declaration blocks.
     *
     * @example
     * ```tsx
     * overrides: {
     *   '.button-primary': 'border-radius: 9999px; font-weight: 700;',
     *   '.button-primary:hover': 'transform: translateY(-2px);',
     * }
     * ```
     */
    overrides?: Record<string, string>;
}
/**
 * Generated CSS output from theme bridge.
 */
interface ThemeBridgeOutput {
    /** CSS variables as inline style object */
    cssVars: Record<string, string>;
    /** Complete CSS string for injection */
    css: string;
}

interface ThemeBridgeProviderProps {
    /** Theme configuration */
    config: ThemeBridgeConfig;
    /** Child elements to wrap */
    children: React.ReactNode;
    /** Additional class name for the wrapper */
    className?: string;
    /** HTML element to use for wrapper (defaults to 'div') */
    as?: keyof React.JSX.IntrinsicElements;
}
/**
 * Wraps content and injects CSS variables for Builder block styling.
 *
 * This component generates CSS variables from a simplified theme config
 * and injects them into a wrapper element. All Builder blocks rendered
 * inside will pick up these variables for colors, typography, spacing, etc.
 *
 * Optionally generates component CSS for buttons, cards, and inputs when
 * `config.components` is specified.
 */
declare function ThemeBridgeProvider({ config, children, className, as: Tag, }: ThemeBridgeProviderProps): react_jsx_runtime.JSX.Element;
/**
 * Hook to access generated CSS variables from theme config.
 * Useful for custom components that need theme values.
 */
declare function useThemeBridgeCss(config: ThemeBridgeConfig): ThemeBridgeOutput;

/**
 * CSS Variable Generator for Theme Bridge
 *
 * Generates the CSS variables that Builder blocks expect,
 * from a simplified ThemeBridgeConfig.
 *
 * Key differences from the full CMS theme system:
 * - No shade generation (SDK sites define their own tokens)
 * - Supports arbitrary token names
 * - Supports pass-through of CSS variable references
 * - Opt-in component CSS generation using core generators from @riverbankcms/blocks
 */

/**
 * Generate CSS variables from a ThemeBridgeConfig.
 */
declare function generateThemeBridgeCss(config: ThemeBridgeConfig): ThemeBridgeOutput;

export { type ThemeBridgeButtonConfig, type ThemeBridgeCardConfig, type ThemeBridgeComponents, type ThemeBridgeConfig, type ThemeBridgeCorners, type ThemeBridgeOutput, ThemeBridgeProvider, type ThemeBridgeProviderProps, type ThemeBridgeShadows, type ThemeBridgeSpacing, type ThemeBridgeTypography, generateThemeBridgeCss, useThemeBridgeCss };
