/// <reference types="react" />
import { CheckboxProps } from '@mui/material/Checkbox';
import { TextFieldProps } from '@mui/material/TextField';
import * as React from 'react';
import React__default, { ComponentType } from 'react';
import { BoxProps } from '@mui/material/Box';
import { DrawerProps } from '@mui/material/Drawer';

type FieldValue = string | number | boolean | undefined;
type ComponentData = {
    [key: string]: FieldValue;
};
/**
 * Configuration options for which inputs you wish to see in the drawer
 */
type InputConfig = PlaygroundInput[];
/**
 * A function that returns a string / code snippet based on the values of the input data provided
 */
type CodeSnippetFunction = (data: {
    [key: string]: FieldValue;
}) => string;
/**
 * A component to render as the preview based on the values of the input data provided
 */
type PreviewComponent = ComponentType<{
    data: {
        [key: string]: FieldValue;
    };
}>;
type PlaygroundInputType = 'string' | 'number' | 'color' | 'select' | 'boolean';
type CommonPlaygroundInputProps<T> = {
    id: string;
    label?: string;
    typeLabel?: string;
    required?: boolean;
    description?: string;
    category?: string;
    defaultValue?: T;
    initialValue?: T;
};
type PlaygroundStringInput = CommonPlaygroundInputProps<string> & TextFieldProps & {
    type: 'string';
};
type PlaygroundNumberInput = CommonPlaygroundInputProps<number | string> & TextFieldProps & {
    type: 'number';
    minValue?: number;
    maxValue?: number;
    valueStep?: number;
};
type PlaygroundColorInput = CommonPlaygroundInputProps<string> & TextFieldProps & {
    type: 'color';
    allowMuiColors?: boolean;
};
type PlaygroundSelectInput = CommonPlaygroundInputProps<string | number> & Omit<TextFieldProps, 'children'> & {
    type: 'select';
    options: Array<{
        label: string;
        value: string | number;
    }> | string[];
};
type PlaygroundBooleanInput = CommonPlaygroundInputProps<boolean> & Omit<CheckboxProps, 'defaultValue'> & {
    type: 'boolean';
};
type PlaygroundInput = PlaygroundStringInput | PlaygroundNumberInput | PlaygroundColorInput | PlaygroundSelectInput | PlaygroundBooleanInput;

type PlaygroundValuesContextProps = {
    data: {
        [key: string]: FieldValue;
    };
    updateData: (id: string, value: FieldValue) => void;
    inputConfig: InputConfig;
    codeSnippet: CodeSnippetFunction;
    previewComponent: PreviewComponent;
};
declare const PlaygroundValuesContext: React.Context<PlaygroundValuesContextProps>;
declare const usePlaygroundValues: () => PlaygroundValuesContextProps;

type PlaygroundProps = {
    inputConfig: InputConfig;
    codeSnippet: CodeSnippetFunction;
    previewComponent: PreviewComponent;
};
declare const Playground: React__default.FC<PlaygroundProps>;

/**
 *
 * @param data a mapping of input keys and values
 * @param inputConfig a configuration object specifying the properties of the inputs
 * @returns a new ComponentData object that removes undefined values or values that are equal to the default for the field
 */
declare const getPropsMapping: (data: ComponentData, inputConfig: PlaygroundProps['inputConfig']) => ComponentData;
/**
 *
 * @param value the value of a particular component prop
 * @returns a string representation of the correct JSX binding expression based on the value type
 */
declare const getPropValueBinding: (value: FieldValue) => string;
/**
 *
 * @param data a mapping of input keys and values
 * @param config optional configuration options (custom separator character and/or omit certain values)
 * @returns a string representation of the data parameter properly mapped to JSX bindings
 */
declare const getPropsToString: (data: ComponentData, config?: {
    join?: string;
    skip?: string[];
}) => string;

type PlaygroundCodeBlockProps = BoxProps & {
    language: string;
    dataLine?: string;
    smallFont?: boolean;
};
declare const PlaygroundCodeBlock: React__default.FC<PlaygroundCodeBlockProps>;

type PlaygroundDrawerProps = DrawerProps;
declare const PlaygroundDrawer: React__default.FC<PlaygroundDrawerProps>;

type PlaygroundPreviewProps = Omit<BoxProps, 'component'>;
declare const PlaygroundPreview: React__default.FC<PlaygroundPreviewProps>;

declare const PlaygroundCheckbox: React__default.FC<PlaygroundBooleanInput>;

declare const PlaygroundColorPicker: React__default.FC<PlaygroundColorInput>;

declare const PlaygroundNumberPicker: React__default.FC<PlaygroundNumberInput>;

declare const PlaygroundSelect: React__default.FC<PlaygroundSelectInput>;

declare const PlaygroundTextField: React__default.FC<Omit<PlaygroundStringInput | PlaygroundNumberInput, 'type'> & {
    type: PlaygroundInputType;
}>;

export { type CodeSnippetFunction, type CommonPlaygroundInputProps, type ComponentData, type FieldValue, type InputConfig, Playground, type PlaygroundBooleanInput, PlaygroundCheckbox, PlaygroundCodeBlock, type PlaygroundCodeBlockProps, type PlaygroundColorInput, PlaygroundColorPicker, PlaygroundDrawer, type PlaygroundDrawerProps, type PlaygroundInput, type PlaygroundInputType, type PlaygroundNumberInput, PlaygroundNumberPicker, PlaygroundPreview, type PlaygroundPreviewProps, type PlaygroundProps, PlaygroundSelect, type PlaygroundSelectInput, type PlaygroundStringInput, PlaygroundTextField, PlaygroundValuesContext, type PreviewComponent, getPropValueBinding, getPropsMapping, getPropsToString, usePlaygroundValues };
