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. `` 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
*
* Título
* Descripción del ejemplo
*
*
*
*
*
* // StoryBox con código
*
* Ejemplo de código
*
* {``}
*
*
* ```
*
* @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