@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/charts/Sparkline.js

@@ -0,0 +1,244 @@
+import { ChartCurve } from "./types.js";
+import { buildLinePath } from "./lineChartGeometry.js";
+import { layoutBars } from "./barChartGeometry.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/charts/Sparkline.tsx
+/**
+* Sparkline is a word-sized trend: a tiny line or row of bars with no axes, legend, tooltip or
+* interaction, set beside the number it summarizes in a table cell, a list row, a `StatChart` or a
+* sentence. It shows shape (rising, falling, spiky), not values; a chart to read values from is
+* `LineChart` / `BarChart`.
+*
+* Color is CSS: `SPARKLINE_VARIANT_TO_CSS_MAP` (or `SPARKLINE_COLOR_TO_CSS_MAP` for a categorical
+* `color`) sets `color` from `color.text.*` and the marks read
+* `currentColor`, so `INHERIT` and `hex` share one path and a theme switch needs no re-render.
+* Height is a control rung so it lines up with its row; width is four times
+* the height unless `fillWidth`.
+*
+* Drawn in a fixed `0 0 100 100` viewBox with `preserveAspectRatio="none"` and a non-scaling
+* stroke: no measurement, identical under SSR. Reuses LineChart's curve and the 1.x bar spacing.
+* Needs the optional peer `d3-shape`.
+*/
+/** Rung of the row the sparkline sits in. Height = control height; default width = 4 × height. */
+var SparklineSize = /* @__PURE__ */ function(SparklineSize) {
+	/** 20px tall, 80px wide. */
+	SparklineSize["X_SMALL"] = "X_SMALL";
+	/** 24px tall, 96px wide. */
+	SparklineSize["SMALL"] = "SMALL";
+	/** 32px tall, 128px wide. The default. */
+	SparklineSize["MEDIUM"] = "MEDIUM";
+	/** 36px tall, 144px wide. */
+	SparklineSize["LARGE"] = "LARGE";
+	/** 40px tall, 160px wide. */
+	SparklineSize["X_LARGE"] = "X_LARGE";
+	return SparklineSize;
+}({});
+/** Color role (Constitution V-A color set; subset). */
+var SparklineVariant = /* @__PURE__ */ function(SparklineVariant) {
+	/** `text.primary`. */
+	SparklineVariant["PRIMARY"] = "PRIMARY";
+	/** `text.secondary`. The default. */
+	SparklineVariant["SECONDARY"] = "SECONDARY";
+	/** `text.tertiary`. */
+	SparklineVariant["TERTIARY"] = "TERTIARY";
+	/** The parent's color (`currentColor`). */
+	SparklineVariant["INHERIT"] = "INHERIT";
+	/** Status: success, `text.success`. */
+	SparklineVariant["SUCCESS"] = "SUCCESS";
+	/** Status: warning, `text.warning`. */
+	SparklineVariant["WARNING"] = "WARNING";
+	/** Status: error, `text.error`. */
+	SparklineVariant["ERROR"] = "ERROR";
+	return SparklineVariant;
+}({});
+/** What the data is drawn as. A named second axis (Article V), not a variant. */
+var SparklineMark = /* @__PURE__ */ function(SparklineMark) {
+	/** A 1.5px line. The default. */
+	SparklineMark["LINE"] = "LINE";
+	/** One bar per value, from a zero baseline. */
+	SparklineMark["BAR"] = "BAR";
+	return SparklineMark;
+}({});
+/**
+* Px kept clear on every side of the drawing, so the line's round caps and its stroke at the top
+* and bottom stay inside the root (half the stroke, rounded up to a whole pixel). Padding in real
+* pixels, not viewBox units, because the viewBox stretches with the box.
+*/
+/** Gap between bars: 1 viewBox unit per 100 (≈ 1px at the default width). */
+var SPARKLINE_BAR_GAP = 1;
+/**
+* Phrasing content, so a sparkline is valid inside `Text`, a table cell or a `<label>`. The marks
+* paint with `currentColor`; `forced-color-adjust: none` keeps the data marks in their color in
+* high contrast (the Circle, Square and Beacon precedent).
+*/
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Sparkline-r1asbe5y",
+	propsAsIs: false
+});
+var Svg = /*#__PURE__*/ styled("svg")({
+	name: "Svg",
+	class: "gx-Sparkline-Svg-s9k8755",
+	propsAsIs: false
+});
+/** The line: the chart line weight however far the box is stretched. */
+var SPARKLINE_LINE_CSS = "gx-Sparkline-SPARKLINE_LINE_CSS-s119f4ag";
+/** Square bars (Decision 4). */
+var SPARKLINE_BAR_CSS = "gx-Sparkline-SPARKLINE_BAR_CSS-srn2uxg";
+/** The zero baseline when a bar domain crosses zero. */
+var SPARKLINE_BASELINE_CSS = "gx-Sparkline-SPARKLINE_BASELINE_CSS-s1brjpq6";
+var FILL_WIDTH_CSS = "gx-Sparkline-FILL_WIDTH_CSS-fvjsow7";
+/** Height per rung (the control rungs). */
+var SPARKLINE_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Sparkline-X_SMALL-xcnrk12",
+	["SMALL"]: "gx-Sparkline-SMALL-s1060hmm",
+	["MEDIUM"]: "gx-Sparkline-MEDIUM-m1rkkg41",
+	["LARGE"]: "gx-Sparkline-LARGE-l1mfr8ta",
+	["X_LARGE"]: "gx-Sparkline-X_LARGE-x1tuu0sq"
+};
+/** Sets `color`; the marks read it. */
+var SPARKLINE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Sparkline-PRIMARY-p15j1694",
+	["SECONDARY"]: "gx-Sparkline-SECONDARY-sqf29gm",
+	["TERTIARY"]: "gx-Sparkline-TERTIARY-to15cvu",
+	["INHERIT"]: "gx-Sparkline-INHERIT-iwafbc4",
+	["SUCCESS"]: "gx-Sparkline-SUCCESS-s18oxn06",
+	["WARNING"]: "gx-Sparkline-WARNING-w12wppjx",
+	["ERROR"]: "gx-Sparkline-ERROR-e1vjlz3y"
+};
+/** Categorical `color`: `text.<family>`, the way a status variant renders. */
+var SPARKLINE_COLOR_TO_CSS_MAP = {
+	red: "gx-Sparkline-red-r1g1xl1p",
+	orange: "gx-Sparkline-orange-o1jau8rz",
+	amber: "gx-Sparkline-amber-a1oe0nww",
+	yellow: "gx-Sparkline-yellow-y927tvl",
+	lime: "gx-Sparkline-lime-l17vquw4",
+	green: "gx-Sparkline-green-g1dzgnla",
+	emerald: "gx-Sparkline-emerald-e11hl6v6",
+	teal: "gx-Sparkline-teal-t1dtbnvn",
+	cyan: "gx-Sparkline-cyan-c1hj4qmv",
+	sky: "gx-Sparkline-sky-s157jvnt",
+	blue: "gx-Sparkline-blue-b14oiqli",
+	indigo: "gx-Sparkline-indigo-izvb5wf",
+	violet: "gx-Sparkline-violet-v1rblyi3",
+	purple: "gx-Sparkline-purple-p1lhbciw",
+	fuchsia: "gx-Sparkline-fuchsia-f1l7cy0y",
+	pink: "gx-Sparkline-pink-ppfz7ft",
+	rose: "gx-Sparkline-rose-r14stz7g"
+};
+/** Declared after the variant and color maps so `hex` wins over them. */
+var HEX_CSS = "gx-Sparkline-HEX_CSS-h41c05i";
+/** A finite reading, or `null` for a gap. */
+var toReading = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+/** The vertical range: the override where given, else the mark's default from the readings. */
+function resolveDomain(readings, mark, valueDomain) {
+	const smallest = Math.min(...readings);
+	const largest = Math.max(...readings);
+	const autoMin = mark === "BAR" ? Math.min(0, smallest) : smallest;
+	const autoMax = mark === "BAR" ? Math.max(0, largest) : largest;
+	return [toReading(valueDomain?.min) ?? autoMin, toReading(valueDomain?.max) ?? autoMax];
+}
+/** Value → viewBox y (clamped to the box; the root's padding keeps the stroke inside). A flat domain sits at mid-height. */
+function toY(value, [min, max]) {
+	if (max <= min) return 50;
+	const y = (1 - (value - min) / (max - min)) * 100;
+	return Math.min(100, Math.max(0, y));
+}
+/** The line, split at gaps; a lone reading between gaps is a zero-length segment (a round dot). */
+function renderLine(values, domain) {
+	const count = values.length;
+	const runs = [];
+	let run = [];
+	values.forEach((value, index) => {
+		if (value === null) {
+			if (run.length > 0) runs.push(run);
+			run = [];
+			return;
+		}
+		run.push({
+			x: count === 1 ? 50 : index / (count - 1) * 100,
+			y: toY(value, domain)
+		});
+	});
+	if (run.length > 0) runs.push(run);
+	const path = runs.map((points) => {
+		const [only] = points;
+		if (points.length === 1 && only !== void 0) return `M${only.x},${only.y}L${only.x},${only.y}`;
+		return buildLinePath(points, ChartCurve.SMOOTH);
+	}).join("");
+	return path === "" ? null : /* @__PURE__ */ jsx("path", {
+		className: SPARKLINE_LINE_CSS,
+		d: path
+	});
+}
+/** One square bar per reading from the zero baseline, plus the baseline when the domain crosses 0. */
+function renderBars(values, domain) {
+	const slots = layoutBars(values.length, 100, SPARKLINE_BAR_GAP);
+	const zeroY = toY(Math.min(Math.max(0, domain[0]), domain[1]), domain);
+	const crossesZero = domain[0] < 0 && domain[1] > 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [values.map((value, index) => {
+		const slot = slots[index];
+		if (value === null || slot === void 0) return null;
+		const y = toY(value, domain);
+		return /* @__PURE__ */ jsx("rect", {
+			className: SPARKLINE_BAR_CSS,
+			x: slot.x,
+			width: slot.width,
+			y: Math.min(y, zeroY),
+			height: Math.abs(zeroY - y)
+		}, index);
+	}), crossesZero && /* @__PURE__ */ jsx("line", {
+		className: SPARKLINE_BASELINE_CSS,
+		x1: 0,
+		x2: 100,
+		y1: zeroY,
+		y2: zeroY
+	})] });
+}
+/** A word-sized line or bar trend beside the number it summarizes. */
+var Sparkline = forwardRef(function Sparkline({ data, mark = "LINE", variant = "SECONDARY", color, hex, size = "MEDIUM", fillWidth = false, valueDomain, ariaLabel, id, className, style, ...rest }, ref) {
+	const variables = {};
+	if (hex !== void 0) variables["--gx-sparkline-hex"] = hex;
+	const values = data.map(toReading);
+	const readings = values.filter((value) => value !== null);
+	let marks = null;
+	if (readings.length > 0) {
+		const domain = resolveDomain(readings, mark, valueDomain);
+		marks = mark === "BAR" ? renderBars(values, domain) : renderLine(values, domain);
+	}
+	const passedLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
+	const name = ariaLabel || passedLabel;
+	const accessibility = name ? {
+		role: "img",
+		"aria-label": name,
+		"aria-hidden": void 0
+	} : {
+		"aria-hidden": true,
+		"aria-label": void 0
+	};
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		...accessibility,
+		ref,
+		id,
+		className: cx(SPARKLINE_SIZE_TO_CSS_MAP[size], color !== void 0 ? SPARKLINE_COLOR_TO_CSS_MAP[color] : SPARKLINE_VARIANT_TO_CSS_MAP[variant], hex !== void 0 && HEX_CSS, fillWidth && FILL_WIDTH_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(Svg, {
+			viewBox: "0 0 100 100",
+			preserveAspectRatio: "none",
+			"aria-hidden": true,
+			focusable: "false",
+			children: marks
+		})
+	});
+});
+Sparkline.displayName = "Sparkline";
+//#endregion
+export { SparklineMark, SparklineSize, SparklineVariant, Sparkline as default };

package/dist/charts/StatChart.d.ts

@@ -1,24 +1,48 @@
-import type { ReactNode } from "react";
-/** Surface treatment of the stat tile. */
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Tile fill (Constitution V surface set: containers). */
 export declare enum StatChartVariant {
+    /** The canvas fill, `background.base`. */
     BASE = "BASE",
+    /** A panel fill, `background.primary`. The default (1.x). */
     PRIMARY = "PRIMARY",
+    /** A raised fill, `background.secondary`. */
     SECONDARY = "SECONDARY",
+    /** The most elevated fill, `background.tertiary`. */
     TERTIARY = "TERTIARY"
 }
-export interface StatChartProps {
-    /** What the number means. Rendered small and secondary above the value. */
+export interface StatChartProps extends AriaAttributes {
+    /** What the number means. Small, tertiary, one line above the value. */
     label: string;
-    /** The headline figure. A node, so it can carry a unit or a trend indicator. */
+    /** The headline figure. A string or number renders as `body_lg` medium with tabular numerals; pass a node for a value with a unit or a custom treatment. */
     value: ReactNode;
-    /** @default StatChartVariant.PRIMARY */
+    /** One short line under the value: the comparison or context ("+4% vs last week"). */
+    description?: string;
+    /** At the end of the value row, vertically centered: a `Sparkline`, a `Chip`, a delta. */
+    trailing?: ReactNode;
+    /**
+     * Surface fill of the tile.
+     * @default StatChartVariant.PRIMARY
+     */
     variant?: StatChartVariant;
-    /** Drop the hairline border — for tiles inside an already-bordered container. */
-    noBorder?: boolean;
+    /**
+     * Adds the `0.5px` hairline. Use it for tiles on a page; leave it off inside an already-bordered container.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Replaces `value` with a `Skeleton` line and hides `description` and `trailing`; the label stays. Sets `aria-busy`.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** DOM id on the root. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * A single-number stat tile — the KPI card. Fixed 140px minimum width so a row
- * of them lines up without you setting widths.
- */
-declare const StatChart: ({ label, value, variant, noBorder, }: StatChartProps) => import("react").JSX.Element;
+/** A KPI tile: label, headline value, optional description and trailing trend. */
+declare const StatChart: import("react").ForwardRefExoticComponent<StatChartProps & import("react").RefAttributes<HTMLElement>>;
 export default StatChart;

package/dist/charts/StatChart.js

@@ -1,58 +1,105 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
+import Skeleton, { SkeletonSize, SkeletonVariant } from "../feedback/Skeleton.js";
+import { Radius } from "../theme/enums.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Flex, { AlignItems, FlexDirection } from "../layout/Flex.js";
+import Box, { BoxVariant } from "../layout/Box.js";
+import FlexItem from "../layout/FlexItem.js";
 /* empty css                    */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/StatChart.tsx
-/** Surface treatment of the stat tile. */
+/**
+* StatChart is the KPI tile: one number with its label, on a quiet surface, sized so a row of them
+* lines up. A `label` ("Active users"), a `value` ("1,284"), an optional `description` under the
+* value ("+4% vs last week") and an optional `trailing` slot at the end of the value row for a
+* `Sparkline` or a `Chip`. The tile is a `Box`: `variant` picks its surface step and `hasBorder`
+* adds the hairline. `isLoading` swaps the value for a `Skeleton` line of the same height.
+*
+* It draws no chart itself and imports no chart code (no d3). It is not a card with a header and
+* actions (`Widget`) and not a list of label/value pairs (`DescriptionList`).
+*/
+/** Tile fill (Constitution V surface set: containers). */
 var StatChartVariant = /* @__PURE__ */ function(StatChartVariant) {
+	/** The canvas fill, `background.base`. */
 	StatChartVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. The default (1.x). */
 	StatChartVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
 	StatChartVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. */
 	StatChartVariant["TERTIARY"] = "TERTIARY";
 	return StatChartVariant;
 }({});
-var _exp = () => ({ theme, $variant }) => match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
-var _exp2 = () => ({ theme, $noBorder }) => $noBorder ? "transparent" : theme.color.border.primary;
-var StatChartWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StatChartWrapper",
-	class: "slaxlp8",
-	propsAsIs: false,
-	vars: {
-		"slaxlp8-0": [_exp()],
-		"slaxlp8-1": [_exp2()]
-	}
-}));
-/**
-* A single-number stat tile — the KPI card. Fixed 140px minimum width so a row
-* of them lines up without you setting widths.
-*/
-var StatChart = ({ label, value, variant = "PRIMARY", noBorder }) => {
-	return /* @__PURE__ */ jsx(StatChartWrapper, {
-		$variant: variant,
-		$noBorder: noBorder,
-		children: /* @__PURE__ */ jsxs(FlexWrapper, {
+/** Identity by member name: `Box` owns the fill and the hairline. */
+var STAT_CHART_VARIANT_TO_BOX_VARIANT_MAP = {
+	["BASE"]: BoxVariant.BASE,
+	["PRIMARY"]: BoxVariant.PRIMARY,
+	["SECONDARY"]: BoxVariant.SECONDARY,
+	["TERTIARY"]: BoxVariant.TERTIARY
+};
+/** Tiles in a `Flex` row keep their width; in a `Grid` they stretch to the track (1.x). */
+var ROOT_CSS = "gx-StatChart-ROOT_CSS-rlaxlp8";
+/** A string or number as the headline figure; a node as given. */
+function renderValue(value) {
+	if (typeof value === "string" || typeof value === "number") return /* @__PURE__ */ jsx(Text, {
+		size: TextSize.BODY_LG,
+		weight: TextWeight.MEDIUM,
+		isTabular: true,
+		lineClamp: 1,
+		children: value
+	});
+	return value;
+}
+/** A KPI tile: label, headline value, optional description and trailing trend. */
+var StatChart = forwardRef(function StatChart({ label, value, description, trailing, variant = "PRIMARY", hasBorder = false, isLoading = false, id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		...rest,
+		...isLoading ? { "aria-busy": true } : {},
+		ref,
+		...id === void 0 ? {} : { id },
+		variant: STAT_CHART_VARIANT_TO_BOX_VARIANT_MAP[variant],
+		hasBorder,
+		radius: Radius.LG,
+		padding: [12, 16],
+		minWidth: 140,
+		className: cx(ROOT_CSS, className),
+		...style === void 0 ? {} : { style },
+		children: /* @__PURE__ */ jsxs(Flex, {
 			direction: FlexDirection.COLUMN,
 			gap: 8,
 			minWidth: 0,
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
 				variant: TextVariant.TERTIARY,
-				isEllipsis: true,
+				lineClamp: 1,
 				children: label
-			}), /* @__PURE__ */ jsx(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				gap: 6,
-				children: typeof value === "string" ? /* @__PURE__ */ jsx(Text, {
-					size: TextSize.BODY_LG,
-					weight: TextWeight.MEDIUM,
-					children: value
-				}) : value
+			}), isLoading ? /* @__PURE__ */ jsx(Skeleton, {
+				variant: SkeletonVariant.TEXT,
+				size: SkeletonSize.LARGE
+			}) : /* @__PURE__ */ jsxs(Flex, {
+				direction: FlexDirection.COLUMN,
+				gap: 4,
+				minWidth: 0,
+				children: [/* @__PURE__ */ jsxs(Flex, {
+					alignItems: AlignItems.CENTER,
+					gap: 8,
+					minWidth: 0,
+					children: [/* @__PURE__ */ jsx(FlexItem, {
+						grow: 1,
+						minWidth: 0,
+						children: renderValue(value)
+					}), trailing]
+				}), description ? /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: TextVariant.SECONDARY,
+					lineClamp: 1,
+					children: description
+				}) : null]
 			})]
 		})
 	});
-};
+});
+StatChart.displayName = "StatChart";
 //#endregion
 export { StatChartVariant, StatChart as default };