import { SzObject } from '@csszyx/compiler/browser';
import { ReactNode, ReactElement } from 'react';
import { dynamic } from './index.mjs';

/**
 * React integration for @csszyx/dynamic.
 *
 * Provides:
 * - sz: direct alias for dynamic() (cleaner import in React files)
 * - useSz(): hook returning stable { sz } object with cleanup on unmount
 * - CsszyxProvider: optional context for custom manifest URL
 *
 * @example
 * // Simple usage
 * import { sz } from '@csszyx/dynamic/react';
 * const cls = sz({ p: 4, bg: 'blue-500' });
 *
 * @example
 * // Hook usage (recommended — handles manifest + cleanup automatically)
 * import { useSz } from '@csszyx/dynamic/react';
 * function FormField({ schema }) {
 *     const { sz } = useSz();
 *     return <div className={sz(schema.style)}>{schema.label}</div>;
 * }
 *
 * @example
 * // Custom manifest URL
 * import { CsszyxProvider } from '@csszyx/dynamic/react';
 * <CsszyxProvider manifest="/assets/csszyx-manifest.json">
 *     <App />
 * </CsszyxProvider>
 */

/**
 * Runtime alias for dynamic(). Use in React files for consistency with
 * the build-time `sz` prop: `sz={{ p: 4 }}` at build, `sz({ p: 4 })` at runtime.
 */
declare const sz: typeof dynamic;
/**
 *
 */
interface UseSzReturn {
    /**
     * Converts sz props to a class string, injecting CSS for new classes.
     * Stable reference — safe to pass as a prop without useMemo.
     */
    sz: (props: SzObject) => string;
}
/**
 * Reset the shared consumer counter and pending timer — test-only. Module
 * state persists across tests in one suite, so suites that simulate
 * mount/unmount cycles must start from a known-empty lifecycle.
 */
declare function _resetUseSzLifecycle(): void;
/**
 * React hook for runtime dynamic styling.
 *
 * Returns a stable `{ sz }` object. Preloads the manifest on mount.
 * On unmount, releases CSSStyleSheet tiers and manifest cache — deferred
 * to survive React 18 StrictMode's double-mount/unmount cycle.
 *
 * @returns stable object containing the sz function for converting sz props to class strings
 * @example
 * const { sz } = useSz();
 * return <div className={sz(apiResponse.field.style)} />;
 */
declare function useSz(): UseSzReturn;
/**
 *
 */
interface CsszyxProviderProps {
    /** Custom manifest URL (default: '/csszyx-manifest.json'). */
    manifest: string;
    children: ReactNode;
}
/**
 * Optional React context for custom manifest path or non-root deployments.
 * Without Provider, dynamic() defaults to fetching /csszyx-manifest.json.
 *
 * @param props - component props
 * @param props.manifest - URL to the csszyx manifest JSON file
 * @param props.children - child React nodes to render within the provider
 * @returns React element wrapping children in a CsszyxContext.Provider
 * @example
 * <CsszyxProvider manifest="/api/assets/csszyx-manifest.json">
 *     <App />
 * </CsszyxProvider>
 */
declare function CsszyxProvider({ manifest, children }: CsszyxProviderProps): ReactElement;

export { CsszyxProvider, _resetUseSzLifecycle, sz, useSz };
export type { UseSzReturn };