import type * as React from "react"; import { useRender } from "@base-ui/react/use-render"; import { type StyleProps } from "./style_props"; import type { TextColor } from "./text_ink"; interface LabelBase extends StyleProps { children?: React.ReactNode; /** Clamp to this many lines, with an ellipsis on the last. */ lines?: number; testID?: string; ref?: React.Ref; render?: useRender.RenderProp; } /** Over a VALUE — `xs` muted medium, calibrated for dense surfaces. */ interface LabelValueProps extends LabelBase { over?: "value"; /** * A VERDICT carries its judgement in ink — "Mismatch" in danger, "Resolved" in * success — and keeps the rung and the weight. Everything else stays muted: * colour here is what the word MEANS, never emphasis. */ color?: TextColor; /** Alignment is layout, not rung — a right-aligned label is still a label. */ align?: "left" | "center" | "right"; size?: never; } /** Over a BLOCK — `sm`–`md` medium, in the page's own ink. */ interface LabelBlockProps extends LabelBase { over: "block"; /** * `sm` (the floor) or `md` where the block is a major sub-part. Nothing * larger: past `md` the label stops titling a group and starts competing with * the section heading above it. */ size?: "sm" | "md"; color?: never; align?: never; } export type LabelProps = LabelValueProps | LabelBlockProps; /** * THE SMALL WORD THAT NAMES SOMETHING ELSE, and `over` is what it names. * * `value` (the default) is the quiet line above or beside a VALUE — a metric's * caption, a field name in a cell, an artifact tag ("Proposed", "Question"). It * is calibrated for DENSE surfaces, where a 12px label sits among dozens of * siblings and quiet is the point. * * `block` titles a BLOCK: "Deciding factor" over the fact it names, "Delivery" * over an address stack, "Next action" over the paragraph someone has to act on. * A block someone must act on has no siblings to be quiet among, so the value * rung reads as an afterthought there — and at 12px stacked diacritics crowd, * which makes it worse in Vietnamese than the English it was measured in. * Picking by feel is how a title ends up whispering, which is why the axis is a * prop rather than a judgement. * * There is no `transform`, and that is the enforcement: all-caps reads as * shouting, and reflexively uppercasing every little label is the single thing * that makes a surface feel templated. Sentence case, always. There is no * `weight` either — semibold is the heading rung, and a label reaching for it is * a heading wearing the wrong name. * * It renders no element of its own: the `Text` at the fixed rung IS the root, so * it wears `lotics-label` beside `lotics-text` on one box — the root is this * component's own element, not a nested component. */ export declare function Label(props: LabelProps): React.JSX.Element; export {};