import { F as FNode } from './types-eDz8Zr3v.js';

/**
 * CSS value types
 */
type CSSValue = string | number;
/**
 * Standard CSS properties with support for numbers (auto-converted to px)
 */
interface CSSProperties {
    display?: CSSValue;
    position?: CSSValue;
    top?: CSSValue;
    right?: CSSValue;
    bottom?: CSSValue;
    left?: CSSValue;
    zIndex?: CSSValue;
    flex?: CSSValue;
    flexDirection?: CSSValue;
    flexWrap?: CSSValue;
    flexGrow?: CSSValue;
    flexShrink?: CSSValue;
    flexBasis?: CSSValue;
    justifyContent?: CSSValue;
    alignItems?: CSSValue;
    alignContent?: CSSValue;
    alignSelf?: CSSValue;
    gap?: CSSValue;
    rowGap?: CSSValue;
    columnGap?: CSSValue;
    grid?: CSSValue;
    gridTemplate?: CSSValue;
    gridTemplateColumns?: CSSValue;
    gridTemplateRows?: CSSValue;
    gridColumn?: CSSValue;
    gridRow?: CSSValue;
    gridArea?: CSSValue;
    width?: CSSValue;
    height?: CSSValue;
    minWidth?: CSSValue;
    minHeight?: CSSValue;
    maxWidth?: CSSValue;
    maxHeight?: CSSValue;
    padding?: CSSValue;
    paddingTop?: CSSValue;
    paddingRight?: CSSValue;
    paddingBottom?: CSSValue;
    paddingLeft?: CSSValue;
    margin?: CSSValue;
    marginTop?: CSSValue;
    marginRight?: CSSValue;
    marginBottom?: CSSValue;
    marginLeft?: CSSValue;
    border?: CSSValue;
    borderWidth?: CSSValue;
    borderStyle?: CSSValue;
    borderColor?: CSSValue;
    borderTop?: CSSValue;
    borderRight?: CSSValue;
    borderBottom?: CSSValue;
    borderLeft?: CSSValue;
    borderRadius?: CSSValue;
    borderTopLeftRadius?: CSSValue;
    borderTopRightRadius?: CSSValue;
    borderBottomLeftRadius?: CSSValue;
    borderBottomRightRadius?: CSSValue;
    color?: CSSValue;
    backgroundColor?: CSSValue;
    background?: CSSValue;
    backgroundImage?: CSSValue;
    backgroundSize?: CSSValue;
    backgroundPosition?: CSSValue;
    backgroundRepeat?: CSSValue;
    opacity?: CSSValue;
    font?: CSSValue;
    fontFamily?: CSSValue;
    fontSize?: CSSValue;
    fontWeight?: CSSValue;
    fontStyle?: CSSValue;
    lineHeight?: CSSValue;
    letterSpacing?: CSSValue;
    textAlign?: CSSValue;
    textDecoration?: CSSValue;
    textTransform?: CSSValue;
    whiteSpace?: CSSValue;
    wordBreak?: CSSValue;
    overflow?: CSSValue;
    overflowX?: CSSValue;
    overflowY?: CSSValue;
    textOverflow?: CSSValue;
    boxShadow?: CSSValue;
    textShadow?: CSSValue;
    outline?: CSSValue;
    outlineWidth?: CSSValue;
    outlineStyle?: CSSValue;
    outlineColor?: CSSValue;
    outlineOffset?: CSSValue;
    visibility?: CSSValue;
    cursor?: CSSValue;
    pointerEvents?: CSSValue;
    userSelect?: CSSValue;
    transform?: CSSValue;
    transformOrigin?: CSSValue;
    transition?: CSSValue;
    transitionProperty?: CSSValue;
    transitionDuration?: CSSValue;
    transitionTimingFunction?: CSSValue;
    transitionDelay?: CSSValue;
    animation?: CSSValue;
    animationName?: CSSValue;
    animationDuration?: CSSValue;
    animationTimingFunction?: CSSValue;
    animationDelay?: CSSValue;
    animationIterationCount?: CSSValue;
    animationDirection?: CSSValue;
    animationFillMode?: CSSValue;
    content?: CSSValue;
    objectFit?: CSSValue;
    objectPosition?: CSSValue;
    filter?: CSSValue;
    backdropFilter?: CSSValue;
    mixBlendMode?: CSSValue;
    isolation?: CSSValue;
    contain?: CSSValue;
    aspectRatio?: CSSValue;
    [key: string]: CSSValue | StyleObject | undefined;
}
/**
 * Style object with support for nested selectors and at-rules
 */
interface StyleObject extends CSSProperties {
    /** Nested selectors: &:hover, &::before, & > div */
    [key: `&${string}`]: StyleObject;
    /** At-rules: @media, @supports, @container */
    [key: `@${string}`]: StyleObject;
}
/**
 * Keyframes definition
 */
interface KeyframeDefinition {
    [key: string]: CSSProperties;
}
/**
 * Variant configuration for styled()
 */
type VariantConfig = {
    [variantName: string]: {
        [variantValue: string]: StyleObject;
    };
};
/**
 * Default variants type
 */
type DefaultVariants<V extends VariantConfig> = {
    [K in keyof V]?: keyof V[K];
};
/**
 * Styled component configuration
 */
interface StyledConfig<V extends VariantConfig = VariantConfig> {
    base: StyleObject;
    variants?: V;
    defaultVariants?: DefaultVariants<V>;
    compoundVariants?: Array<{
        [K in keyof V]?: keyof V[K];
    } & {
        css: StyleObject;
    }>;
}
/**
 * Props for styled components
 */
type StyledProps<V extends VariantConfig = VariantConfig> = {
    [K in keyof V]?: keyof V[K];
} & {
    children?: unknown;
    className?: string;
    [key: string]: unknown;
};

/**
 * Create a CSS class from a style object
 *
 * @example
 * ```tsx
 * const buttonClass = css({
 *   padding: '8px 16px',
 *   backgroundColor: 'blue',
 *   color: 'white',
 *   '&:hover': {
 *     backgroundColor: 'darkblue'
 *   }
 * })
 *
 * <button className={buttonClass}>Click me</button>
 * ```
 */
declare function css(styles: StyleObject): string;
/**
 * Combine multiple class names, filtering out falsy values
 *
 * @example
 * ```tsx
 * const className = cx(
 *   baseClass,
 *   isActive && activeClass,
 *   variant === 'primary' && primaryClass
 * )
 * ```
 */
declare function cx(...classes: (string | boolean | null | undefined)[]): string;

type HTMLTag = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'menu' | 'meta' | 'meter' | 'nav' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'script' | 'search' | 'section' | 'select' | 'slot' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr';
/**
 * Create a styled component with variant support
 *
 * @example
 * ```tsx
 * const Button = styled('button', {
 *   base: {
 *     padding: '8px 16px',
 *     border: 'none',
 *     borderRadius: 4,
 *     cursor: 'pointer'
 *   },
 *   variants: {
 *     variant: {
 *       primary: { backgroundColor: 'blue', color: 'white' },
 *       secondary: { backgroundColor: 'gray', color: 'black' }
 *     },
 *     size: {
 *       sm: { padding: '4px 8px', fontSize: 12 },
 *       md: { padding: '8px 16px', fontSize: 14 },
 *       lg: { padding: '12px 24px', fontSize: 16 }
 *     }
 *   },
 *   defaultVariants: {
 *     variant: 'primary',
 *     size: 'md'
 *   }
 * })
 *
 * // Usage
 * <Button variant="secondary" size="lg">Click me</Button>
 * ```
 */
declare function styled<T extends HTMLTag, V extends VariantConfig = Record<string, never>>(tag: T, config: StyledConfig<V>): StyledComponent<T, V>;
type StyledComponent<_T extends HTMLTag, V extends VariantConfig> = {
    (props: StyledComponentProps<V>): FNode;
    displayName: string;
};
type StyledComponentProps<V extends VariantConfig> = {
    [K in keyof V]?: keyof V[K];
} & {
    children?: unknown;
    className?: string;
    [key: string]: unknown;
};

/**
 * Create a keyframes animation
 *
 * @example
 * ```tsx
 * const fadeIn = keyframes({
 *   from: { opacity: 0 },
 *   to: { opacity: 1 }
 * })
 *
 * const slideIn = keyframes({
 *   '0%': { transform: 'translateX(-100%)' },
 *   '100%': { transform: 'translateX(0)' }
 * })
 *
 * const className = css({
 *   animation: `${fadeIn} 0.3s ease-in-out`
 * })
 * ```
 */
declare function keyframes(definition: KeyframeDefinition): string;

/**
 * Get all collected styles for SSR
 */
declare function getStyles(): string;
/**
 * Get styles as a style tag for SSR
 */
declare function getStyleTag(): string;
/**
 * Reset collected styles and cache (for SSR between requests or testing)
 */
declare function resetStyles(): void;
/**
 * Hydrate styles on the client
 * Call this after SSR to sync the cache with server-rendered styles
 */
declare function hydrateStyles(): void;

export { type CSSProperties, type CSSValue, type DefaultVariants, type KeyframeDefinition, type StyleObject, type StyledConfig, type StyledProps, type VariantConfig, css, cx, getStyleTag, getStyles, hydrateStyles, keyframes, resetStyles, styled };