import { PropertiesFallback, PropertiesHyphenFallback } from 'csstype';

interface CSSCustomProperties {
    '--tw-rotate'?: string;
    '--tw-gradient-stops'?: string;
}
interface CSSProperties extends PropertiesFallback<string, string>, PropertiesHyphenFallback<string, string>, CSSCustomProperties {
}

declare type Falsy = '' | 0 | -0 | false | null | undefined | void;
declare type MaybeArray<T> = T | readonly T[];

interface TWCallable {
    (strings: TemplateStringsArray, ...interpolations: Token[]): string;
    (...tokens: Token[]): string;
}
interface TW extends TWCallable {
    theme: ThemeResolver;
}
interface Context {
    /** Allow composition */
    readonly tw: TWCallable;
    /** Access to theme values */
    readonly theme: ThemeResolver;
    /** Create unique identifier (group, custom properties) */
    readonly tag: (key: string) => string;
    readonly css: (rule: Rule[] | string) => CSSRules;
}
interface Rule {
    /**
     * The variants: `[":sm", ":dark", ":hover"]`
     */
    v: string[];
    /**
     * The directive: `"text-sm"`, `"rotate-45"`
     */
    d: string | InlineDirective;
    /** Is this rule negated: `"-rotate-45"` =\> `true` */
    n: boolean | undefined;
    /** Is this rule marked as important: `"stroke-4!"` =\> `true` */
    i: boolean | undefined;
    /**
     * The id is the tailwind rule including variants, negate and directive
     *
     * Initialy this is set to an empty string.
     *
     * This is used to cache the id of static rules (from template literals).
     */
    $: string;
}
interface InlineDirective {
    (context: Context): CSSRules | string | Falsy;
}
interface TokenGrouping extends Record<string, Token> {
}
declare type TypescriptCompat = boolean | number;
declare type Token = string | TokenGrouping | InlineDirective | Token[] | Falsy | TypescriptCompat;
declare type CSSAtMedia = Record<string, CSSRules>;
declare type CSSAtSupports = Record<string, CSSRules>;
declare type CSSAtKeyframes = Record<string, CSSProperties | ((context: Context) => CSSProperties)>;
/**
 * See: https://drafts.csswg.org/css-nesting/#nest-selector
 *
 * ```
 * "& > * + *": {
 *   marginLeft: 16
 * },
 *
 * // In a comma-separated list, each individual selector shall start with "&"
 * "&:focus, &:active": {
 *   outline: "solid"
 * },
 *
 * // Self-references are also supported
 * "& + &": {
 *   color: "green"
 * }
 * ```
 */
interface CSSRules {
    /** Global defaults */
    [key: string]: CSSProperties | CSSAtMedia | CSSAtSupports | CSSAtKeyframes | CSSRules | string | string[] | Falsy | CSSRulesThunk;
}
interface CSSRulesThunk {
    (context: Context): CSSProperties | CSSAtMedia | CSSAtSupports | CSSAtKeyframes | CSSRules | CSSRulesThunk | string | string[] | Falsy;
}

interface ThemeResolver {
    <Section extends keyof Theme>(section: Section): Record<string, ThemeSectionType<Theme[Section]>>;
    <Section extends keyof Theme>(keypath: `${Section}.${string}`): ThemeSectionType<Theme[Section]> | undefined;
    <Section extends keyof Theme>(keypath: `${Section}.${string}`, defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): NonNullable<ThemeSectionType<Theme[Section]>>;
    <Section extends keyof Theme>(section: Section, key: string | string[]): ThemeSectionType<Theme[Section]> | undefined;
    <Section extends keyof Theme>(section: Section, key: string | string[], defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): NonNullable<ThemeSectionType<Theme[Section]>>;
}
declare type Unwrap<T> = T extends string[] ? string : T extends Record<string, infer R> ? R : T;
declare type ThemeSectionType<T> = T extends ThemeSection<infer R> ? Unwrap<R> : Exclude<T, ThemeSectionResolver<T>>;
interface ThemeSectionResolverContext {
    /**
     * No-op function as negated values are automatically infered and do _not_ not to be in the theme.
     */
    readonly negative: (records: Record<string, string | undefined>) => Record<string, string | undefined>;
    readonly breakpoints: (records: Record<string, ThemeScreen | undefined>) => Record<string, string | undefined>;
}
declare type ThemeSectionRecord<T = string> = Record<string, T | undefined>;
declare type ThemeSectionResolver<T = string> = (theme: ThemeResolver, context: ThemeSectionResolverContext) => ThemeSectionRecord<T>;
declare type ThemeSection<T = string> = ThemeSectionRecord<T> | ThemeSectionResolver<T>;
interface ThemeContainer {
    screens?: Record<string, string | undefined>;
    center?: boolean;
    padding?: string | Record<string, string | undefined>;
}
declare type ThemeScreenValue = string | {
    raw: string;
} | {
    min: string;
    max?: string;
} | {
    min?: string;
    max: string;
};
declare type ThemeScreen = MaybeArray<ThemeScreenValue>;
interface ThemeColorObject extends Record<string, ThemeColor> {
}
declare type ThemeColor = string | ThemeColorObject;
declare type ThemeFontSize = string | [size: string, lineHeight: string] | [size: string, options: {
    lineHeight?: string;
    letterSpacing?: string;
}];
declare type ThemeOutline = [outline: string, offset: string];
interface Theme {
    colors: ThemeSection<ThemeColor>;
    spacing: ThemeSection;
    durations: ThemeSection<string | string[]>;
    screens: ThemeSection<ThemeScreen>;
    animation: ThemeSection<string | string[]>;
    backgroundColor: ThemeSection<ThemeColor>;
    backgroundImage: ThemeSection<string | string[]>;
    backgroundOpacity: ThemeSection;
    borderColor: ThemeSection<ThemeColor>;
    borderOpacity: ThemeSection;
    borderRadius: ThemeSection;
    borderWidth: ThemeSection;
    boxShadow: ThemeSection<string | string[]>;
    container: ThemeContainer | ThemeSectionResolver<ThemeContainer>;
    divideColor: ThemeSection<ThemeColor>;
    divideOpacity: ThemeSection;
    divideWidth: ThemeSection;
    fill: ThemeSection<ThemeColor>;
    flex: ThemeSection;
    fontFamily: ThemeSection<string | string[]>;
    fontSize: ThemeSection<ThemeFontSize>;
    fontWeight: ThemeSection;
    gap: ThemeSection;
    gradientColorStops: ThemeSection<ThemeColor>;
    height: ThemeSection;
    inset: ThemeSection;
    keyframes: ThemeSection<Record<string, CSSProperties>>;
    letterSpacing: ThemeSection;
    lineHeight: ThemeSection;
    margin: ThemeSection;
    maxHeight: ThemeSection;
    maxWidth: ThemeSection;
    minHeight: ThemeSection;
    minWidth: ThemeSection;
    opacity: ThemeSection;
    order: ThemeSection;
    outline: ThemeSection<ThemeOutline>;
    padding: ThemeSection;
    placeholderColor: ThemeSection<ThemeColor>;
    placeholderOpacity: ThemeSection;
    ringColor: ThemeSection<ThemeColor>;
    ringOffsetColor: ThemeSection<ThemeColor>;
    ringOffsetWidth: ThemeSection;
    ringOpacity: ThemeSection;
    ringWidth: ThemeSection;
    rotate: ThemeSection;
    scale: ThemeSection;
    skew: ThemeSection;
    space: ThemeSection;
    stroke: ThemeSection<ThemeColor>;
    strokeWidth: ThemeSection;
    textColor: ThemeSection<ThemeColor>;
    textOpacity: ThemeSection;
    transitionDelay: ThemeSection<string | string[]>;
    transitionDuration: ThemeSection<string | string[]>;
    transitionProperty: ThemeSection<string | string[]>;
    transitionTimingFunction: ThemeSection<string | string[]>;
    translate: ThemeSection;
    width: ThemeSection;
    zIndex: ThemeSection;
}

/**
 * [[include:src/observe/README.md]]
 *
 * @packageDocumentation
 * @module twind/observe
 */

/**
 * Options for {@link createObserver}.
 */
interface ShimConfiguration {
    /**
     * Custom {@link twind.tw | tw} instance to use (default: {@link twind.tw}).
     */
    tw?: TW;
}
/** Provides the ability to watch for changes being made to the DOM tree. */
interface TwindObserver {
    /**
     * Stops observer from observing any mutations.
     */
    disconnect(): TwindObserver;
    /**
     * Observe an additional element.
     */
    observe(target: Node): TwindObserver;
}
/**
 * Creates a new {@link TwindObserver}.
 *
 * @param options to use
 */
declare const createObserver: ({ tw }?: ShimConfiguration) => TwindObserver;
/**
 * Creates a new {@link TwindObserver} and {@link TwindObserver.observe | start observing} the passed target element.
 * @param this to bind
 * @param target to shim
 * @param config to use
 */
declare function observe(this: ShimConfiguration | undefined | void, target: Node, config?: ShimConfiguration | undefined | void): TwindObserver;

export { ShimConfiguration, TwindObserver, createObserver, observe };
//# sourceMappingURL=observe.d.ts.map