/**
 * @license
 * Copyright 2023 Nuraly, Laabidi Aymen
 * SPDX-License-Identifier: MIT
 */
import { LitElement } from 'lit';
import { FlexDirection, FlexWrap, FlexJustify, FlexAlign, Gap } from './flex.types.js';
declare const NrFlexElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
/**
 * Flex layout component for flexible box layouts
 *
 * @example
 * ```html
 * <!-- Basic flex -->
 * <nr-flex>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </nr-flex>
 *
 * <!-- Flex with gap -->
 * <nr-flex gap="medium">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </nr-flex>
 *
 * <!-- Centered flex -->
 * <nr-flex justify="center" align="center">
 *   <div>Centered content</div>
 * </nr-flex>
 *
 * <!-- Column layout with gap -->
 * <nr-flex vertical gap="16">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </nr-flex>
 *
 * <!-- Responsive gap -->
 * <nr-flex .gap=${[16, 24]}>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </nr-flex>
 * ```
 *
 * @slot default - Flex items
 *
 * @csspart flex - The inner div that applies flexbox direction, wrap, justify, align, and gap
 */
export declare class NrFlexElement extends NrFlexElement_base {
    static styles: import("lit").CSSResult;
    static useShadowDom: boolean;
    /** Flex direction (shorthand: use vertical prop for column) */
    direction: FlexDirection;
    /** Shorthand for flex-direction: column */
    vertical: boolean;
    /** Flex wrap behavior */
    wrap: FlexWrap;
    /** Justify content alignment */
    justify: FlexJustify | '';
    /** Align items alignment */
    align: FlexAlign | '';
    /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */
    gap: Gap;
    /** Make flex container inline */
    inline: boolean;
    /** Custom flex CSS value (e.g., "1", "auto", "none") */
    flex: string | '';
    /**
     * Get computed flex direction
     */
    private getFlexDirection;
    /**
     * Convert gap value to CSS value
     */
    private getGapValue;
    /**
     * Get gap styles for flex container
     */
    private getGapStyles;
    /**
     * Get all inline styles for flex container
     */
    private getFlexStyles;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'nr-flex': NrFlexElement;
    }
}
export {};
//# sourceMappingURL=flex.component.d.ts.map