import { FieldsetHTMLAttributes, JSX } from 'react';
import { BreakpointCustomizable, SelectedAriaAttributes, Theme } from '../../types';
import { FieldsetAriaAttribute, Legend } from './Fieldset.utils';
export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
    /** Child elements within the fieldset. */
    children: React.ReactNode;
    /**
     * The `legend` prop can either be a simple `string` or an object with specific properties.
     * When provided as a string, it represents the legend text directly.
     * When provided as an object, it allows for more detailed configuration, including:
     * - `headingText: string` The text content for the legend.
     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
     *
     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
     */
    legend: Legend;
    /** ARIA attributes to enhance accessibility.
     *  `{'aria-describedby'?: string;}`
     *
     * The ids are appended to the ids the component generates internally, e.g. for the description and system feedback.
     * */
    aria?: SelectedAriaAttributes<FieldsetAriaAttribute>;
    /** Short descriptive text displayed beneath the legend. */
    description?: string | React.ReactNode;
    /** Disables the fieldset, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the legend visually while keeping it accessible to screen readers, can be responsive.
     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
     * @default false
     */
    hideLegend?: BreakpointCustomizable<boolean>;
    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
    id?: string;
    /** Marks the fieldset as invalid, typically used for form validation.
     * @default false
     */
    invalid?: boolean;
    /** Shows an info button next to the label that triggers a popover with the passed content. */
    popoverContent?: React.ReactNode;
    /** Popover info button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the default anchor button.
     * (default) 'Toggle popover'
     */
    popoverInfoButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /**
     * Undocumented property for visually setting the Asterisk.
     * @default false
     */
    required?: boolean;
    /** Defines a system feedback message, shown when `invalid={true}`. */
    systemFeedback?: string;
}
/** @internal Props including theme — not exported to consumers. */
export interface FieldsetPropsWithTheme extends FieldsetProps {
    /** Defines the theme. When using `theme="dark"`, the `theme` prop must also be set on each child component that supports it.
     * @default 'light'
     */
    theme?: Theme;
}
/**
 * The `DSFieldset` component is a versatile and accessible way to group related elements and labels in your forms.
 *
 * Design in Figma: [Fieldset](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=8-154)
 * */
export declare const DSFieldset: (props: FieldsetProps) => JSX.Element;