import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
import "./Text.css";
/**
 * New typography variants derived from design tokens.
 * These use the typography preset classes from tokens/generated/typography.css
 */
export type NewTextVariant = "body-base-light" | "body-base-regular" | "body-base-bold" | "body-medium-light" | "body-medium-regular" | "body-medium-bold" | "body-small-light" | "body-small-regular" | "body-small-bold";
/**
 * Semantic text colors derived from design tokens.
 * Maps to CSS variables in tokens/generated/semantics.css
 */
export type NewTextColor = "current" | "neutral" | "neutral-secondary" | "brand" | "error" | "success" | "warning" | "info" | "inverse" | "disabled";
/**
 * One might argue that we're duplicating strings in this file.
 * That's how tailwind expects to detect used classes, so please do not make
 * anything dynamic or try to string concat class names.
 * https://v1.tailwindcss.com/docs/controlling-file-size
 */
export declare const allowedTextStyles: {
    readonly xs: `${string} ui:font-[400] ui:leading-[16px]`;
    readonly sm: `${string} ui:font-medium`;
    readonly "sm-strong": `${string} ui:font-semibold ui:antialiased`;
    readonly base: `${string} ui:font-normal`;
    readonly medium: `${string} ui:font-medium ui:antialiased`;
    readonly strong: `${string} ui:font-semibold ui:antialiased`;
    readonly lg: "";
    readonly "lg-medium": "ui:font-medium ui:antialiased";
    readonly "lg-strong": "ui:font-bold ui:antialiased";
    readonly xl: "ui:text-lg";
    readonly "xl-medium": "ui:font-medium ui:text-lg ui:antialiased";
    readonly "xl-strong": "ui:font-bold ui:text-lg ui:antialiased";
};
export declare const allowedColors: {
    readonly base: "ui:text-slate-800";
    readonly "slate-200": "ui:text-slate-200";
    readonly "slate-400": "ui:text-slate-400";
    readonly "slate-500": "ui:text-slate-500";
    readonly "slate-600": "ui:text-slate-600";
    readonly disabled: "ui:text-text-neutral-primary-disabled";
    readonly red: "ui:text-red-800";
    readonly green: "ui:text-green-800";
    readonly amber: "ui:text-yellow-800";
    readonly orange: "ui:text-yellow-800";
    readonly grey: "ui:text-slate-500";
    readonly white: "ui:text-white";
    readonly "blue-800": "ui:text-primary";
    readonly current: "ui:text-current";
    /**
     * Semantic colors
     */
    readonly "on-negative": "ui:text-on-negative";
    readonly "on-positive": "ui:text-on-positive";
    readonly "on-secondary": "ui:text-on-secondary";
    readonly "on-surface": "ui:text-on-surface";
    readonly "on-surface-variant": "ui:text-on-surface-variant";
    readonly "on-warning": "ui:text-on-warning";
    readonly "positive-solid": "ui:text-positive-solid";
    readonly "negative-solid": "ui:text-negative-solid";
    readonly "neutral-interactive": "ui:text-neutral-interactive";
    readonly primary: "ui:text-primary";
    readonly "primary-dark": "ui:text-primary-dark";
    readonly active: "ui:text-text-body-active";
};
declare const allowedHoverColors: {
    readonly "blue-900": "ui:hover:text-primary-dark";
    readonly white: "ui:hover:text-white";
};
export type TextColor = keyof typeof allowedColors;
export type TextHoverColor = keyof typeof allowedHoverColors;
export type TextStyle = keyof typeof allowedTextStyles;
/**
 * Legacy props for the Text component.
 * Used when variant is one of the old TextStyle values or undefined.
 */
export type LegacyTextProps<C extends ElementType> = ComponentPropsWithoutRef<C> & {
    as?: C;
    /**
     * @deprecated
     * Use `children` instead, as you would with a regular `<p>` tag.
     */
    text?: string;
    /**
     * @deprecated
     * Use `variant` instead. "type" is a word that is too ambiguous and
     * is also often used as an attribute name in HTML.
     *
     * @default "base"
     */
    type?: TextStyle;
    /**
     * The styling variant of the text.
     *
     * @default "base"
     */
    variant?: TextStyle;
    /**
     * Changes the component to be rendered inline. This is useful for
     * using this component inside of itself, for example, when you want
     * to render bold text inside of a paragraph rendered by this same component.
     *
     * @default false
     *
     * @deprecated use `as="span"` instead.
     */
    inline?: boolean;
    /**
     * @default "base"
     */
    color?: TextColor;
    /**
     * @default "base"
     */
    hoverColor?: TextHoverColor;
    /**
     * Tailwind class modifier that allows you to apply hover styles on this component
     * based on the styles of its parent.
     * https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
     *
     * @deprecated
     * Since this is a Tailwind specific feature we should not expose this to the consumer. We
     * should only use group-hover styles in the components in WebUI instead.
     */
    hoverInGroup?: boolean;
    className?: string;
    /**
     * Interpret an HTML string as regular markup, instead of rendering it as a string.
     *
     * @default false
     */
    containsDangerousHtml?: boolean;
    /**
     * With this prop enabled, text won't wrap to the next line but instead
     * will be truncated with an ellipsis.
     *
     * @default false
     */
    truncate?: boolean;
    /**
     * When `true` will work together with the `truncate` prop
     * and allow a max of two lines when breaking text before applying
     * ellipsis.
     *
     * @default false
     */
    clampLines?: boolean;
    /**
     * When `true` will apply tailwind's `capitalize` class.
     *
     * @default false;
     */
    capitalize?: boolean;
    "data-test-id"?: string;
};
/**
 * New props for the Text component when using new typography variants.
 * Provides a clean, minimal API with semantic colors from design tokens.
 */
type NewTextProps<C extends ElementType> = Omit<ComponentPropsWithoutRef<C>, "color"> & {
    /**
     * The HTML element to render.
     */
    as?: C;
    /**
     * The content to render.
     */
    children?: ReactNode;
    /**
     * Additional CSS classes.
     */
    className?: string;
    /**
     * The typography variant from design tokens.
     */
    variant: NewTextVariant;
    /**
     * Semantic text color from design tokens.
     * @default "neutral"
     */
    color?: NewTextColor;
    /**
     * Truncate text with ellipsis when it overflows.
     * @default false
     */
    truncate?: boolean;
    /**
     * Interpret an HTML string as regular markup, instead of rendering it as a string.
     * The HTML is sanitized using DOMPurify.
     * @default false
     */
    containsDangerousHtml?: boolean;
};
/**
 * Discriminated union of legacy and new Text props.
 * When using new variants (h1, h2, body-base-regular, etc.), legacy styling
 * props like type, inline, hoverColor are not available.
 */
export type TextProps<C extends ElementType> = LegacyTextProps<C> | NewTextProps<C>;
export declare const Text: <C extends ElementType = "p">(props: TextProps<C>) => import("react").JSX.Element;
export default Text;