@stratakit/foundations/dist/Root.d.ts

Foundational pieces of StrataKit

import * as React from "react";
import type { BaseProps } from "./~utils.js";
interface RootProps extends BaseProps {
    /**
     * The color scheme to use for all components under the Root.
     */
    colorScheme: "light" | "dark";
    /**
     * Whether to synchronize the color scheme with the parent document (or shadow-root host).
     *
     * This is useful when you don't have explicit control over the color scheme of the host.
     *
     * It can be disabled if you want to isolate StrataKit's styles to `<Root>` and its descendants.
     *
     * @default true
     */
    synchronizeColorScheme?: boolean;
    /**
     * The accent color to use for all components under the Root:
     *
     * - `"aurora"`: StrataKit's preferred green accent color.
     * - `"cobalt"`: Blue accent color for better compatibility with older, iTwinUI-based applications.
     *
     * @default "aurora"
     */
    unstable_accentColor?: "aurora" | "cobalt";
    /**
     * The density to use for all components under the Root.
     */
    density?: "dense";
    /**
     * An HTML sanitizer function that will be used across all components wherever DOM elements
     * are created from HTML strings.
     *
     * When this prop is not passed, sanitization will be skipped.
     *
     * Example:
     * ```tsx
     * unstable_htmlSanitizer={DOMPurify.sanitize}
     * ```
     */
    unstable_htmlSanitizer?: (html: string) => string;
    /**
     * Allows to customize the root portal container element.
     */
    portalContainer?: React.ReactElement;
    /**
     * The root node to which this `Root` component is attached.
     *
     * This needs to be set when the `Root` is rendered within shadow DOM or a popout window.
     *
     * @default document
     */
    rootNode?: Document | ShadowRoot;
}
/**
 * Component to be used at the root of your application. It ensures that StrataKit styles and fonts are loaded
 * and automatically applied to the current page or the encompassing shadow-root.
 *
 * Make sure to specify the `colorScheme` and `density` props.
 *
 * Example:
 * ```tsx
 * <Root colorScheme="dark" density="dense">
 *   <App />
 * </Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
export {};