import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from 'ink';
import { useTheme } from '../../hooks/useTheme.js';
import { useTitleShape } from '../../hooks/useTitleShape.js';
import { StyledTitle } from './styled-title.js';
/**
 * A simple titled box component that displays a title with stylized shapes
 * above a bordered box. Replacement for @mishieck/ink-titled-box.
 */
export function TitledBox({ title, borderColor, shape = 'pill', icon, reversePowerline = false, children, width, paddingX, paddingY, flexDirection, marginBottom, ...boxProps }) {
    const { colors } = useTheme();
    return (_jsxs(Box, { flexDirection: "column", width: width, marginBottom: marginBottom, ...boxProps, children: [_jsx(StyledTitle, { title: title, shape: shape, borderColor: borderColor, textColor: colors.base, icon: icon, reversePowerline: reversePowerline, width: width }), _jsx(Box, { borderStyle: "round", borderColor: borderColor, paddingX: paddingX, paddingY: paddingY, flexDirection: flexDirection, width: width, children: children })] }));
}
/**
 * A titled box component that respects user's preferred title shape from context
 * Falls back to the explicit shape if provided, then to user preference, then to 'pill'
 */
export function TitledBoxWithPreferences({ title, borderColor, shape, icon, reversePowerline = false, children, width, paddingX, paddingY, flexDirection, marginBottom, }) {
    // Get the user's preferred title shape from context
    const { currentTitleShape } = useTitleShape();
    // Use explicit shape if provided, otherwise use preferred shape, otherwise default to 'pill'
    const finalShape = shape || currentTitleShape || 'pill';
    return (_jsx(TitledBox, { title: title, borderColor: borderColor, shape: finalShape, icon: icon, reversePowerline: reversePowerline, children: children, width: width, paddingX: paddingX, paddingY: paddingY, flexDirection: flexDirection, marginBottom: marginBottom }));
}
//# sourceMappingURL=titled-box.js.map