import { default as React } from 'react';
/** Tema Orbit efectivo para hijos (`auto` en código): forzado por `StoryBox` o el `data-theme` de `documentElement`. */
type StoryBoxOrbitAppearance = 'light' | 'dark';
interface StoryBoxProps {
    children: React.ReactNode;
    className?: string;
    fullHeight?: boolean;
    /**
     * Alinea tokens Orbit (`ui-text-*`, `ui-bg-*`) y el modo **`auto`** de `StoryBox.Code` con claro u oscuro.
     * - **`inherit`**: no fija `data-theme` en el contenedor (sigue el ancestro, p. ej. `<html>` en Storybook).
     * - **`light` | `dark`**: aplica `data-theme` en la raíz del StoryBox (útil en canvas o docs sin cambiar el tema global).
     */
    appearance?: 'inherit' | StoryBoxOrbitAppearance;
}
interface StoryBoxTitleProps {
    children: React.ReactNode;
}
interface StoryBoxDescriptionProps {
    children: React.ReactNode;
}
interface StoryBoxContentProps {
    children: React.ReactNode;
    className?: string;
}
interface StoryBoxCodeProps {
    /**
     * Preferido: **string** (fragmento TSX curado; alineado a Docs). `ReactNode` es legado: se serializa con heurística **no fiable** solo para no romper historias existentes; migrar a string. Ver `imj-ui-obligations-storybook-contract`.
     */
    children: string | React.ReactNode;
    language?: string;
    showLineNumbers?: boolean;
    customStyle?: React.CSSProperties;
    /**
     * Resaltado de sintaxis. **`auto`** (por defecto) elige un tema claro u oscuro según Orbit:
     * `appearance` de `StoryBox` si está fijado, si no el `data-theme` de `documentElement` (p. ej. toolbar Orbit en Storybook).
     */
    theme?: 'auto' | 'dracula' | 'tomorrow' | 'oneDark' | 'oneLight' | 'atomDark' | 'materialDark' | 'materialLight' | 'prism' | 'dark';
}
/**
 * StoryBox - Componente contenedor para documentación y ejemplos
 *
 * Componente que proporciona una estructura consistente para mostrar documentación,
 * ejemplos de código y contenido en Storybook o documentación.
 * Incluye subcomponentes para título, descripción, contenido y código con syntax highlighting y botón **Copiar**.
 *
 * **Tema Orbit:** título y descripción usan colores semánticos (`ui-text-primary`, `ui-text-tertiary`). La prop
 * **`appearance`** puede fijar `data-theme` en el contenedor; **`StoryBox.Code`** con **`theme="auto"`** (por defecto)
 * elige resaltado claro (`prism`) u oscuro (`oneDark`) según ese contexto o el `data-theme` global.
 *
 * @example
 * ```tsx
 * // StoryBox básico
 * <StoryBox>
 *   <StoryBox.Title>Título</StoryBox.Title>
 *   <StoryBox.Description>Descripción del ejemplo</StoryBox.Description>
 *   <StoryBox.Content>
 *     <Button>Ejemplo</Button>
 *   </StoryBox.Content>
 * </StoryBox>
 *
 * // StoryBox con código
 * <StoryBox>
 *   <StoryBox.Title>Ejemplo de código</StoryBox.Title>
 *   <StoryBox.Code language="tsx" theme="auto">
 *     {`<Button onClick={handleClick}>Click me</Button>`}
 *   </StoryBox.Code>
 * </StoryBox>
 * ```
 *
 * @see {@link StoryBox.Title}, {@link StoryBox.Description}, {@link StoryBox.Content}, {@link StoryBox.Code} para subcomponentes
 */
export declare const StoryBox: {
    ({ children, className, fullHeight, appearance, }: StoryBoxProps): import("react/jsx-runtime").JSX.Element;
    Title: ({ children }: StoryBoxTitleProps) => import("react/jsx-runtime").JSX.Element;
    Description: ({ children }: StoryBoxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
    Content: ({ children, className }: StoryBoxContentProps) => import("react/jsx-runtime").JSX.Element;
    Code: ({ children, language, showLineNumbers, customStyle, theme, }: StoryBoxCodeProps) => import("react/jsx-runtime").JSX.Element;
};
export {};
//# sourceMappingURL=index.d.ts.map