@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/layout/ResizeHandle.d.ts

@@ -0,0 +1,48 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+import { Orientation } from "../theme/enums.js";
+export interface ResizeHandleProps extends AriaAttributes {
+    /**
+     * Axis of the bar. `VERTICAL` is a vertical bar between side-by-side panes, dragged left and
+     * right; `HORIZONTAL` is a horizontal bar between stacked panes, dragged up and down.
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /** The current size, in pixels, of the pane this handle resizes. */
+    value: number;
+    /** Called with the new size while dragging and on each key step; clamped and whole pixels. */
+    onChange: (value: number) => void;
+    /**
+     * Smallest size, in pixels.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Largest size, in pixels.
+     * @default Infinity
+     */
+    max?: number;
+    /**
+     * The resized pane is after the handle (right of a vertical bar, below a horizontal one), so
+     * dragging toward the start grows it.
+     * @default false
+     */
+    isReversed?: boolean;
+    /**
+     * Not draggable and not focusable; the grip dims.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Accessible name naming the pane ("Resize sidebar"). Pass `aria-controls` with its `id`. */
+    ariaLabel: string;
+    /** 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;
+}
+/** A draggable, keyboard-adjustable bar that resizes the pane beside it. */
+declare const ResizeHandle: import("react").ForwardRefExoticComponent<ResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ResizeHandle;

package/dist/layout/ResizeHandle.js

@@ -0,0 +1,143 @@
+import { Orientation } from "../theme/enums.js";
+import { SPACE } from "../theme/tokens/scales.js";
+/* empty css                       */
+import { styled } from "@linaria/react";
+import { forwardRef, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/layout/ResizeHandle.tsx
+/**
+* The grab bar between two panes. The user drags it (mouse, touch or pen) or moves it with the
+* arrow keys to change the size of one pane. Replaces 1.x `HorizontalResizeHandle` and
+* `VerticalResizeHandle` (Constitution XII.4 pattern): `orientation` picks the axis.
+*
+* The handle owns the interaction (pointer capture, key steps, clamping to `min` / `max`, the
+* WAI-ARIA window-splitter semantics); the host owns the size. Pass the pane's size in pixels as
+* `value` and apply what `onChange` returns. ResizeHandle takes no `size` or `variant`
+* (Constitution V-A).
+*/
+/** One arrow-key step: the `space[16]` token, in pixels. */
+var KEY_STEP_PX = Number.parseFloat(SPACE[16]);
+/** Stable keys for the dots. */
+var GRIP_DOTS = Array.from({ length: 4 }, (_, index) => `dot-${index}`);
+/** One dot of the grip: a small round mark in the quiet icon colour. */
+var GripDot = /*#__PURE__*/ styled("span")({
+	name: "GripDot",
+	class: "gx-ResizeHandle-GripDot-gqgj99q",
+	propsAsIs: false
+});
+/** The mark inside the strip: a short line of dots. Declared first so `Root`'s state rules can target it. */
+var Grip = /*#__PURE__*/ styled("span")({
+	name: "Grip",
+	class: "gx-ResizeHandle-Grip-g1y5kmmy",
+	propsAsIs: false
+});
+/** The hit area: an in-flow strip with no fill of its own; the grip is the mark. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ResizeHandle-rpp11vs",
+	propsAsIs: false
+});
+/** Strip thickness, stretch and cursor per axis (the 1.x cursors). */
+var RESIZE_HANDLE_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-ResizeHandle-Orientation_VERTICAL-o1ynbf1o",
+	[Orientation.HORIZONTAL]: "gx-ResizeHandle-Orientation_HORIZONTAL-o1mpu2dj"
+};
+/**
+* The dots' box along the axis: 4 × 2px dots + 3 × 3px gaps = 17px, rounded up to an even 18px
+* so the line centres on whole pixels in an even-length strip; the dots sit at its start.
+*/
+/** The dots run along the handle's axis. */
+var GRIP_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-ResizeHandle-Orientation_VERTICAL-orsl86p",
+	[Orientation.HORIZONTAL]: "gx-ResizeHandle-Orientation_HORIZONTAL-o1pusn5p"
+};
+/** Hover and keyboard focus darken the dots. */
+var ENABLED_CSS = "gx-ResizeHandle-ENABLED_CSS-e419x02";
+/** While a pointer drag is in progress, the dots stay dark even when the pointer leaves. */
+var DRAGGING_CSS = "gx-ResizeHandle-DRAGGING_CSS-d1bnqfss";
+/** Disabled: no resize cursor, dimmed dots. */
+var DISABLED_CSS = "gx-ResizeHandle-DISABLED_CSS-dn28y1d";
+/** Keeps `value` within `[min, max]` as a whole pixel. */
+function clamp(value, min, max) {
+	return Math.min(Math.max(Math.round(value), min), max);
+}
+/** A draggable, keyboard-adjustable bar that resizes the pane beside it. */
+var ResizeHandle = forwardRef(function ResizeHandle({ orientation = Orientation.HORIZONTAL, value, onChange, min = 0, max = Number.POSITIVE_INFINITY, isReversed = false, isDisabled = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const dragRef = useRef(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const isVertical = orientation === Orientation.VERTICAL;
+	const endDrag = () => {
+		dragRef.current = null;
+		setIsDragging(false);
+	};
+	const handlePointerDown = (event) => {
+		if (isDisabled) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		dragRef.current = {
+			pointerId: event.pointerId,
+			start: isVertical ? event.clientX : event.clientY,
+			startValue: value,
+			lastSent: value
+		};
+		setIsDragging(true);
+	};
+	const handlePointerMove = (event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId) return;
+		const delta = (isVertical ? event.clientX : event.clientY) - drag.start;
+		const next = clamp(drag.startValue + (isReversed ? -delta : delta), min, max);
+		if (next !== drag.lastSent) {
+			drag.lastSent = next;
+			onChange(next);
+		}
+	};
+	const handlePointerEnd = (event) => {
+		if (dragRef.current?.pointerId === event.pointerId) endDrag();
+	};
+	const handleKeyDown = (event) => {
+		if (isDisabled) return;
+		const towardEnd = isVertical ? "ArrowRight" : "ArrowDown";
+		const towardStart = isVertical ? "ArrowLeft" : "ArrowUp";
+		const growth = isReversed ? -KEY_STEP_PX : KEY_STEP_PX;
+		let next;
+		if (event.key === towardEnd) next = value + growth;
+		else if (event.key === towardStart) next = value - growth;
+		else if (event.key === "Home") next = min;
+		else if (event.key === "End" && Number.isFinite(max)) next = max;
+		if (next === void 0) return;
+		event.preventDefault();
+		onChange(clamp(next, min, max));
+	};
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		role: "separator",
+		tabIndex: isDisabled ? void 0 : 0,
+		"aria-orientation": isVertical ? "vertical" : "horizontal",
+		"aria-valuenow": value,
+		"aria-valuemin": min,
+		"aria-valuemax": Number.isFinite(max) ? max : void 0,
+		"aria-label": ariaLabel ?? rest["aria-label"],
+		"aria-disabled": isDisabled || void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerEnd,
+		onPointerCancel: handlePointerEnd,
+		onLostPointerCapture: handlePointerEnd,
+		onKeyDown: handleKeyDown,
+		className: cx(RESIZE_HANDLE_ORIENTATION_TO_CSS_MAP[orientation], isDisabled ? DISABLED_CSS : ENABLED_CSS, isDragging && DRAGGING_CSS, className),
+		style,
+		children: /* @__PURE__ */ jsx(Grip, {
+			"aria-hidden": true,
+			className: GRIP_ORIENTATION_TO_CSS_MAP[orientation],
+			children: GRIP_DOTS.map((dot) => /* @__PURE__ */ jsx(GripDot, {}, dot))
+		})
+	});
+});
+ResizeHandle.displayName = "ResizeHandle";
+//#endregion
+export { ResizeHandle as default };

package/dist/layout/ScrollArea.d.ts

@@ -0,0 +1,30 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode, type UIEvent } from "react";
+export interface ScrollAreaProps extends AriaAttributes {
+    /** The scrolling content. Put padding on a `Box` inside, not on ScrollArea. */
+    children?: ReactNode;
+    /**
+     * Also scroll sideways when the content is wider than the area. When `false`, content wraps and truncates to the area's width.
+     * @default false
+     */
+    canScrollHorizontally?: boolean;
+    /**
+     * Fade the content out toward each edge that has more content beyond it.
+     * @default false
+     */
+    hasFadeEdges?: boolean;
+    /** Names the region. When set, the scrolling element gets `role="region"` and this `aria-label`. */
+    ariaLabel?: string;
+    /** Scroll handler on the scrolling element. */
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /** DOM id of the scrolling element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the scrolling element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root (the box the parent sizes). */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A scrolling region with thin, consistent overlay scrollbars and optional fade edges. */
+declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ScrollArea;

package/dist/layout/ScrollArea.js

@@ -0,0 +1,138 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { Orientation } from "../theme/enums.js";
+import { t } from "../theme/tokens/t.js";
+/* empty css                     */
+import { forwardRef, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+//#region src/layout/ScrollArea.tsx
+/**
+* A scrolling region with thin overlay scrollbars that look the same in every browser and OS. The
+* DLS reset hides native scrollbars, so a scrollable sidebar, list, panel or code block uses
+* ScrollArea to show one: a 4px thumb that appears while the pointer is over the region. It fills
+* the height its parent gives it (`Box height`, `Box maxHeight`, a growing `FlexItem`), scrolls
+* vertically and, with `canScrollHorizontally`, sideways; `hasFadeEdges` fades the content toward
+* each edge that has more beyond it. Scrolling stays native, and the forwarded ref is the
+* scrolling element (`ref.current.scrollTo(…)`).
+*
+* No size, padding or fill of its own: the parent sizes it and a `Box padding` inside pads the
+* content. Not a virtualized list. Built on `@radix-ui/react-scroll-area` (the GX app's direct
+* usage maps onto `<ScrollArea>`).
+*/
+/** Nothing measured yet (the server and the first client render). */
+var NO_EDGES = {
+	top: false,
+	bottom: false,
+	left: false,
+	right: false,
+	isOverflowing: false
+};
+/** Sub-pixel scroll positions within this many px of an edge count as at the edge. */
+var EDGE_TOLERANCE_PX = 1;
+/** Fills a parent with a definite height; under a parent that only caps it, grows and then scrolls. */
+var ROOT_CSS = "gx-ScrollArea-ROOT_CSS-rtuxgfs";
+/** The scrolling element. `isolation` keeps content `z-index` below the scrollbars. */
+var VIEWPORT_CSS = "gx-ScrollArea-VIEWPORT_CSS-v10v341q";
+/** Vertical-only: override radix's inline `display: table` wrapper so content wraps and truncates. */
+var VERTICAL_ONLY_CSS = "gx-ScrollArea-VERTICAL_ONLY_CSS-vnp9bey";
+/** Alpha mask toward each edge with hidden content; lengths come from `--gx-scroll-area-fade-*` on the root. */
+var FADE_EDGES_CSS = "gx-ScrollArea-FADE_EDGES_CSS-f19cis7a";
+/**
+* With `hasFadeEdges`, the viewport's mask also clips its own outline, so the root (same box, not
+* masked) draws the `FOCUS_RING` outline while the viewport has keyboard focus.
+*/
+var FADE_EDGES_ROOT_CSS = "gx-ScrollArea-FADE_EDGES_ROOT_CSS-fjjojif";
+/** The track: 8px thick and transparent; the 2px padding leaves a 4px thumb. */
+var SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP = {
+	[Orientation.VERTICAL]: "gx-ScrollArea-Orientation_VERTICAL-o174c7co",
+	[Orientation.HORIZONTAL]: "gx-ScrollArea-Orientation_HORIZONTAL-okpbxfy"
+};
+/** The 4px thumb, a quiet neutral on every surface; `::before` gives it a 24px pointer target. */
+var THUMB_CSS = "gx-ScrollArea-THUMB_CSS-tzpebzb";
+/** Where the two scrollbars meet. */
+var CORNER_CSS = "gx-ScrollArea-CORNER_CSS-c1otan2y";
+/** Reads the viewport's scroll geometry into edge flags. */
+function measureEdges(viewport, canScrollHorizontally) {
+	const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = viewport;
+	const scrollLeft = Math.abs(viewport.scrollLeft);
+	return {
+		top: scrollTop > EDGE_TOLERANCE_PX,
+		bottom: scrollTop + clientHeight < scrollHeight - EDGE_TOLERANCE_PX,
+		left: canScrollHorizontally && scrollLeft > EDGE_TOLERANCE_PX,
+		right: canScrollHorizontally && scrollLeft + clientWidth < scrollWidth - EDGE_TOLERANCE_PX,
+		isOverflowing: scrollHeight - clientHeight > EDGE_TOLERANCE_PX || canScrollHorizontally && scrollWidth - clientWidth > EDGE_TOLERANCE_PX
+	};
+}
+/** True when two edge readings are the same. */
+function isSameEdges(a, b) {
+	return a.top === b.top && a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.isOverflowing === b.isOverflowing;
+}
+/** A scrolling region with thin, consistent overlay scrollbars and optional fade edges. */
+var ScrollArea = forwardRef(function ScrollArea({ children, canScrollHorizontally = false, hasFadeEdges = false, ariaLabel, onScroll, className, style, ...rest }, ref) {
+	const viewportRef = useRef(null);
+	const mergedRef = useMergeRefs([viewportRef, ref]);
+	const [edges, setEdges] = useState(NO_EDGES);
+	useIsomorphicLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		if (viewport === null) return;
+		let isCancelled = false;
+		const update = () => {
+			if (isCancelled) return;
+			const next = measureEdges(viewport, canScrollHorizontally);
+			setEdges((current) => isSameEdges(current, next) ? current : next);
+		};
+		update();
+		viewport.addEventListener("scroll", update, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		observer?.observe(viewport);
+		if (viewport.firstElementChild !== null) observer?.observe(viewport.firstElementChild);
+		document.fonts?.ready.then(update);
+		return () => {
+			isCancelled = true;
+			viewport.removeEventListener("scroll", update);
+			observer?.disconnect();
+		};
+	}, [canScrollHorizontally]);
+	const fadeVariables = {
+		"--gx-scroll-area-fade-top": edges.top ? t.space[16] : "0px",
+		"--gx-scroll-area-fade-bottom": edges.bottom ? t.space[16] : "0px",
+		"--gx-scroll-area-fade-left": edges.left ? t.space[16] : "0px",
+		"--gx-scroll-area-fade-right": edges.right ? t.space[16] : "0px"
+	};
+	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+		type: "hover",
+		className: cx(ROOT_CSS, hasFadeEdges && FADE_EDGES_ROOT_CSS, className),
+		style: {
+			...fadeVariables,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+				ref: mergedRef,
+				className: cx(VIEWPORT_CSS, !canScrollHorizontally && VERTICAL_ONLY_CSS, hasFadeEdges && FADE_EDGES_CSS),
+				role: ariaLabel === void 0 ? void 0 : "region",
+				"aria-label": ariaLabel,
+				tabIndex: edges.isOverflowing ? 0 : void 0,
+				onScroll,
+				...rest,
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+				orientation: "vertical",
+				className: SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP[Orientation.VERTICAL],
+				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: THUMB_CSS })
+			}),
+			canScrollHorizontally && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+				orientation: "horizontal",
+				className: SCROLL_AREA_ORIENTATION_TO_SCROLLBAR_CSS_MAP[Orientation.HORIZONTAL],
+				children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: THUMB_CSS })
+			}),
+			canScrollHorizontally && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { className: CORNER_CSS })
+		]
+	});
+});
+ScrollArea.displayName = "ScrollArea";
+//#endregion
+export { ScrollArea as default };

package/dist/links/Link.d.ts

@@ -1,2 +1,102 @@
-declare const Link: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+import { type AriaAttributes, type CSSProperties, type ElementType, type FocusEventHandler, type MouseEvent, type MouseEventHandler, type ReactNode } from "react";
+import { TextSize } from "../text/Text.js";
+/** Color (Constitution V-A: Link NEUTRAL / INHERIT; declared in `scripts/lint-dls.ts` `MODE_SETS`). */
+export declare enum LinkVariant {
+    /** `text.primary` with a `text.tertiary` underline (the 1.x `MarkdownText` anchor). The default. */
+    NEUTRAL = "NEUTRAL",
+    /** `currentColor`: the link takes the surrounding text's color. */
+    INHERIT = "INHERIT"
+}
+/** When the underline is drawn (Constitution V-A: `Link underline`). */
+export declare enum LinkUnderline {
+    /** Soft underline at rest, full color on hover. The default. */
+    ALWAYS = "ALWAYS",
+    /** No underline at rest, full color on hover. */
+    HOVER = "HOVER",
+    /** Never underlined (nav lists, titles); `isActive` still underlines. */
+    NONE = "NONE"
+}
+/** Canonical rungs; only the text step applies (a link has no control height). */
+export declare enum LinkSize {
+    /** `caption` (10px on a 12px line). */
+    X_SMALL = "X_SMALL",
+    /** `body_sm` (12px on a 16px line). */
+    SMALL = "SMALL",
+    /** `body_md` (13px on a 16px line). */
+    MEDIUM = "MEDIUM",
+    /** `body_lg` (14px on a 20px line). */
+    LARGE = "LARGE",
+    /** `body_lg` (14px on a 20px line); kept so composites can map their own size 1:1. */
+    X_LARGE = "X_LARGE"
+}
+/** Text step per rung (Constitution III-A.4). */
+export declare const LINK_SIZE_TO_TEXT_SIZE_MAP: Record<LinkSize, TextSize>;
+export interface LinkProps extends AriaAttributes {
+    /** The link text. Must not contain links, buttons or inputs. */
+    children?: ReactNode;
+    /** Destination. Without it, Link renders a non-interactive `<span>` with the link look (for use inside a clickable parent). */
+    href?: string;
+    /**
+     * Router link component that renders the anchor when `href` is set. It receives `href` and must
+     * forward its `ref`. Ignored without `href`.
+     * @default "a"
+     */
+    as?: ElementType;
+    /**
+     * Opens in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) and adds a trailing arrow
+     * plus visually hidden "(opens in a new tab)".
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Color: primary text, or the parent's color.
+     * @default LinkVariant.NEUTRAL
+     */
+    variant?: LinkVariant;
+    /**
+     * When the underline shows: always (soft at rest, full on hover), on hover only, or never.
+     * @default LinkUnderline.ALWAYS
+     */
+    underline?: LinkUnderline;
+    /**
+     * Text step for a standalone link (`caption` / `body_sm` / `body_md` / `body_lg` / `body_lg`).
+     * Inherits from the parent when unset: leave it unset inside `Text` so the link matches the sentence.
+     */
+    size?: LinkSize;
+    /**
+     * Marks the current page: `aria-current="page"` and the hover look, held.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Not followable: no `href`, disabled color, `aria-disabled`, `onClick` not called.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Called when the link is followed (analytics, closing a menu). Not called while disabled or without `href`. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Accessible name when the visible text is not enough. Must start with the visible text
+     * (WCAG 2.5.3). With `isExternal`, " (opens in a new tab)" is appended.
+     */
+    ariaLabel?: string;
+    /** Focus passthrough to the root (Tooltip triggers). */
+    onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+    /** Blur passthrough to the root (Tooltip triggers). */
+    onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+    /** Pointer-enter passthrough to the root (Tooltip triggers, router prefetch on hover). */
+    onMouseEnter?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+    /** Pointer-leave passthrough to the root (Tooltip triggers). */
+    onMouseLeave?: MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+    /** 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;
+}
+/** Inline navigation styled as text: primary or inherited color, with a soft underline. */
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
 export default Link;

package/dist/links/Link.js

@@ -1,10 +1,172 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { TextSize } 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";
+import { ArrowUpRightIcon } from "@phosphor-icons/react";
 //#region src/links/Link.tsx
-var Link = /*#__PURE__*/ styled("div")({
-	name: "Link",
-	class: "l1o22m4p",
+/**
+* Inline navigation. Renders an `<a href>` (or a router link through `as`) styled as text: it takes
+* its size, family and line height from the surrounding `Text` unless `size` is set, colors itself
+* by `variant` (`text.primary` by default) and draws an underline per `underline`. `isExternal` opens
+* the target in a new tab and adds a trailing arrow; `isActive` marks the current page.
+*
+* Without `href`, Link renders a non-interactive `<span>` with the link look, for use inside a
+* parent that is itself the click target (a link never sits inside a `<button>`).
+*
+* Color is CSS: the variant map sets `color` and two custom properties (`--gx-link-underline-rest`,
+* `--gx-link-hover-color`) that the underline map reads, so a theme switch needs no re-render.
+*
+* Every prop Link does not consume (`aria-*`, `data-*`, native anchor attributes, and any handler a
+* wrapping `Tooltip` injects with `cloneElement`) is spread onto the root, so Link is a valid
+* trigger.
+*
+* Not an action (a text-styled action is `Button` `TERTIARY`) and not a button-styled link
+* (`Button href`).
+*/
+/** Color (Constitution V-A: Link NEUTRAL / INHERIT; declared in `scripts/lint-dls.ts` `MODE_SETS`). */
+var LinkVariant = /* @__PURE__ */ function(LinkVariant) {
+	/** `text.primary` with a `text.tertiary` underline (the 1.x `MarkdownText` anchor). The default. */
+	LinkVariant["NEUTRAL"] = "NEUTRAL";
+	/** `currentColor`: the link takes the surrounding text's color. */
+	LinkVariant["INHERIT"] = "INHERIT";
+	return LinkVariant;
+}({});
+/** When the underline is drawn (Constitution V-A: `Link underline`). */
+var LinkUnderline = /* @__PURE__ */ function(LinkUnderline) {
+	/** Soft underline at rest, full color on hover. The default. */
+	LinkUnderline["ALWAYS"] = "ALWAYS";
+	/** No underline at rest, full color on hover. */
+	LinkUnderline["HOVER"] = "HOVER";
+	/** Never underlined (nav lists, titles); `isActive` still underlines. */
+	LinkUnderline["NONE"] = "NONE";
+	return LinkUnderline;
+}({});
+/** Canonical rungs; only the text step applies (a link has no control height). */
+var LinkSize = /* @__PURE__ */ function(LinkSize) {
+	/** `caption` (10px on a 12px line). */
+	LinkSize["X_SMALL"] = "X_SMALL";
+	/** `body_sm` (12px on a 16px line). */
+	LinkSize["SMALL"] = "SMALL";
+	/** `body_md` (13px on a 16px line). */
+	LinkSize["MEDIUM"] = "MEDIUM";
+	/** `body_lg` (14px on a 20px line). */
+	LinkSize["LARGE"] = "LARGE";
+	/** `body_lg` (14px on a 20px line); kept so composites can map their own size 1:1. */
+	LinkSize["X_LARGE"] = "X_LARGE";
+	return LinkSize;
+}({});
+/** Text step per rung (Constitution III-A.4). */
+var LINK_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/**
+* Static rules. The underline is always drawn and only its color changes, so it fades with the
+* `duration.fast` color transition. `INTERACTIVE_RESET` comes first so the rules after it win.
+*/
+var Root = /*#__PURE__*/ styled("a")({
+	name: "Root",
+	class: "gx-Link-r1o22m4p",
 	propsAsIs: false
 });
+/**
+* The trailing arrow and its hidden text. `inline-block` keeps the underline from running under
+* the arrow; `nowrap` keeps the arrow on the last word's line.
+*/
+var ExternalMark = /*#__PURE__*/ styled("span")({
+	name: "ExternalMark",
+	class: "gx-Link-ExternalMark-e1mxegpw",
+	propsAsIs: false
+});
+/** Scales the arrow with the inherited text at every step (CSS overrides the svg's size attributes). */
+var EXTERNAL_ICON_CSS = "gx-Link-EXTERNAL_ICON_CSS-eltkyaq";
+/**
+* Text color plus the two custom properties the underline map reads. `INHERIT` uses
+* `currentColor`, which in `color` is the parent's color.
+*/
+var LINK_VARIANT_TO_CSS_MAP = {
+	["NEUTRAL"]: "gx-Link-NEUTRAL-nbrz8uy",
+	["INHERIT"]: "gx-Link-INHERIT-i6kk7ps"
+};
+/** Underline color at rest and on hover. Hover skips a disabled link (the `aria-disabled` state). */
+var LINK_UNDERLINE_TO_CSS_MAP = {
+	["ALWAYS"]: "gx-Link-ALWAYS-anrkllv",
+	["HOVER"]: "gx-Link-HOVER-h1f96o6j",
+	["NONE"]: "gx-Link-NONE-n1puz08l"
+};
+/**
+* A sized link owns its line box: the root carries the rung's text step (`LINK_SIZE_TO_TEXT_SIZE_MAP`),
+* so the underline, focus ring and hit area sit on whole pixels at the rung's line height. The family
+* still inherits. Unset `size` adds none of this and inherits everything from the parent.
+*/
+var LINK_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Link-X_SMALL-xga6iwl",
+	["SMALL"]: "gx-Link-SMALL-s9s8qhv",
+	["MEDIUM"]: "gx-Link-MEDIUM-m114yiay",
+	["LARGE"]: "gx-Link-LARGE-l1cvl03b",
+	["X_LARGE"]: "gx-Link-X_LARGE-xh0xcxb"
+};
+/** The span form: its clickable parent owns the cursor. */
+var SPAN_CSS = "gx-Link-SPAN_CSS-spz2g6s";
+/**
+* `isActive`: the hover look held, always underlined (every `underline`, hover included).
+* Declared after the underline map so it wins at equal specificity.
+*/
+var ACTIVE_CSS = "gx-Link-ACTIVE_CSS-a5ih1ib";
+/** `isDisabled`, rest and hover. Declared last so it wins over the active look. */
+var DISABLED_CSS = "gx-Link-DISABLED_CSS-d1czu3ov";
+var EXTERNAL_TEXT = " (opens in a new tab)";
+/** Inline navigation styled as text: primary or inherited color, with a soft underline. */
+var Link = forwardRef(function Link({ children, href, as, isExternal = false, variant = "NEUTRAL", underline = "ALWAYS", size, isActive = false, isDisabled = false, onClick, ariaLabel, id, className, style, ...rest }, ref) {
+	const isLink = href !== void 0;
+	const handleClick = (event) => {
+		if (isDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const computedAria = {};
+	if (ariaLabel !== void 0) computedAria["aria-label"] = isExternal ? `${ariaLabel}${EXTERNAL_TEXT}` : ariaLabel;
+	if (isLink && isDisabled) computedAria["aria-disabled"] = true;
+	if (isLink && isActive) computedAria["aria-current"] = "page";
+	const elementProps = {};
+	if (!isLink) elementProps.as = "span";
+	else if (isDisabled) {
+		elementProps.as = "a";
+		elementProps.role = "link";
+		elementProps.onClick = handleClick;
+	} else {
+		elementProps.as = as ?? "a";
+		elementProps.href = href;
+		elementProps.onClick = handleClick;
+		if (isExternal) {
+			elementProps.target = "_blank";
+			elementProps.rel = "noopener noreferrer";
+		}
+	}
+	return /* @__PURE__ */ jsxs(Root, {
+		...computedAria,
+		...rest,
+		...elementProps,
+		ref,
+		id,
+		className: cx(size !== void 0 && LINK_SIZE_TO_CSS_MAP[size], LINK_VARIANT_TO_CSS_MAP[variant], LINK_UNDERLINE_TO_CSS_MAP[underline], !isLink && SPAN_CSS, isActive && ACTIVE_CSS, isDisabled && DISABLED_CSS, className),
+		style,
+		children: [children, isExternal && /* @__PURE__ */ jsxs(ExternalMark, { children: [/* @__PURE__ */ jsx(Icon, {
+			component: ArrowUpRightIcon,
+			variant: IconVariant.INHERIT,
+			className: EXTERNAL_ICON_CSS
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: EXTERNAL_TEXT })] })]
+	});
+});
+Link.displayName = "Link";
 //#endregion
-export { Link as default };
+export { LINK_SIZE_TO_TEXT_SIZE_MAP, LinkSize, LinkUnderline, LinkVariant, Link as default };