@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/editor/CodeEditorReactWidget.d.ts

@@ -1,35 +1,38 @@
-import { ReactNode } from "react";
+/**
+ * Base class for CodeMirror widgets that render React content inline (a `Chip` for a template
+ * variable, a status mark beside a line). Part of the opt-in `@galaxy-io/dls/editor/*` subpath.
+ */
 import { WidgetType } from "@codemirror/view";
+import type { ReactNode } from "react";
 /**
- * Abstract base class for rendering React components inside CodeMirror widgets.
+ * Abstract base class for rendering React content inside a CodeMirror widget decoration.
+ * Subclasses implement `render()` and, as CodeMirror requires, `eq(other)`.
  *
- * This class enables embedding React components as inline decorations in CodeMirror editors.
- * Subclasses must implement the `render()` method to return the React content to display.
+ * The content renders in its **own React root**: React context (a `Field`, the theme context,
+ * overlay roots) does not reach it, while DLS tokens do, because its DOM sits inside the themed
+ * page. Token-only components (`Chip`, `Text`, `Icon`, `Kbd`) work; components that need a
+ * provider context should not be rendered in a widget.
  *
  * @example
- * ```tsx
- * class MyWidget extends CodeEditorReactWidget {
- *   constructor(readonly label: string) {
+ * class VariableWidget extends CodeEditorReactWidget {
+ *   constructor(readonly name: string) {
  *     super();
  *   }
- *
  *   render(): ReactNode {
- *     return <MyComponent label={this.label} />;
+ *     return <Chip label={this.name} size={ChipSize.X_SMALL} />;
  *   }
- *
- *   eq(other: CodeEditorReactWidget): boolean {
- *     return other instanceof CodeEditorReactWidget && this.label === other.label;
+ *   eq(other: VariableWidget): boolean {
+ *     return other instanceof VariableWidget && other.name === this.name;
  *   }
  * }
- * ```
  */
 export declare abstract class CodeEditorReactWidget extends WidgetType {
+    /** The React root rendering this widget, while it is mounted. */
     private root;
-    /**
-     * Returns the React content to render in the widget.
-     * Implement this method in subclasses to define the widget's appearance.
-     */
+    /** The React content the widget shows. */
     abstract render(): ReactNode;
+    /** Creates the inline container and renders `render()` into a new React root. */
     toDOM(): HTMLElement;
+    /** Unmounts the React root on the next task, so it never unmounts during a React render. */
     destroy(): void;
 }

package/dist/editor/CodeEditorReactWidget.js

@@ -1,46 +1,53 @@
-import { createRoot } from "react-dom/client";
+/* empty css                                */
+import { cx } from "@linaria/core";
 import { WidgetType } from "@codemirror/view";
+import { createRoot } from "react-dom/client";
 //#region src/editor/CodeEditorReactWidget.tsx
 /**
-* Abstract base class for rendering React components inside CodeMirror widgets.
+* Base class for CodeMirror widgets that render React content inline (a `Chip` for a template
+* variable, a status mark beside a line). Part of the opt-in `@galaxy-io/dls/editor/*` subpath.
+*/
+/** The widget's inline container: flows with the text on its baseline. */
+var WIDGET_CSS = "gx-CodeEditorReactWidget-WIDGET_CSS-w1qncrl1";
+/**
+* Abstract base class for rendering React content inside a CodeMirror widget decoration.
+* Subclasses implement `render()` and, as CodeMirror requires, `eq(other)`.
 *
-* This class enables embedding React components as inline decorations in CodeMirror editors.
-* Subclasses must implement the `render()` method to return the React content to display.
+* The content renders in its **own React root**: React context (a `Field`, the theme context,
+* overlay roots) does not reach it, while DLS tokens do, because its DOM sits inside the themed
+* page. Token-only components (`Chip`, `Text`, `Icon`, `Kbd`) work; components that need a
+* provider context should not be rendered in a widget.
 *
 * @example
-* ```tsx
-* class MyWidget extends CodeEditorReactWidget {
-*   constructor(readonly label: string) {
+* class VariableWidget extends CodeEditorReactWidget {
+*   constructor(readonly name: string) {
 *     super();
 *   }
-*
 *   render(): ReactNode {
-*     return <MyComponent label={this.label} />;
+*     return <Chip label={this.name} size={ChipSize.X_SMALL} />;
 *   }
-*
-*   eq(other: CodeEditorReactWidget): boolean {
-*     return other instanceof CodeEditorReactWidget && this.label === other.label;
+*   eq(other: VariableWidget): boolean {
+*     return other instanceof VariableWidget && other.name === this.name;
 *   }
 * }
-* ```
 */
 var CodeEditorReactWidget = class extends WidgetType {
+	/** The React root rendering this widget, while it is mounted. */
 	root = null;
+	/** Creates the inline container and renders `render()` into a new React root. */
 	toDOM() {
 		const container = document.createElement("span");
-		container.className = "cm-react-widget";
-		container.style.display = "inline-flex";
-		container.style.verticalAlign = "baseline";
+		container.className = cx("cm-react-widget", WIDGET_CSS);
 		this.root = createRoot(container);
 		this.root.render(this.render());
 		return container;
 	}
+	/** Unmounts the React root on the next task, so it never unmounts during a React render. */
 	destroy() {
-		if (this.root) {
-			const rootToUnmount = this.root;
-			setTimeout(() => rootToUnmount.unmount(), 0);
-			this.root = null;
-		}
+		const rootToUnmount = this.root;
+		if (rootToUnmount === null) return;
+		this.root = null;
+		setTimeout(() => rootToUnmount.unmount(), 0);
 	}
 };
 //#endregion

package/dist/feedback/Alert.d.ts

@@ -0,0 +1,49 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Severity (Constitution V-A color set, subset; Alert is listed in that column). */
+export declare enum AlertVariant {
+    /** Neutral note: `background.secondary` surface, `InfoIcon` in `text.secondary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** Done, healthy: success surface, `CheckCircleIcon`. */
+    SUCCESS = "SUCCESS",
+    /** Needs attention soon: warning surface, `WarningIcon`. */
+    WARNING = "WARNING",
+    /** Broken, blocked: error surface, `WarningCircleIcon`, `role="alert"`. */
+    ERROR = "ERROR"
+}
+export interface AlertProps extends AriaAttributes {
+    /**
+     * Severity: sets the surface tint, the border, the icon and the ARIA role.
+     * @default AlertVariant.PRIMARY
+     */
+    variant?: AlertVariant;
+    /** Short headline ("Schema drift detected"). Medium weight; above the body inline, before it in a banner. */
+    header?: string;
+    /** The message. Rendered in a `Text`, so inline `Span`, `Code` and `Link` inherit its size and color. */
+    children?: ReactNode;
+    /**
+     * Replaces the variant's default icon. Pass the component (`PlugsIcon`), not an element.
+     * @default the variant's icon
+     */
+    icon?: PhosphorIcon;
+    /** The way out, usually one `Button` at `ButtonSize.SMALL`. A row under the body inline; trailing in a banner. */
+    actions?: ReactNode;
+    /** Shows a dismiss button and is called when it is pressed. The host unmounts the Alert. */
+    onDismiss?: () => void;
+    /**
+     * Full-width strip across the top of a page or panel: square corners, bottom hairline only, one line.
+     * @default false
+     */
+    isBanner?: boolean;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A tinted, bordered message with a severity icon, optional header, actions and dismiss. */
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Alert;

package/dist/feedback/Alert.js

@@ -0,0 +1,172 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+/* empty css                */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+//#region src/feedback/Alert.tsx
+/**
+* A message about the thing on screen that the reader should stop and read: a schema that
+* drifted, a run that failed, a limit that is close. It stays until the condition goes away or
+* the reader dismisses it; the host mounts it while the condition holds and unmounts it on
+* `onDismiss`. Not transient (`Toast`), not the state of one row (a labeled `Beacon`), not a modal
+* confirmation (`ConfirmDialog`).
+*
+* Severity (`variant`) is carried by a quiet `background.<status>` surface, a hairline border and a filled
+* status icon whose accessible name says the severity; the header and body stay in the neutral
+* text hierarchy. `ERROR` is `role="alert"` (assertive); every other variant is `role="status"`.
+* A live region announces content that arrives after it is in the DOM, so mount the Alert when
+* the condition becomes true rather than rendering it hidden and revealing it.
+*
+* Inline it is a rounded panel; `isBanner` makes it a full-width strip across the top of a page
+* or panel (square corners, bottom hairline only, one line). No motion of its own: wrap it in
+* `Fade` (or the app's own height animation) for an animated dismiss.
+*/
+/** Severity (Constitution V-A color set, subset; Alert is listed in that column). */
+var AlertVariant = /* @__PURE__ */ function(AlertVariant) {
+	/** Neutral note: `background.secondary` surface, `InfoIcon` in `text.secondary`. The default. */
+	AlertVariant["PRIMARY"] = "PRIMARY";
+	/** Done, healthy: success surface, `CheckCircleIcon`. */
+	AlertVariant["SUCCESS"] = "SUCCESS";
+	/** Needs attention soon: warning surface, `WarningIcon`. */
+	AlertVariant["WARNING"] = "WARNING";
+	/** Broken, blocked: error surface, `WarningCircleIcon`, `role="alert"`. */
+	AlertVariant["ERROR"] = "ERROR";
+	return AlertVariant;
+}({});
+/**
+* A block-level flex row that fills its parent's width. The transparent `0.5px` hairline gives
+* every variant the same box; the variant map colors it.
+*/
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Alert-r1k8hd3a",
+	propsAsIs: false
+});
+/** One `body_md` line tall, so the 16px icon and the first text line share a center. */
+var IconSlot = /*#__PURE__*/ styled("span")({
+	name: "IconSlot",
+	class: "gx-Alert-IconSlot-i1jg85na",
+	propsAsIs: false
+});
+/**
+* One `body_md` line tall; the 20px `X_SMALL` dismiss button centers on the first line and
+* overflows the slot by 2px into the root padding (visible, not clipped).
+*/
+var DismissSlot = /*#__PURE__*/ styled("span")({
+	name: "DismissSlot",
+	class: "gx-Alert-DismissSlot-d179rxg0",
+	propsAsIs: false
+});
+/** Header, body and (inline) actions. Long words wrap, so the dismiss button is never pushed out. */
+var Content = /*#__PURE__*/ styled("div")({
+	name: "Content",
+	class: "gx-Alert-Content-c1r3eyf8",
+	propsAsIs: false
+});
+/** The actions row: 8px under the body inline (with `Content`'s 4px gap). */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-Alert-Actions-accxkmh",
+	propsAsIs: false
+});
+/** Surface tint and hairline color per severity. */
+var ALERT_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Alert-PRIMARY-p1jph1ch",
+	["SUCCESS"]: "gx-Alert-SUCCESS-smmodrk",
+	["WARNING"]: "gx-Alert-WARNING-w6btz5r",
+	["ERROR"]: "gx-Alert-ERROR-e1rogvwo"
+};
+/** Default glyph per severity. `ERROR` differs in shape from `WARNING`, so severity is never color-only. */
+var ALERT_VARIANT_TO_ICON_MAP = {
+	["PRIMARY"]: InfoIcon,
+	["SUCCESS"]: CheckCircleIcon,
+	["WARNING"]: WarningIcon,
+	["ERROR"]: WarningCircleIcon
+};
+/** Icon color role per severity. */
+var ALERT_VARIANT_TO_ICON_VARIANT_MAP = {
+	["PRIMARY"]: IconVariant.SECONDARY,
+	["SUCCESS"]: IconVariant.SUCCESS,
+	["WARNING"]: IconVariant.WARNING,
+	["ERROR"]: IconVariant.ERROR
+};
+/** Live-region role per severity: only `ERROR` is assertive. */
+var ALERT_VARIANT_TO_ROLE_MAP = {
+	["PRIMARY"]: "status",
+	["SUCCESS"]: "status",
+	["WARNING"]: "status",
+	["ERROR"]: "alert"
+};
+/** The icon's accessible name: the severity in one word. */
+var ALERT_VARIANT_TO_SEVERITY_LABEL_MAP = {
+	["PRIMARY"]: "Note",
+	["SUCCESS"]: "Success",
+	["WARNING"]: "Warning",
+	["ERROR"]: "Error"
+};
+/** Banner: square corners, bottom hairline only, centered one-line row. */
+var BANNER_CSS = "gx-Alert-BANNER_CSS-br7k6o5";
+/** Banner: the header and body read as one line, wrapping when narrow. */
+var BANNER_CONTENT_CSS = "gx-Alert-BANNER_CONTENT_CSS-b11mdnwt";
+/** Banner: the actions trail and never shrink. */
+var BANNER_ACTIONS_CSS = "gx-Alert-BANNER_ACTIONS_CSS-by507ww";
+/** A tinted, bordered message with a severity icon, optional header, actions and dismiss. */
+var Alert = forwardRef(function Alert({ variant = "PRIMARY", header, children, icon, actions, onDismiss, isBanner = false, id, className, style, ...rest }, ref) {
+	const hasHeader = header !== void 0 && header !== "";
+	const hasBody = children !== void 0 && children !== null && children !== false;
+	const actionsRow = actions !== void 0 && actions !== null && actions !== false && /* @__PURE__ */ jsx(Actions, {
+		className: cx(isBanner && BANNER_ACTIONS_CSS),
+		children: actions
+	});
+	return /* @__PURE__ */ jsxs(Root, {
+		role: ALERT_VARIANT_TO_ROLE_MAP[variant],
+		...rest,
+		ref,
+		id,
+		className: cx(ALERT_VARIANT_TO_CSS_MAP[variant], isBanner && BANNER_CSS, className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(Icon, {
+				component: icon ?? ALERT_VARIANT_TO_ICON_MAP[variant],
+				size: 16,
+				weight: IconWeight.FILL,
+				variant: ALERT_VARIANT_TO_ICON_VARIANT_MAP[variant],
+				ariaLabel: ALERT_VARIANT_TO_SEVERITY_LABEL_MAP[variant]
+			}) }),
+			/* @__PURE__ */ jsxs(Content, {
+				className: cx(isBanner && BANNER_CONTENT_CSS),
+				children: [
+					hasHeader && /* @__PURE__ */ jsx(Text, {
+						as: "p",
+						size: TextSize.BODY_MD,
+						weight: TextWeight.MEDIUM,
+						variant: TextVariant.PRIMARY,
+						children: header
+					}),
+					hasBody && /* @__PURE__ */ jsx(Text, {
+						as: "div",
+						size: TextSize.BODY_MD,
+						variant: TextVariant.SECONDARY,
+						children
+					}),
+					!isBanner && actionsRow
+				]
+			}),
+			isBanner && actionsRow,
+			onDismiss !== void 0 && /* @__PURE__ */ jsx(DismissSlot, { children: /* @__PURE__ */ jsx(Button, {
+				icon: XIcon,
+				variant: ButtonVariant.TERTIARY,
+				size: ButtonSize.X_SMALL,
+				ariaLabel: "Dismiss",
+				onClick: () => onDismiss()
+			}) })
+		]
+	});
+});
+Alert.displayName = "Alert";
+//#endregion
+export { AlertVariant, Alert as default };

package/dist/feedback/EmptyState.d.ts

@@ -0,0 +1,39 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Where the empty state sits (canonical rungs, subset). */
+export declare enum EmptyStateSize {
+    /** Inside a table cell, a chart, a menu or a small card: 24px tile, body_md header. */
+    SMALL = "SMALL",
+    /** Inside a panel, a Widget body or a table body. The default: 32px tile, body_lg header. */
+    MEDIUM = "MEDIUM",
+    /** A whole page or main region: 40px tile, heading_sm header. */
+    LARGE = "LARGE"
+}
+export interface EmptyStateProps extends AriaAttributes {
+    /** One line that says what would be here ("No runs yet", "No results for “orders”"). Medium weight. */
+    header: string;
+    /** Why it is empty or what to do next. Up to three short lines; wraps at about 48 characters. */
+    description?: string;
+    /** Phosphor icon component (`TrayIcon`, not `<TrayIcon />`) shown in a small tile above the header. */
+    icon?: PhosphorIcon;
+    /** The way out: usually one `PRIMARY` and one `SECONDARY` `Button` (or a `Link`), in that order. Use `ButtonSize.SMALL` at `SMALL`, `MEDIUM` otherwise. */
+    actions?: ReactNode;
+    /**
+     * Where it sits: a cell, chart or menu (`SMALL`), a panel or card (`MEDIUM`), or a whole page (`LARGE`). Scales the tile, the type and the padding.
+     * @default EmptyStateSize.MEDIUM
+     */
+    size?: EmptyStateSize;
+    /** Pass `"status"` when the empty state replaces results after a user action, so it is announced. */
+    role?: "status";
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A centered icon, header, description and actions for a region with nothing to show. */
+declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+export default EmptyState;

package/dist/feedback/EmptyState.js

@@ -0,0 +1,109 @@
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/feedback/EmptyState.tsx
+/**
+* What a region shows when it has nothing to show: no runs yet, no search results, no data in a
+* chart. A centered stack of an optional icon in a small tile, a one-line `header`, a
+* `description`, and `actions` that put something there. Three sizes for a cell or chart, a
+* panel, and a page. It has no border or surface of its own: it sits inside the region that is
+* empty (a `Widget`, a table body, a page).
+*
+* Not an error (`Alert`), not a loading placeholder (`Skeleton` / `Spinner`). Static content: the
+* host passes `role="status"` when the empty state appears because of something the user did.
+*/
+/** Where the empty state sits (canonical rungs, subset). */
+var EmptyStateSize = /* @__PURE__ */ function(EmptyStateSize) {
+	/** Inside a table cell, a chart, a menu or a small card: 24px tile, body_md header. */
+	EmptyStateSize["SMALL"] = "SMALL";
+	/** Inside a panel, a Widget body or a table body. The default: 32px tile, body_lg header. */
+	EmptyStateSize["MEDIUM"] = "MEDIUM";
+	/** A whole page or main region: 40px tile, heading_sm header. */
+	EmptyStateSize["LARGE"] = "LARGE";
+	return EmptyStateSize;
+}({});
+/** Fills its parent's width and centers its stack. No background, border or radius. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-EmptyState-r1siz0my",
+	propsAsIs: false
+});
+/** A control-sized square on the quietest raised step. */
+var Tile = /*#__PURE__*/ styled("div")({
+	name: "Tile",
+	class: "gx-EmptyState-Tile-t2lzt2i",
+	propsAsIs: false
+});
+var Copy = /*#__PURE__*/ styled("div")({
+	name: "Copy",
+	class: "gx-EmptyState-Copy-c1cew7lm",
+	propsAsIs: false
+});
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-EmptyState-Actions-az10ltv",
+	propsAsIs: false
+});
+/** A measure, not a spacing value: two-line descriptions stay two lines at body_md. */
+var DESCRIPTION_CSS = "gx-EmptyState-DESCRIPTION_CSS-d1ao7sbo";
+/** Padding, stack gap and tile size per placement. */
+var EMPTY_STATE_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-EmptyState-SMALL-sa0wxkf",
+	["MEDIUM"]: "gx-EmptyState-MEDIUM-mgybc7l",
+	["LARGE"]: "gx-EmptyState-LARGE-l4781xg"
+};
+/** The tile's icon: the rung pair of its control square (24/14, 32/16, 40/18). */
+var EMPTY_STATE_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 14,
+	["MEDIUM"]: 16,
+	["LARGE"]: 18
+};
+var EMPTY_STATE_SIZE_TO_HEADER_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_MD,
+	["MEDIUM"]: TextSize.BODY_LG,
+	["LARGE"]: TextSize.HEADING_SM
+};
+var EMPTY_STATE_SIZE_TO_DESCRIPTION_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_MD
+};
+/** A centered icon, header, description and actions for a region with nothing to show. */
+var EmptyState = forwardRef(function EmptyState({ header, description, icon, actions, size = "MEDIUM", className, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		className: cx(EMPTY_STATE_SIZE_TO_CSS_MAP[size], className),
+		children: [
+			icon && /* @__PURE__ */ jsx(Tile, { children: /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				size: EMPTY_STATE_SIZE_TO_ICON_PX_MAP[size],
+				variant: IconVariant.SECONDARY
+			}) }),
+			/* @__PURE__ */ jsxs(Copy, { children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				size: EMPTY_STATE_SIZE_TO_HEADER_SIZE_MAP[size],
+				weight: TextWeight.MEDIUM,
+				variant: TextVariant.PRIMARY,
+				align: "center",
+				children: header
+			}), description && /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				size: EMPTY_STATE_SIZE_TO_DESCRIPTION_SIZE_MAP[size],
+				variant: TextVariant.SECONDARY,
+				align: "center",
+				isProse: true,
+				className: DESCRIPTION_CSS,
+				children: description
+			})] }),
+			actions && /* @__PURE__ */ jsx(Actions, { children: actions })
+		]
+	});
+});
+EmptyState.displayName = "EmptyState";
+//#endregion
+export { EmptyStateSize, EmptyState as default };

package/dist/feedback/ProgressBar.d.ts

@@ -0,0 +1,125 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import type { PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the member names the rung of the text the bar sits with. */
+export declare enum ProgressBarSize {
+    /** 2px track, caption label. */
+    X_SMALL = "X_SMALL",
+    /** 4px track, body_sm label. */
+    SMALL = "SMALL",
+    /** 4px track, body_md label. The default (1.x `height` 4). */
+    MEDIUM = "MEDIUM",
+    /** 6px track, body_lg label. */
+    LARGE = "LARGE",
+    /** 8px track, body_lg label. */
+    X_LARGE = "X_LARGE"
+}
+/** Fill color (Constitution V-A color set, subset; the same members as `ProgressCircleVariant`). */
+export declare enum ProgressBarVariant {
+    /** `text.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `text.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `text.tertiary`. */
+    TERTIARY = "TERTIARY",
+    /** `text.success`: healthy, on track, complete. */
+    SUCCESS = "SUCCESS",
+    /** `text.warning`: at risk, nearing a limit. */
+    WARNING = "WARNING",
+    /** `text.error`: failing, over a limit. */
+    ERROR = "ERROR"
+}
+/** The axes (everything except the value pair, the name pair and the passthrough). */
+interface ProgressBarBaseProps extends AriaAttributes {
+    /**
+     * Track thickness (2 / 4 / 4 / 6 / 8px) and the type step of `label` and the value (`caption` / `body_sm` / `body_md` / `body_lg` / `body_lg`).
+     * @default ProgressBarSize.MEDIUM
+     */
+    size?: ProgressBarSize;
+}
+/** A bar colored by meaning (`variant`), or the default `PRIMARY`. */
+interface ProgressBarVariantProps {
+    /**
+     * Color of the fill: a neutral step, or a status when the progress means something (healthy, at risk, failing). Not with `color`.
+     * @default ProgressBarVariant.PRIMARY
+     */
+    variant?: ProgressBarVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A bar colored by category (`color`). */
+interface ProgressBarColorProps {
+    /**
+     * Color of the fill: a neutral step, or a status when the progress means something (healthy, at risk, failing). Not with `color`.
+     * @default ProgressBarVariant.PRIMARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the fill takes `text.<family>`, the way
+     * a status variant renders. For a category's color (a source type, a team); meanings take
+     * `variant`. Not with `variant`.
+     */
+    color: PaletteColor;
+}
+/** The passthrough, kept last so `className` and `style` close the props table. */
+interface ProgressBarPassthroughProps {
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. Merged after `--gx-progress-bar-value`. */
+    style?: CSSProperties;
+}
+/** A determinate bar: `value` is required. */
+interface ProgressBarDeterminateProps {
+    /** Progress from 0 to 100 (required unless `isIndeterminate`). Clamped to that range; `NaN` counts as 0. */
+    value: number;
+    /**
+     * The total is not known yet: a segment sweeps along the track and no value is reported. `value` is not accepted with it.
+     * @default false
+     */
+    isIndeterminate?: false;
+    /**
+     * Shows the formatted percentage ("40%") at the end of the label line. Determinate bars only.
+     * @default false
+     */
+    shouldShowValue?: boolean;
+}
+/** An indeterminate bar: no `value` and no shown value. */
+interface ProgressBarIndeterminateProps {
+    /** Progress from 0 to 100 (required unless `isIndeterminate`). Clamped to that range; `NaN` counts as 0. */
+    value?: undefined;
+    /**
+     * The total is not known yet: a segment sweeps along the track and no value is reported. `value` is not accepted with it.
+     * @default false
+     */
+    isIndeterminate: true;
+    /**
+     * Shows the formatted percentage ("40%") at the end of the label line. Determinate bars only.
+     * @default false
+     */
+    shouldShowValue?: false;
+}
+/** A visible label, which is also the accessible name. */
+interface ProgressBarLabelledProps {
+    /** Visible text above the bar, at the start ("Syncing contacts"). It is also the progress bar's accessible name. */
+    label: string;
+    /** Accessible name when there is no visible `label` ("Sync progress"). The type requires `label` or `ariaLabel`. */
+    ariaLabel?: string;
+}
+/** No visible label: the accessible name is required. */
+interface ProgressBarUnlabelledProps {
+    /** Visible text above the bar, at the start ("Syncing contacts"). It is also the progress bar's accessible name. */
+    label?: undefined;
+    /** Accessible name when there is no visible `label` ("Sync progress"). The type requires `label` or `ariaLabel`. */
+    ariaLabel: string;
+}
+/**
+ * ProgressBar props. `value` is required unless `isIndeterminate`; `label` or `ariaLabel` is
+ * required; `variant` and `color` are exclusive.
+ */
+export type ProgressBarProps = ProgressBarBaseProps & (ProgressBarVariantProps | ProgressBarColorProps) & (ProgressBarDeterminateProps | ProgressBarIndeterminateProps) & (ProgressBarLabelledProps | ProgressBarUnlabelledProps) & ProgressBarPassthroughProps;
+/** A horizontal progress bar with an optional label line. */
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ProgressBar;