circuit-bricks/dist/ui/headless/HeadlessPropertyPanel.d.ts

A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)

/**
 * HeadlessPropertyPanel Component
 *
 * A headless (unstyled) component for editing the properties of a circuit component.
 * This component provides all the functionality without any styling, allowing users
 * to apply their own styling using their preferred method.
 */
import React from 'react';
import { ComponentInstance } from '../../schemas/componentSchema';
export interface HeadlessPropertyPanelProps {
    /** The component instance to edit properties for */
    component: ComponentInstance | null;
    /** Callback when a property changes */
    onPropertyChange?: (id: string, key: string, value: any) => void;
    /** Additional class name for the root element */
    className?: string;
    /** Additional class names for sub-components */
    classNames?: {
        /** Class for the empty state container */
        emptyContainer?: string;
        /** Class for the error state container */
        errorContainer?: string;
        /** Class for the header section */
        header?: string;
        /** Class for the title */
        title?: string;
        /** Class for the component ID */
        componentId?: string;
        /** Class for the content section */
        content?: string;
        /** Class for each property item */
        propertyItem?: string;
        /** Class for property labels */
        propertyLabel?: string;
        /** Class for property unit text */
        propertyUnit?: string;
        /** Class for number inputs */
        numberInput?: string;
        /** Class for text inputs */
        textInput?: string;
        /** Class for checkbox containers */
        checkboxContainer?: string;
        /** Class for checkboxes */
        checkbox?: string;
        /** Class for checkbox labels */
        checkboxLabel?: string;
        /** Class for select inputs */
        select?: string;
        /** Class for color input containers */
        colorContainer?: string;
        /** Class for color inputs */
        colorInput?: string;
        /** Class for color text inputs */
        colorTextInput?: string;
        /** Class for the position section */
        positionSection?: string;
        /** Class for position section title */
        positionTitle?: string;
        /** Class for position inputs container */
        positionInputs?: string;
        /** Class for position input groups */
        positionInputGroup?: string;
        /** Class for position labels */
        positionLabel?: string;
        /** Class for position inputs */
        positionInput?: string;
        /** Class for the rotation section */
        rotationSection?: string;
        /** Class for rotation section title */
        rotationTitle?: string;
        /** Class for rotation slider container */
        rotationSlider?: string;
        /** Class for rotation range input */
        rotationRange?: string;
        /** Class for rotation value display */
        rotationValue?: string;
        /** Class for rotation presets container */
        rotationPresets?: string;
        /** Class for rotation preset buttons */
        rotationPresetButton?: string;
    };
    /** Additional inline styles for the root element */
    style?: React.CSSProperties;
    /** Additional inline styles for sub-components */
    styles?: {
        [key: string]: React.CSSProperties;
    };
}
declare const HeadlessPropertyPanel: React.FC<HeadlessPropertyPanelProps>;
export default HeadlessPropertyPanel;
//# sourceMappingURL=HeadlessPropertyPanel.d.ts.map