@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/text/RequiredMarker.d.ts

@@ -1,8 +1,20 @@
-import { TextSize } from "./Text";
-export interface RequiredMarkerProps {
-    /** Match the size of the label it sits beside. @default TextSize.BODY_MD */
+import { type AriaAttributes, type CSSProperties } from "react";
+import { TextSize } from "./Text.js";
+export interface RequiredMarkerProps extends Omit<AriaAttributes, "aria-hidden"> {
+    /**
+     * Type step, to match the label it sits beside when it is not inside that label's `Text`.
+     * @default inherit
+     */
     size?: TextSize;
+    /** DOM id on the span. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the span. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the span. */
+    className?: string;
+    /** Inline style on the span; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/** The red asterisk marking a required field. Inputs render it from `isRequired`. */
-declare const RequiredMarker: ({ size }: RequiredMarkerProps) => import("react").JSX.Element;
+/** The required-field asterisk: an error-colored, `aria-hidden` `Span`. */
+declare const RequiredMarker: import("react").ForwardRefExoticComponent<RequiredMarkerProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default RequiredMarker;

package/dist/text/RequiredMarker.js

@@ -1,45 +1,43 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
 import { TextSize } from "./Text.js";
+import Span, { SpanVariant } from "./Span.js";
 /* empty css                         */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/text/RequiredMarker.tsx
-var _exp = () => ({ theme }) => theme.color.text.error;
-var _exp2 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.size.caption).with(TextSize.BODY_SM, () => theme.font.sans.size.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.size.body_md).with(TextSize.BODY_LG, () => theme.font.sans.size.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.size.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.size.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.size.heading_lg).exhaustive();
+/**
+* The error-colored asterisk that marks a required field. `Field` and the input labels render it
+* from `isRequired`; it is decorative (`aria-hidden`), because the control itself carries
+* `aria-required`. It renders `<Span variant={SpanVariant.ERROR} aria-hidden>*</Span>`, so by
+* default it inherits the step, family and line height of the label it sits in.
+*
+* `size` pins a type step for a marker that is not inside the label's `Text` (a sibling in a flex
+* row): one `css` block per `TextSize` sets the sans size, line height and letter spacing, the
+* metrics a `Text` at that step would set.
+*/
+/** Each step's sans metrics, the ones a `Text` at that step sets. */
+var REQUIRED_MARKER_SIZE_TO_CSS_MAP = {
+	[TextSize.CAPTION]: "gx-RequiredMarker-TextSize_CAPTION-t1i18c6k",
+	[TextSize.BODY_SM]: "gx-RequiredMarker-TextSize_BODY_SM-t7cpomi",
+	[TextSize.BODY_MD]: "gx-RequiredMarker-TextSize_BODY_MD-tn5ssu7",
+	[TextSize.BODY_LG]: "gx-RequiredMarker-TextSize_BODY_LG-t1qgg3cj",
+	[TextSize.HEADING_SM]: "gx-RequiredMarker-TextSize_HEADING_SM-t10554bd",
+	[TextSize.HEADING_MD]: "gx-RequiredMarker-TextSize_HEADING_MD-tlsuch8",
+	[TextSize.HEADING_LG]: "gx-RequiredMarker-TextSize_HEADING_LG-t1jb9q24",
+	[TextSize.DISPLAY_SM]: "gx-RequiredMarker-TextSize_DISPLAY_SM-t1d9y719",
+	[TextSize.DISPLAY_LG]: "gx-RequiredMarker-TextSize_DISPLAY_LG-t48ng2a"
 };
-var _exp3 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.weight.medium).with(TextSize.BODY_SM, () => theme.font.sans.weight.medium).with(TextSize.BODY_MD, () => theme.font.sans.weight.medium).with(TextSize.BODY_LG, () => theme.font.sans.weight.medium).with(TextSize.HEADING_SM, () => theme.font.sans.weight.medium).with(TextSize.HEADING_MD, () => theme.font.sans.weight.medium).with(TextSize.HEADING_LG, () => theme.font.sans.weight.medium).exhaustive();
-};
-var _exp4 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.height.caption).with(TextSize.BODY_SM, () => theme.font.sans.height.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.height.body_md).with(TextSize.BODY_LG, () => theme.font.sans.height.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.height.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.height.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.height.heading_lg).exhaustive();
-};
-var _exp5 = () => ({ theme, $size }) => {
-	return match($size).with(TextSize.CAPTION, () => theme.font.sans.spacing.caption).with(TextSize.BODY_SM, () => theme.font.sans.spacing.body_sm).with(TextSize.BODY_MD, () => theme.font.sans.spacing.body_md).with(TextSize.BODY_LG, () => theme.font.sans.spacing.body_lg).with(TextSize.HEADING_SM, () => theme.font.sans.spacing.heading_sm).with(TextSize.HEADING_MD, () => theme.font.sans.spacing.heading_md).with(TextSize.HEADING_LG, () => theme.font.sans.spacing.heading_lg).exhaustive();
-};
-var _exp6 = () => ({ $size }) => {
-	return match($size).with(TextSize.CAPTION, () => "0.5px").with(TextSize.BODY_SM, () => "1px").with(TextSize.BODY_MD, () => "1px").with(TextSize.BODY_LG, () => "1px").with(TextSize.HEADING_SM, () => "2px").with(TextSize.HEADING_MD, () => "2px").with(TextSize.HEADING_LG, () => "2px").exhaustive();
-};
-var StyledRequiredMarker = withTheme(/*#__PURE__*/ styled("span")({
-	name: "StyledRequiredMarker",
-	class: "s1i18c6k",
-	propsAsIs: false,
-	vars: {
-		"s1i18c6k-0": [_exp()],
-		"s1i18c6k-1": [_exp2()],
-		"s1i18c6k-2": [_exp3()],
-		"s1i18c6k-3": [_exp4()],
-		"s1i18c6k-4": [_exp5()],
-		"s1i18c6k-5": [_exp6()]
-	}
-}));
-/** The red asterisk marking a required field. Inputs render it from `isRequired`. */
-var RequiredMarker = ({ size = TextSize.BODY_MD }) => {
-	return /* @__PURE__ */ jsx(StyledRequiredMarker, {
-		$size: size,
+/** The required-field asterisk: an error-colored, `aria-hidden` `Span`. */
+var RequiredMarker = forwardRef(function RequiredMarker({ size, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Span, {
+		...rest,
+		ref,
+		variant: SpanVariant.ERROR,
+		"aria-hidden": true,
+		className: cx(size !== void 0 && REQUIRED_MARKER_SIZE_TO_CSS_MAP[size], className),
 		children: "*"
 	});
-};
+});
+RequiredMarker.displayName = "RequiredMarker";
 //#endregion
 export { RequiredMarker as default };

package/dist/text/Selectable.d.ts

@@ -1,7 +1,6 @@
-import type { PropsWithChildren } from "react";
-/**
- * Makes its children selectable. DLS text is `user-select: none` by default so
- * UI chrome doesn't highlight — wrap the parts a user should be able to copy.
- */
-declare const Selectable: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+import { type SpanProps } from "./Span.js";
+/** `Span` props without `isSelectable`: a `Selectable` is always selectable. */
+export type SelectableProps = Omit<SpanProps, "isSelectable">;
+/** User-selectable inline text inside a `Text`; a `Span` preset. */
+declare const Selectable: import("react").ForwardRefExoticComponent<SelectableProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Selectable;

package/dist/text/Selectable.js

@@ -1,19 +1,22 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-/* empty css                     */
-import { styled } from "@linaria/react";
+import Span from "./Span.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/text/Selectable.tsx
-var StyledSelectable = withTheme(/*#__PURE__*/ styled("span")({
-	name: "StyledSelectable",
-	class: "sfziwh",
-	propsAsIs: false
-}));
 /**
-* Makes its children selectable. DLS text is `user-select: none` by default so
-* UI chrome doesn't highlight — wrap the parts a user should be able to copy.
+* Copyable part of a string inside a `Text`. DLS UI copy is not user-selectable by default so
+* chrome does not highlight on drag; wrap the values a user should be able to copy (a domain, an
+* id, an email). A thin preset over `Span`: `<Span isSelectable>`. It takes every other `Span` prop
+* and inherits size, family, line height and color from the enclosing `Text`. No own styles, no
+* own enums.
 */
-var Selectable = ({ children }) => {
-	return /* @__PURE__ */ jsx(StyledSelectable, { children });
-};
+/** User-selectable inline text inside a `Text`; a `Span` preset. */
+var Selectable = forwardRef(function Selectable(props, ref) {
+	return /* @__PURE__ */ jsx(Span, {
+		isSelectable: true,
+		...props,
+		ref
+	});
+});
+Selectable.displayName = "Selectable";
 //#endregion
 export { Selectable as default };

package/dist/text/Span.d.ts

@@ -0,0 +1,82 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { FontFamily } from "../theme/enums.js";
+import type { Hex } from "../theme/tokens/types.js";
+import { TextVariant, TextWeight } from "./Text.js";
+/** Color role of the span (color set, Constitution V-A). Same members as `TextVariant`. */
+export declare enum SpanVariant {
+    /** Primary copy, `text.primary`. */
+    PRIMARY = "PRIMARY",
+    /** Supporting copy, `text.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** Hints and metadata, `text.tertiary`. */
+    TERTIARY = "TERTIARY",
+    /** Disabled controls, `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color. The default: a Span is colorless unless asked. */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
+    SUCCESS = "SUCCESS",
+    /** Status: warning, `text.warning`. */
+    WARNING = "WARNING",
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
+}
+/** Identity map, so composites that hold a `SpanVariant` can hand it to a `Text` explicitly. */
+export declare const SPAN_VARIANT_TO_TEXT_VARIANT_MAP: Record<SpanVariant, TextVariant>;
+export interface SpanProps extends AriaAttributes {
+    /** The inline copy. */
+    children?: ReactNode;
+    /**
+     * Color role. `INHERIT` keeps the enclosing `Text`'s color.
+     * @default SpanVariant.INHERIT
+     */
+    variant?: SpanVariant;
+    /**
+     * Font weight.
+     * @default inherit
+     */
+    weight?: TextWeight;
+    /**
+     * Type family, at the enclosing `Text`'s step (mono ~0.92×, same line height).
+     * @default inherit
+     */
+    family?: FontFamily;
+    /**
+     * Italic.
+     * @default false
+     */
+    isItalic?: boolean;
+    /**
+     * Underline.
+     * @default false
+     */
+    isUnderlined?: boolean;
+    /**
+     * Strike through.
+     * @default false
+     */
+    isStrikethrough?: boolean;
+    /**
+     * Let the user select this part of the text, inside non-selectable UI copy.
+     * @default false
+     */
+    isSelectable?: boolean;
+    /**
+     * Inline code: mono, hairline border, `background.tertiary`, small radius, `2px 4px` padding.
+     * @default false
+     */
+    isCode?: boolean;
+    /** Raw color override that bypasses `variant`. Discouraged: prefer a `variant`. */
+    hex?: Hex;
+    /** DOM id on the span. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the span. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the span. */
+    className?: string;
+    /** Inline style on the span; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Inline formatting inside a `Text`: inherits everything, sets only what it is given. */
+declare const Span: import("react").ForwardRefExoticComponent<SpanProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Span;

package/dist/text/Span.js

@@ -0,0 +1,115 @@
+import { FontFamily } from "../theme/enums.js";
+import { TextVariant, TextWeight } from "./Text.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/text/Span.tsx
+/**
+* The inline primitive: formatting for part of a string inside a `Text`. It inherits size, family,
+* line height and color from the enclosing `Text` and sets only what it is given, so
+* `<Span weight={TextWeight.MEDIUM}>` changes the weight and nothing else. `Bold`, `Code` and
+* `Selectable` are presets over it.
+*
+* Family without a size: the parent `Text` writes every family's metrics for its step into
+* `--gx-text-{size,spacing,weight}-<family>` custom properties, and they inherit. A Span `family`
+* block switches `font-family` and reads its own family's set, so a mono Span sits at the mono
+* size of the surrounding step (~0.92×) inside the parent's line box (its own `line-height: 1` keeps
+* the inline box within the parent's strut). Outside a `Text` the variables are unset and the
+* properties fall back to inheritance.
+*
+* `hex` is set as the `--gx-span-hex` custom property in `style`, read by a block switched on only
+* when the prop is set (the Text / Box pattern), so a nested Span never inherits it.
+*/
+/** Color role of the span (color set, Constitution V-A). Same members as `TextVariant`. */
+var SpanVariant = /* @__PURE__ */ function(SpanVariant) {
+	/** Primary copy, `text.primary`. */
+	SpanVariant["PRIMARY"] = "PRIMARY";
+	/** Supporting copy, `text.secondary`. */
+	SpanVariant["SECONDARY"] = "SECONDARY";
+	/** Hints and metadata, `text.tertiary`. */
+	SpanVariant["TERTIARY"] = "TERTIARY";
+	/** Disabled controls, `text.disabled`. */
+	SpanVariant["DISABLED"] = "DISABLED";
+	/** The parent's color. The default: a Span is colorless unless asked. */
+	SpanVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
+	SpanVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning, `text.warning`. */
+	SpanVariant["WARNING"] = "WARNING";
+	/** Status: error, `text.error`. */
+	SpanVariant["ERROR"] = "ERROR";
+	return SpanVariant;
+}({});
+/** Identity map, so composites that hold a `SpanVariant` can hand it to a `Text` explicitly. */
+var SPAN_VARIANT_TO_TEXT_VARIANT_MAP = {
+	["PRIMARY"]: TextVariant.PRIMARY,
+	["SECONDARY"]: TextVariant.SECONDARY,
+	["TERTIARY"]: TextVariant.TERTIARY,
+	["DISABLED"]: TextVariant.DISABLED,
+	["INHERIT"]: TextVariant.INHERIT,
+	["SUCCESS"]: TextVariant.SUCCESS,
+	["WARNING"]: TextVariant.WARNING,
+	["ERROR"]: TextVariant.ERROR
+};
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Span-rp97lli",
+	propsAsIs: false
+});
+var SPAN_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Span-PRIMARY-ps14jmn",
+	["SECONDARY"]: "gx-Span-SECONDARY-s1d090fq",
+	["TERTIARY"]: "gx-Span-TERTIARY-t1oflpcs",
+	["DISABLED"]: "gx-Span-DISABLED-d1yqjdqx",
+	["INHERIT"]: "gx-Span-INHERIT-i1ljah1l",
+	["SUCCESS"]: "gx-Span-SUCCESS-s1kzpu3q",
+	["WARNING"]: "gx-Span-WARNING-w1hao9l7",
+	["ERROR"]: "gx-Span-ERROR-efkxsej"
+};
+var SPAN_WEIGHT_TO_CSS_MAP = {
+	[TextWeight.REGULAR]: "gx-Span-TextWeight_REGULAR-t19uha7a",
+	[TextWeight.MEDIUM]: "gx-Span-TextWeight_MEDIUM-tje29vu"
+};
+/**
+* The family stack, and the family's own size, letter spacing and weight at the enclosing `Text`'s
+* step. A different font at a different size sits offset from the parent's strut, so an inherited
+* line height would grow the line box by a fraction of a pixel (16 → 16.5). `line-height: 1` keeps
+* the Span's inline box inside the parent's strut: the line box stays the parent's line height
+* (the UI step or prose's 1.5) on integer pixels, and the mono baseline still matches the sans one.
+*/
+var SPAN_FAMILY_TO_CSS_MAP = {
+	[FontFamily.SANS]: "gx-Span-FontFamily_SANS-f187d8ku",
+	[FontFamily.MONO]: "gx-Span-FontFamily_MONO-f1yg5gcw",
+	[FontFamily.SERIF]: "gx-Span-FontFamily_SERIF-fcyj3bj"
+};
+var ITALIC_CSS = "gx-Span-ITALIC_CSS-iy5z42n";
+var UNDERLINED_CSS = "gx-Span-UNDERLINED_CSS-ucet0jj";
+var STRIKETHROUGH_CSS = "gx-Span-STRIKETHROUGH_CSS-s1qzbtve";
+var UNDERLINED_STRIKETHROUGH_CSS = "gx-Span-UNDERLINED_STRIKETHROUGH_CSS-u6ud0qv";
+var SELECTABLE_CSS = "gx-Span-SELECTABLE_CSS-s1sv685f";
+/** The 1.x `Code` look. Mono comes from the family block (`isCode` defaults `family` to mono). */
+var CODE_CSS = "gx-Span-CODE_CSS-c1acyl4p";
+/** Declared after the variant map so `hex` wins over it. */
+var HEX_CSS = "gx-Span-HEX_CSS-h2m0mhq";
+/** Inline formatting inside a `Text`: inherits everything, sets only what it is given. */
+var Span = forwardRef(function Span({ children, variant = "INHERIT", weight, family: familyProp, isItalic = false, isUnderlined = false, isStrikethrough = false, isSelectable = false, isCode = false, hex, id, className, style, ...rest }, ref) {
+	const family = familyProp ?? (isCode ? FontFamily.MONO : void 0);
+	const variables = {};
+	if (hex !== void 0) variables["--gx-span-hex"] = hex;
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className: cx(SPAN_VARIANT_TO_CSS_MAP[variant], weight !== void 0 && SPAN_WEIGHT_TO_CSS_MAP[weight], family !== void 0 && SPAN_FAMILY_TO_CSS_MAP[family], isItalic && ITALIC_CSS, isUnderlined && isStrikethrough ? UNDERLINED_STRIKETHROUGH_CSS : isUnderlined && UNDERLINED_CSS || isStrikethrough && STRIKETHROUGH_CSS, isSelectable && SELECTABLE_CSS, isCode && CODE_CSS, hex !== void 0 && HEX_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children
+	});
+});
+Span.displayName = "Span";
+//#endregion
+export { SPAN_VARIANT_TO_TEXT_VARIANT_MAP, SpanVariant, Span as default };

package/dist/text/Text.d.ts

@@ -1,66 +1,153 @@
-import type { CSSProperties, PropsWithChildren } from "react";
-/** Text color role. Resolves to a `theme.color.text.*` token in both themes. */
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { FontFamily } from "../theme/enums.js";
+import type { Hex } from "../theme/tokens/types.js";
+/** Color role of the text (color set, Constitution V-A). */
 export declare enum TextVariant {
+    /** Primary copy, `text.primary`. */
     PRIMARY = "PRIMARY",
-    PRIMARY_ALT = "PRIMARY_ALT",
+    /** Supporting copy, `text.secondary`. */
     SECONDARY = "SECONDARY",
-    SECONDARY_ALT = "SECONDARY_ALT",
+    /** Hints and metadata, `text.tertiary`. */
     TERTIARY = "TERTIARY",
-    TERTIARY_ALT = "TERTIARY_ALT",
+    /** Disabled controls, `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's color (used inside Button and other colored controls). */
+    INHERIT = "INHERIT",
+    /** Status: success, `text.success`. */
     SUCCESS = "SUCCESS",
+    /** Status: warning, `text.warning`. */
     WARNING = "WARNING",
-    ERROR = "ERROR",
-    PINK = "PINK",
-    ORANGE = "ORANGE",
-    YELLOW = "YELLOW",
-    LIME = "LIME",
-    BLUE = "BLUE",
-    TEAL = "TEAL",
-    PURPLE = "PURPLE",
-    DISABLED = "DISABLED"
+    /** Status: error, `text.error`. */
+    ERROR = "ERROR"
 }
-/** Type scale step. Sets font-size, line-height and letter-spacing together. */
+/** Type-scale step. Sets font size, line height and letter spacing together (Constitution III-A). */
 export declare enum TextSize {
+    /** 10px on a 12px line. */
     CAPTION = "CAPTION",
+    /** 12px on a 16px line. */
     BODY_SM = "BODY_SM",
+    /** 13px on a 16px line. The default. */
     BODY_MD = "BODY_MD",
+    /** 14px on a 20px line. */
     BODY_LG = "BODY_LG",
+    /** 16px on a 20px line. */
     HEADING_SM = "HEADING_SM",
+    /** 20px on a 24px line. */
     HEADING_MD = "HEADING_MD",
-    HEADING_LG = "HEADING_LG"
+    /** 24px on a 28px line. */
+    HEADING_LG = "HEADING_LG",
+    /** 32px on a 40px line. */
+    DISPLAY_SM = "DISPLAY_SM",
+    /** 40px on a 48px line. */
+    DISPLAY_LG = "DISPLAY_LG"
 }
-/** Font weight. Two steps by design — hierarchy comes from size, not weight. */
+/** Font weight. Two steps by design: hierarchy comes from size, not weight. */
 export declare enum TextWeight {
+    /** 400. */
     REGULAR = "REGULAR",
+    /** 500. */
     MEDIUM = "MEDIUM"
 }
-export interface TextProps {
-    /** Color role. @default TextVariant.PRIMARY */
+/** Case transform. */
+export declare enum TextTransform {
+    /** As written. */
+    NONE = "NONE",
+    /** All caps with added tracking, for small labels. */
+    UPPERCASE = "UPPERCASE"
+}
+/** The elements `Text` may render. */
+export type TextElement = "p" | "span" | "div" | "label" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend" | "li";
+export interface TextProps extends AriaAttributes {
+    /** The copy. */
+    children?: ReactNode;
+    /**
+     * Element to render. Style is unaffected; use `h1`…`h6` for heading semantics.
+     * @default "p"
+     */
+    as?: TextElement;
+    /**
+     * Color role. `INHERIT` takes the parent's color (used inside Button).
+     * @default TextVariant.PRIMARY
+     */
     variant?: TextVariant;
-    /** Type scale step. @default TextSize.BODY_MD */
+    /**
+     * Type step: sets size, line height and letter spacing together.
+     * @default TextSize.BODY_MD
+     */
     size?: TextSize;
-    /** @default TextWeight.REGULAR */
+    /**
+     * Font weight.
+     * @default TextWeight.REGULAR
+     */
     weight?: TextWeight;
-    /** @default "left" */
-    align?: CSSProperties["textAlign"];
-    /** Cursor over the text. Inherits from the parent when unset. */
-    cursor?: CSSProperties["cursor"];
-    /** Raw color that bypasses `variant`. Escape hatch — prefer `variant`. */
-    hex?: string;
-    /** Render in the mono family (Berkeley Mono) instead of sans. */
-    isMonospace?: boolean;
-    /** Let the user select the text. Off by default so UI chrome isn't selectable. */
-    isSelectable?: boolean;
+    /**
+     * Type family: sans for UI, mono for data, serif for editorial copy.
+     * @default FontFamily.SANS
+     */
+    family?: FontFamily;
+    /**
+     * Horizontal alignment.
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Case transform. `UPPERCASE` adds tracking for small labels.
+     * @default TextTransform.NONE
+     */
+    transform?: TextTransform;
+    /** Truncate to N lines with an ellipsis. `1` = single-line truncation. Needs a width-bounded parent. */
+    lineClamp?: number;
+    /**
+     * When clamped and overflowing, hover shows the full text.
+     * @default false
+     */
+    shouldTooltipOnOverflow?: boolean;
+    /**
+     * Prose line height (1.5) and natural wrapping for long-form copy.
+     * @default false
+     */
+    isProse?: boolean;
+    /**
+     * Tabular (fixed-width) numerals.
+     * @default family === FontFamily.MONO
+     */
+    isTabular?: boolean;
+    /**
+     * Italic.
+     * @default false
+     */
+    isItalic?: boolean;
+    /**
+     * Underline.
+     * @default false
+     */
     isUnderlined?: boolean;
-    /** Truncate to one line with an ellipsis. Needs a width-bounded parent. */
-    isEllipsis?: boolean;
+    /**
+     * Strike through.
+     * @default false
+     */
+    isStrikethrough?: boolean;
+    /**
+     * Let the user select the text. Off for UI chrome; on by default when `isProse`.
+     * @default isProse
+     */
+    isSelectable?: boolean;
+    /** Raw color override that bypasses `variant`. Discouraged: prefer a `variant`. */
+    hex?: Hex;
+    /**
+     * Cursor over the text.
+     * @default inherit
+     */
+    cursor?: CSSProperties["cursor"];
+    /** DOM id on the root element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root element. */
+    className?: string;
+    /** Inline style on the root element; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * The text primitive. Every string in a Galaxy UI renders through it, so color,
- * size and weight always resolve from theme tokens rather than raw CSS.
- *
- * Renders a `<p>`. For inline treatments nest `Bold`, `Code`, `Selectable` or
- * `HotKeys` inside it rather than reaching for a raw tag.
- */
-declare const Text: ({ children, size, variant, weight, align, cursor, isMonospace, isSelectable, isUnderlined, isEllipsis, hex, }: PropsWithChildren<TextProps>) => import("react").JSX.Element;
+/** The text primitive: a color role, a type step, a weight and a family, all from tokens. */
+declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export default Text;