@alauda/doom/lib/runtime/components/Directive.js

Doctor Doom making docs.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { upperCase } from 'es-toolkit';
import { useCallback } from 'react';
export const Directive = ({ className, type = 'info', title, children, open, onToggle, }) => {
    const rootClassName = clsx('rp-callout', `rp-callout--${type}`, className);
    const titleNode = title || upperCase(type);
    const contentNode = _jsx("div", { className: "rp-callout__content", children: children });
    const handleToggle = useCallback((ev) => {
        onToggle?.(ev.currentTarget.open);
    }, [onToggle]);
    if (type === 'details') {
        return (_jsxs("details", { className: rootClassName, open: open, onToggle: handleToggle, children: [_jsx("summary", { className: "rp-callout__title", children: titleNode }), contentNode] }));
    }
    return (_jsxs("div", { className: rootClassName, children: [_jsx("div", { className: "rp-callout__title", children: titleNode }), contentNode] }));
};
export default Directive;