import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
import { LinkProps as RouterLinkProps } from 'react-router-dom';
import { SilkeColor } from '../../silke-theme-provider';
export type BoxSpace = 'xxs' | 'xs' | 's' | 'sm' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'none' | boolean;
export type BoxSize = 'xs' | 's' | 'base' | 'm' | 'l' | 'xl' | 'xxl' | '256' | '512';
export type BoxAlign = 'center' | 'start' | 'end' | 'spread' | 'space' | boolean;
export type TagAttributes = {
    a: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>;
    button: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
    input: Omit<InputHTMLAttributes<HTMLInputElement>, 'color'>;
    div: Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
    label: Omit<LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
    form: Omit<FormHTMLAttributes<HTMLFormElement>, 'color'>;
    ol: Omit<HTMLAttributes<HTMLOListElement>, 'color'>;
    ul: Omit<HTMLAttributes<HTMLUListElement>, 'color'>;
    li: Omit<HTMLAttributes<HTMLLIElement>, 'color'>;
    header: Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
    dl: Omit<HTMLAttributes<HTMLDListElement>, 'color'>;
};
export declare const Flex: ({ weight }: {
    weight?: number;
}) => import("react/jsx-runtime").JSX.Element;
type BaseProps = {
    /** Layout contnet in column */
    column?: boolean;
    /** Should fill container */
    fill?: boolean;
    /** Flex gap */
    gap?: BoxSpace;
    /** Vertical/horizontal space */
    pad?: BoxSpace;
    /** Vertical padding in element */
    vPad?: BoxSpace;
    /** Horizontal padding in element */
    hPad?: BoxSpace;
    /** Sets both width and height */
    size?: BoxSize;
    /** Width of the box (x2 of the spaceing, example: 'm' = 32px wide) */
    height?: BoxSize;
    /** Width of the box (x2 of the spaceing, example: 'm' = 32px wide) */
    width?: BoxSize;
    /** Width of the box (x2 of the spaceing, example: 'm' = 32px wide) */
    minHeight?: BoxSize;
    /** Width of the box (x2 of the spaceing, example: 'm' = 32px wide) */
    minWidth?: BoxSize;
    /** Background color */
    bg?: SilkeColor | 'blur';
    /** Background color on hover */
    bgHover?: SilkeColor;
    /** Text color */
    color?: SilkeColor;
    /** Border radius */
    rounded?: boolean | 'tiny' | 'small' | 'medium' | 'full';
    shadow?: 'level1' | 'level2' | 'level3' | 'level4';
    overflow?: 'hidden' | 'scroll-y';
    cursor?: 'pointer' | 'grab' | 'text';
    userSelect?: 'none' | 'text';
    /** Text color on hover */
    colorHover?: SilkeColor;
    aspectRatio?: '16:9' | '4:3' | '1:1';
    /** Flex item */
    flex?: boolean;
    /** Wrap items */
    wrap?: boolean;
    /** Align content of box, use array to define separat for x and y axis */
    align?: BoxAlign | [BoxAlign, BoxAlign];
    vAlign?: BoxAlign;
    hAlign?: BoxAlign;
    /** Debug adds an out line to all box and child boxes */
    debug?: boolean;
    scroll?: boolean | 'show';
    rel?: string;
};
type InputProps = {
    tag: 'input';
} & TagAttributes['input'] & BaseProps;
export type BoxButtonProps = {
    tag?: 'button';
} & TagAttributes['button'] & BaseProps;
type AnchorProps = {
    tag: 'a';
} & TagAttributes['a'] & BaseProps;
export type BoxLinkProps = {
    tag: 'link';
} & RouterLinkProps & BaseProps;
export type BoxDivProps = {
    tag?: 'div';
} & TagAttributes['div'] & BaseProps;
export type BoxNavProps = {
    tag?: 'nav';
} & TagAttributes['div'] & BaseProps;
export type BoxOlProps = {
    tag?: 'ol';
} & TagAttributes['ol'] & BaseProps;
export type BoxUlProps = {
    tag?: 'ul';
} & TagAttributes['ul'] & BaseProps;
export type BoxLiProps = {
    tag?: 'li';
} & TagAttributes['li'] & BaseProps;
export type BoxLabelProps = {
    tag?: 'label';
} & TagAttributes['label'] & BaseProps;
export type BoxFormProps = {
    tag?: 'form';
} & TagAttributes['form'] & BaseProps;
export type BoxHeaderProps = {
    tag?: 'header';
} & TagAttributes['header'] & BaseProps;
export type BoxDlProps = {
    tag?: 'dl';
} & TagAttributes['dl'] & BaseProps;
export type BoxDtProps = {
    tag?: 'dt';
} & TagAttributes['dl'] & BaseProps;
export type BoxDdProps = {
    tag?: 'dd';
} & TagAttributes['dl'] & BaseProps;
export type BoxProps = InputProps | BoxButtonProps | AnchorProps | BoxLinkProps | BoxDivProps | BoxLabelProps | BoxFormProps | BoxNavProps | BoxOlProps | BoxUlProps | BoxLiProps | BoxHeaderProps | BoxDlProps | BoxDtProps | BoxDdProps;
export declare const SilkeBox: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<unknown>>;
export {};