import * as i0 from "@angular/core";
/**
* @internal
* Generates base form-group classes with gap variants using class-variance-authority
*/
export declare const formGroupComponent: (props?: ({
gap?: "tight" | "normal" | "relaxed" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* Possible form-group gap spacing variants
*
* @description
* - `'tight'` - 6px spacing (gap-1.5). Best for compact forms or dense UI layouts. Default.
* - `'normal'` - 12px spacing (gap-3). Use for more breathing room in standard forms.
* - `'relaxed'` - 16px spacing (gap-4). Best for spacious forms, accessibility focus, or improved readability.
*/
export type FormGroupGapProps = 'tight' | 'normal' | 'relaxed' | null | undefined;
/**
* Configuration object for form-group styling
*
* @property gap - Vertical spacing between form items
* @property class - Additional custom Tailwind CSS classes to merge
*/
export type FormGroupProps = {
gap?: FormGroupGapProps;
class?: string;
};
/**
* A flexible layout wrapper for grouping form components with consistent vertical spacing.
*
* @remarks
* `st-form-group` is a layout utility that wraps form items or form sections with configurable
* vertical spacing. Built with Tailwind CSS v4 and class-variance-authority for efficient
* variant management. It uses modern Angular signals for reactive input/output handling.
*
* The component supports three gap variants that scale from compact to spacious layouts,
* making it ideal for diverse UI patterns:
* - **Tight (6px)**: Dense layouts, compact form sections (default)
* - **Normal (12px)**: Standard forms, roomier layout
* - **Relaxed (16px)**: Accessible forms, improved readability
*
* @example
* ```html
*
*
*
*
*
*
*
*
*
* ```
*
* @example
* ```html
*
*
*
*
*
* ```
*
* @example
* ```html
*
*
*
*
*
* ```
*
* @example
* ```html
*
*
*
*
* ```
*/
export declare class FormGroupComponent {
/**
* Gap variant for vertical spacing between form items.
*
* @defaultValue 'tight'
*
* @description
* Controls the vertical spacing (`gap-*` utility) between child form components.
* Choose based on your layout needs and accessibility requirements:
*
* @param 'tight' - 6px spacing (Tailwind `gap-1.5`)
* Use when designing compact, dense form layouts where space is limited.
* Examples: Modal dialogs, inline form sections, sidebar forms.
* Spacing: 6px (0.375rem)
*
* @param 'normal' - 12px spacing (Tailwind `gap-3`)
* Use when you need more breathing room between fields. Works well for
* standard web forms and layouts.
* Spacing: 12px (0.75rem)
*
* @param 'relaxed' - 16px spacing (Tailwind `gap-4`)
* Use for forms prioritizing accessibility and readability. Ideal for
* forms targeting users with visual or motor impairments. Also great
* for mobile-first or touch-friendly interfaces.
* Spacing: 16px (1rem)
*
* @example
* ```typescript
* // In component template:
* ... // 6px spacing (default)
* ... // 12px spacing
* ... // 16px spacing
* ```
*/
gap: import("@angular/core").InputSignal;
/**
* Additional custom CSS classes.
*
* @defaultValue ''
*
* @description
* Any valid Tailwind CSS or custom classes to apply alongside the gap variant.
* Classes are merged using the `cn()` utility, which handles proper class
* precedence and conflict resolution with Tailwind's merge logic.
*
* @example
* ```html
*
*
* ...
*
*
*
*
* ...
*
* ```
*/
class: import("@angular/core").InputSignal;
/**
* @internal
* Computed class string combining gap variant and custom classes.
*
* Uses CVA pattern to manage gap variants and `cn()` utility to merge
* with custom classes, handling Tailwind class conflicts properly.
*/
containerClass: import("@angular/core").Signal;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}