import type { CreatedStyles, KeyframeDefinition, StyleArg, StyleProps, StyleRule, VarGroup, VarValue } from './types';
/**
 * Compiles named style objects into atomic class names.
 *
 * Every declaration becomes its own class, deduplicated across the whole
 * program by content hash, so two components that both say `padding: 16`
 * share one rule.
 *
 * @example
 * ```ts
 * const styles = css.create({
 *   card: { padding: 16, ':hover': { transform: 'translateY(-2px)' } },
 *   danger: { color: 'red' },
 *   sized: (width: number) => ({ width }),
 * })
 * ```
 */
export declare function create<T extends Record<string, StyleRule | ((...args: any[]) => StyleRule)>>(styles: T): CreatedStyles<T>;
/**
 * Merges compiled styles into the props an element needs.
 *
 * Later arguments win, property by property — not class by class — so
 * `props(base, override)` behaves like object spread rather than like the
 * cascade. Falsy arguments are skipped, which makes conditional styles read
 * as `isActive && styles.active`.
 *
 * @example
 * ```ts
 * <div {...css.props(styles.card, isActive && styles.active)} />
 * ```
 */
export declare function props(...args: StyleArg[]): StyleProps;
/**
 * Declares a group of CSS custom properties and returns `var(…)` references
 * for each, ready to drop into any style object.
 *
 * A value may itself be conditional, which is how a theme responds to the
 * viewer's colour scheme without any style needing to know about it.
 *
 * @example
 * ```ts
 * export const theme = css.defineVars({
 *   accent: '#0b7',
 *   surface: { default: '#fff', '@media (prefers-color-scheme: dark)': '#111' },
 * })
 * ```
 */
export declare function defineVars<T extends Record<string, VarValue>>(vars: T): VarGroup<T>;
/**
 * Re-declares an existing variable group under a generated class name.
 *
 * Put the returned class on any element and every style beneath it that reads
 * those variables picks up the override — theming without threading props.
 *
 * @example
 * ```ts
 * const dark = css.createTheme(theme, { surface: '#111' })
 * <section className={dark}>…</section>
 * ```
 */
export declare function createTheme<T extends Record<string, string>>(vars: T, overrides: Partial<Record<keyof T, string | number>>): string;
/**
 * Declares an `@keyframes` animation and returns its generated name.
 *
 * @example
 * ```ts
 * const fade = css.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 * const styles = css.create({ intro: { animationName: fade } })
 * ```
 */
export declare function keyframes(definition: KeyframeDefinition): string;
/**
 * Declares a value with progressive-enhancement fallbacks.
 *
 * Returns the values in CSS fallback order — least-supported last — so a
 * browser that understands `position: sticky` uses it and one that doesn't
 * keeps the previous declaration.
 *
 * @example
 * ```ts
 * css.create({ bar: { position: css.firstThatWorks('sticky', '-webkit-sticky', 'fixed') } })
 * ```
 */
export declare function firstThatWorks<T extends string>(...values: T[]): T[];
/**
 * Freezes build-time constants — media query strings, spacing scales — that
 * styles reference but that never become CSS of their own.
 *
 * @example
 * ```ts
 * const breakpoints = css.defineConsts({ md: '@media (min-width: 768px)' })
 * css.create({ grid: { [breakpoints.md]: { display: 'grid' } } })
 * ```
 */
export declare function defineConsts<T extends Record<string, string | number>>(consts: T): Readonly<T>;