@codegouvfr/react-dsfr/fr/index.d.ts

French State Design System React integration library

export * from "./colors";
export type { BreakpointKeys } from "./breakpoints";
import { spacing } from "./spacing";
export type { SpacingToken } from "./spacing";
export type { FrCxArg } from "./cx";
export type { ColorTheme } from "./colors";
export type { FrClassName, FrIconClassName, RiIconClassName } from "./generatedFromCss/classNames";
export declare const fr: {
    breakpoints: {
        up: (key: "sm" | "md" | "lg" | "xl") => "@media (min-width:36em)" | "@media (min-width:48em)" | "@media (min-width:62em)" | "@media (min-width:78em)";
        down: (key: "sm" | "md" | "lg" | "xl") => `@media (max-width:${number}em)`;
        between: (start: "xs" | "sm" | "md" | "lg" | "xl", end: "xs" | "sm" | "md" | "lg" | "xl") => `@media (min-width:0em) and (max-width:${number}em)` | `@media (min-width:36em) and (max-width:${number}em)` | `@media (min-width:48em) and (max-width:${number}em)` | `@media (min-width:62em) and (max-width:${number}em)` | `@media (min-width:78em) and (max-width:${number}em)`;
        only: (key: "xs" | "sm" | "md" | "lg" | "xl") => "@media (min-width:36em)" | "@media (min-width:48em)" | "@media (min-width:62em)" | "@media (min-width:78em)" | `@media (min-width:0em) and (max-width:${number}em)` | `@media (min-width:36em) and (max-width:${number}em)` | `@media (min-width:48em) and (max-width:${number}em)` | `@media (min-width:62em) and (max-width:${number}em)` | `@media (min-width:78em) and (max-width:${number}em)`;
        not: (key: "xs" | "sm" | "md" | "lg" | "xl") => string;
    };
    spacing: typeof spacing;
    cx: (...args: import("./cx").FrCxArg[]) => string;
    getColors: (isDark: boolean) => import("./colors").ColorTheme;
};