import { PantokenPlugin, PropertyRule, Token } from "@pantoken/model";
//#region src/to-css.d.ts
/** Options for {@link toCss}. */
interface ToCssOptions {
  /** The selector scoped declarations are emitted under (default `":root"`). */
  scope?: string;
  /** Plugins whose `css` hooks run after the base CSS is built (default: none). */
  plugins?: readonly PantokenPlugin[];
}
/**
 * Emit CSS for a token IR.
 *
 * @param tokens - The IR (e.g. from `@pantoken/tokens`).
 * @param options - {@link ToCssOptions}.
 * @returns The CSS string.
 *
 * @example Build the default stylesheet
 * ```ts
 * import { toCss } from "@pantoken/css";
 * import { tokens } from "@pantoken/tokens";
 *
 * const stylesheet = toCss(tokens); // declarations under :root
 * ```
 *
 * @example Scope declarations to a class and build another theme
 * ```ts
 * import { toCss } from "@pantoken/css";
 * import { byTheme } from "@pantoken/tokens";
 *
 * toCss(byTheme("canvas"), { scope: '[class*="instui"]' });
 * ```
 *
 * @example Post-process with a plugin css hook
 * ```ts
 * import { toCss } from "@pantoken/css";
 * import { tokens } from "@pantoken/tokens";
 *
 * toCss(tokens, {
 *   plugins: [
 *     {
 *       name: "focus",
 *       css: () => ({ append: ":focus-visible { outline: 2px solid var(--instui-focus-color); }" }),
 *     },
 *   ],
 * });
 * ```
 */
export declare function toCss(tokens: readonly Token[], options?: ToCssOptions): string;
//#endregion
//#region src/emit.d.ts
/** One scoped block of custom properties, optionally wrapped in an `@layer`. */
interface CssSection {
  /** Plain layer name (e.g. `"pantoken"`), no `@` prefix. Omit to skip the wrapper. */
  layer?: string;
  pairs: [string, string][];
}
/**
 * Build a CSS file string: typed `@property` registrations (top-level, theme-agnostic) followed by
 * one or more scoped declaration sections (whose selector the consuming build may rewrite).
 *
 * @example Register one typed property and emit a scoped declaration
 * ```ts
 * import { buildCssFile } from "@pantoken/css";
 *
 * buildCssFile({
 *   comments: ["/* my tokens *\/"],
 *   scope: ":root",
 *   properties: [{ name: "--instui-color-brand", syntax: "<color>", value: "#0374b5" }],
 *   sections: [{ pairs: [["--instui-color-text-base", "var(--instui-color-brand)"]] }],
 * });
 * ```
 *
 * @example Wrap a section in a CSS cascade layer
 * ```ts
 * import { buildCssFile } from "@pantoken/css";
 *
 * buildCssFile({
 *   comments: [],
 *   scope: ":root",
 *   sections: [{ layer: "pantoken", pairs: [["--instui-spacing-space-md", "1rem"]] }],
 * });
 * ```
 */
export declare function buildCssFile({ comments, scope, properties, sections, inherits }: {
  comments: string[];
  scope: string;
  properties?: PropertyRule[];
  sections: CssSection[];
  inherits?: boolean;
}): string;
//#endregion
//#region src/index.d.ts
/**
 * The ready-made `rebrand` stylesheet string (typed: concrete tokens as `@property` registrations).
 *
 * @example
 * ```ts
 * import { css } from "@pantoken/css";
 *
 * document.head.insertAdjacentHTML("beforeend", `<style>${css}</style>`);
 * ```
 */
export declare const css: string;
/**
 * The lean `rebrand` stylesheet string — the full sheet minus the `--instui-icon-*` glyph tokens (the
 * ~1,777 icon data-URIs that make up most of {@link css}). Roughly a sixth the size over the wire; the
 * recommended foundation for CDN/embed delivery. Components reference only a handful of icons, shipped
 * separately as `@pantoken/components`'s `component-icons.css`; consumers who use `var(--instui-icon-*)`
 * broadly should load the full {@link css} (or the `icons.css` glyph sheet). See
 * `@pantoken/css/style.lean.css`.
 *
 * @example
 * ```ts
 * import { leanCss } from "@pantoken/css";
 * ```
 */
export declare const leanCss: string;
//#endregion
export { type CssSection, type ToCssOptions, css as default };