import { WeakValidationMap, ValidationMap } from 'prop-types';
import { ForwardedRef } from 'react';
import { VariantProps } from 'class-variance-authority';
import * as class_variance_authority_types from 'class-variance-authority/types';

declare const tailwindBoxVariants: (props?: ({
    bg?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "primary" | "secondary" | "tertiary" | "destructive" | "info" | "success" | "warning" | "danger" | "muted" | "accent" | "black" | "white" | "transparent" | "background" | "foreground" | "inherit" | "currentColor" | "dimmed" | null | undefined;
    textColor?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "primary" | "secondary" | "tertiary" | "destructive" | "info" | "success" | "warning" | "danger" | "muted" | "accent" | "black" | "white" | "transparent" | "background" | "foreground" | "inherit" | "currentColor" | "dimmed" | null | undefined;
    borderColor?: "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "primary" | "secondary" | "tertiary" | "destructive" | "info" | "success" | "warning" | "danger" | "muted" | "accent" | "black" | "white" | "transparent" | "background" | "foreground" | "inherit" | "currentColor" | "dimmed" | null | undefined;
    fontSize?: "xs" | "2xs" | "3xs" | "tiny" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;

type TailwindBoxVariants = VariantProps<typeof tailwindBoxVariants>;

type As = React.ElementType;
interface TailwindStyledComponentProps extends TailwindBoxVariants {
    'data-qa'?: string;
}
type OmitCommonProps<Target, OmitAdditionalProps extends keyof Record<PropertyKey, never> = never> = Omit<Target, 'transition' | 'as' | 'textColor' | 'translate' | OmitAdditionalProps>;
type RightJoinProps<SourceProps extends object = NonNullable<unknown>, OverrideProps extends object = NonNullable<unknown>> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;
type MergeWithAs<ComponentProps extends object, AsProps extends object, AdditionalProps extends object = NonNullable<unknown>, AsComponent extends As = As> = (RightJoinProps<ComponentProps, AdditionalProps> | RightJoinProps<AsProps, AdditionalProps>) & {
    as?: AsComponent;
};
type ComponentWithAs<Component extends As, Props extends object = NonNullable<unknown>> = {
    <AsComponent extends As = Component>(props: MergeWithAs<React.ComponentProps<Component>, React.ComponentProps<AsComponent>, Props, AsComponent>, ref?: ForwardedRef<Component>): React.ReactElement;
    displayName?: string;
    propTypes?: WeakValidationMap<unknown>;
    contextTypes?: ValidationMap<unknown>;
    id?: string;
};

/**
 * BoxProps is the props for the Box component
 */
interface BoxProps extends TailwindStyledComponentProps {
}
/**
 * BoxPropsWithRef is the props for the Box component with a ref
 */
type BoxPropsWithRef<T extends As = 'div', Props extends object = NonNullable<unknown>> = RightJoinProps<React.ComponentPropsWithoutRef<T> & React.RefAttributes<React.ElementRef<T>>, RightJoinProps<BoxProps, Props>>;
/**
 * BoxPropsWithoutRef is the props for the Box component without a ref
 */
type BoxPropsWithoutRef<T extends As = 'div', Props extends object = NonNullable<unknown>> = RightJoinProps<React.ComponentPropsWithoutRef<T>, RightJoinProps<BoxProps, Props>>;
/**
 * Box Component
 *
 * The most fundamental layout component - a polymorphic box with styling props.
 * Can be rendered as any HTML element using the `as` prop.
 *
 * @example
 * // Basic box
 * import { Box } from '@paalstack/react-ui';
 *
 * <Box>Content</Box>
 *
 * @example
 * // Box with background and text color
 * <Box bg="blue" textColor="white" className="p-4 rounded-lg">
 *   Styled box
 * </Box>
 *
 * @example
 * // Polymorphic usage - render as different element
 * <Box as="section">Section content</Box>
 * <Box as="article">Article content</Box>
 * <Box as="header">Header content</Box>
 *
 * @example
 * // With border
 * <Box borderColor="gray" className="border p-4">
 *   Bordered box
 * </Box>
 *
 * @example
 * // With font size
 * <Box fontSize="lg" className="p-2">
 *   Large text
 * </Box>
 *
 * @example
 * // Clickable box
 * <Box as="button" onClick={handleClick} className="p-4 hover:bg-gray-100">
 *   Click me
 * </Box>
 *
 * @example
 * // Card-like box
 * <Box className="rounded-lg shadow-md p-6 bg-white">
 *   <h3>Card Title</h3>
 *   <p>Card content</p>
 * </Box>
 *
 * @example
 * // With ref
 * const boxRef = useRef<HTMLDivElement>(null);
 * <Box ref={boxRef}>Content</Box>
 *
 * @tip Use `as` prop to render Box as any HTML element
 * @tip Supports all HTML attributes of the rendered element
 * @tip Use bg, textColor, borderColor, fontSize props for quick styling
 * @tip Can be used as base for all other layout components
 */
declare const Box: ComponentWithAs<'div', BoxProps>;

export { Box as B, type ComponentWithAs as C, type BoxProps as a, type BoxPropsWithRef as b, type BoxPropsWithoutRef as c };
