import * as styles from "./form.css";
/**
 * A styled `<section>` component for grouping form content.
 *
 * @param props - Standard HTML section attributes.
 * @returns A styled section element.
 *
 * @example
 * ```tsx
 * <Section>
 *   <h3>Personal Information</h3>
 * </Section >
 * ```
 */
export let Section = ({ className = "", ...props }) => {
    return (<section {...props} className={[styles.section, className].join(" ")}/>);
};
/**
 * A styled `<legend>` component for fieldset captions.
 *
 * @param props - Standard HTML legend attributes.
 * @returns A styled legend element.
 *
 * @example
 * ```tsx
    * <Fieldset>
        *   <Legend>Account Details</Legend>
        * </Fieldset >
    * ```
 */
export let Legend = ({ className = "", ...props }) => {
    return (<legend {...props} className={[styles.legend, className].join(" ")}/>);
};
/**
 * A styled `<fieldset>` component for grouping related form controls.
 *
 * @param props - Standard HTML fieldset attributes.
 * @returns A styled fieldset element.
 *
 * @example
 * ```tsx
    * <Fieldset>
        *   <Legend>Preferences</Legend>
        *   <input type="checkbox" name="newsletter" />
        * </Fieldset>
    * ```
 */
export let Fieldset = ({ className = "", ...props }) => {
    return (<fieldset {...props} className={[styles.fieldset, className].join(" ")}/>);
};
/**
 * A styled `<label>` component for form inputs.
 *
 * @param props - Standard HTML label attributes.
 * @returns A styled label element.
 *
 * @example
 * ```tsx
    * <Label>
        *   Email:
        *   <input type="email" name="email" />
        * </Label>
    * ```
 */
export let Label = ({ className = "", ...props }) => {
    return (
    // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
    <label {...props} className={[styles.label, className].join(" ")}/>);
};