@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/text/Kbd.js

@@ -0,0 +1,284 @@
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "./Text.js";
+import { useIsMac } from "../hooks/useIsMac.js";
+/* empty css              */
+import { styled } from "@linaria/react";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/text/Kbd.tsx
+/**
+* A keyboard shortcut drawn as a row of key caps, e.g. `⌘` `K`. Display only: it binds nothing.
+*
+* `hotKeys` entries are tokens in the `useHotkey` key grammar (`"mod"`, `"shift"`, `"enter"`,
+* `"k"`), matched case-insensitively and shown with the label for the user's platform (`mod` →
+* `⌘` on Mac, `Ctrl` elsewhere, from `useIsMac`). A single letter renders uppercase; any other
+* entry renders verbatim, so 1.x arrays like `["⌘", "K"]` still look the same. Because entries are
+* grammar tokens, the array a host displays is also the combo it binds:
+* `useHotkey(hotKeys.join("+"), …)`.
+*
+* The root is a `<kbd>` wrapping one `<kbd>` per cap (the HTML pattern for a key combination).
+* Glyph caps carry a visually hidden spoken name, and a hidden `+` sits between caps, so
+* `["mod", "k"]` reads "Command + K" on Mac and "Ctrl + K" elsewhere. Hosts that expose the
+* shortcut another way (`aria-keyshortcuts`) pass `aria-hidden`.
+*
+* `variant` picks the cap fill (a surface step). On a solid host (a `PRIMARY` or `ERROR` Button)
+* `isPlain` drops the fill and border and inherits the host's text color instead.
+*/
+/** Cap fill: a surface step (Constitution V-A surface set). */
+var KbdVariant = /* @__PURE__ */ function(KbdVariant) {
+	/** The canvas fill, `background.base`. */
+	KbdVariant["BASE"] = "BASE";
+	/** A panel fill, `background.primary`. */
+	KbdVariant["PRIMARY"] = "PRIMARY";
+	/** A raised fill, `background.secondary`. */
+	KbdVariant["SECONDARY"] = "SECONDARY";
+	/** The most elevated fill, `background.tertiary`. The default (1.x unset). */
+	KbdVariant["TERTIARY"] = "TERTIARY";
+	return KbdVariant;
+}({});
+/** Canonical rungs; the member names the control rung or text step the caps sit with. */
+var KbdSize = /* @__PURE__ */ function(KbdSize) {
+	/** 12px caps, caption text; beside a 20px control or `CAPTION` text. */
+	KbdSize["X_SMALL"] = "X_SMALL";
+	/** 16px caps, caption text; beside a 24px control or `BODY_SM` text. */
+	KbdSize["SMALL"] = "SMALL";
+	/** 16px caps, `body_sm` text; beside a 32px control or `BODY_MD` text. The default. */
+	KbdSize["MEDIUM"] = "MEDIUM";
+	/** 20px caps, `body_md` text; beside a 36px control or `BODY_LG` / `HEADING_SM` text. */
+	KbdSize["LARGE"] = "LARGE";
+	/** 20px caps, `body_md` text; beside a 40px control. */
+	KbdSize["X_LARGE"] = "X_LARGE";
+	return KbdSize;
+}({});
+/**
+* Every token in the `useHotkey` grammar (`src/hooks/useHotkey.ts` header) → its platform labels.
+* Keyed by the lowercased, trimmed entry. A `Map`, so `"constructor"` is not a token.
+*/
+var KBD_TOKEN_TO_LABEL_MAP = new Map([
+	["mod", {
+		mac: "⌘",
+		other: "Ctrl",
+		spokenName: "Command"
+	}],
+	["cmd", {
+		mac: "⌘",
+		other: "Win",
+		spokenName: "Command"
+	}],
+	["meta", {
+		mac: "⌘",
+		other: "Win",
+		spokenName: "Command"
+	}],
+	["ctrl", {
+		mac: "⌃",
+		other: "Ctrl",
+		spokenName: "Control"
+	}],
+	["alt", {
+		mac: "⌥",
+		other: "Alt",
+		spokenName: "Option"
+	}],
+	["option", {
+		mac: "⌥",
+		other: "Alt",
+		spokenName: "Option"
+	}],
+	["shift", {
+		mac: "⇧",
+		other: "Shift",
+		spokenName: "Shift"
+	}],
+	["enter", {
+		mac: "↵",
+		other: "Enter",
+		spokenName: "Enter"
+	}],
+	["tab", {
+		mac: "⇥",
+		other: "Tab",
+		spokenName: "Tab"
+	}],
+	["backspace", {
+		mac: "⌫",
+		other: "Backspace",
+		spokenName: "Backspace"
+	}],
+	["delete", {
+		mac: "⌦",
+		other: "Del",
+		spokenName: "Delete"
+	}],
+	["escape", {
+		mac: "Esc",
+		other: "Esc"
+	}],
+	["esc", {
+		mac: "Esc",
+		other: "Esc"
+	}],
+	["space", {
+		mac: "Space",
+		other: "Space"
+	}],
+	["up", {
+		mac: "↑",
+		other: "↑",
+		spokenName: "Up arrow"
+	}],
+	["down", {
+		mac: "↓",
+		other: "↓",
+		spokenName: "Down arrow"
+	}],
+	["left", {
+		mac: "←",
+		other: "←",
+		spokenName: "Left arrow"
+	}],
+	["right", {
+		mac: "→",
+		other: "→",
+		spokenName: "Right arrow"
+	}],
+	["home", {
+		mac: "Home",
+		other: "Home"
+	}],
+	["end", {
+		mac: "End",
+		other: "End"
+	}],
+	["pageup", {
+		mac: "PgUp",
+		other: "PgUp"
+	}],
+	["pagedown", {
+		mac: "PgDn",
+		other: "PgDn"
+	}],
+	...Array.from({ length: 12 }, (_, offset) => {
+		const name = `F${offset + 1}`;
+		return [name.toLowerCase(), {
+			mac: name,
+			other: name
+		}];
+	})
+]);
+var SINGLE_LETTER = /^[a-z]$/i;
+/** A cap's visible label and, for a glyph label, the name screen readers announce instead. */
+function resolveCapLabel(entry, isMac) {
+	const token = entry.trim().toLowerCase();
+	const known = KBD_TOKEN_TO_LABEL_MAP.get(token);
+	if (known !== void 0) {
+		const label = isMac ? known.mac : known.other;
+		return (isMac || known.other === known.mac) && known.spokenName !== void 0 ? {
+			label,
+			spokenName: known.spokenName
+		} : { label };
+	}
+	if (SINGLE_LETTER.test(token)) return { label: token.toUpperCase() };
+	return { label: entry };
+}
+/**
+* Duplicate-safe keys for a static list: each entry plus its occurrence count so far, so
+* `["k", "k"]` keys as `k#0`, `k#1`.
+*/
+function toCapKeys(hotKeys) {
+	const seen = /* @__PURE__ */ new Map();
+	return hotKeys.map((entry) => {
+		const count = seen.get(entry) ?? 0;
+		seen.set(entry, count + 1);
+		return `${entry}#${count}`;
+	});
+}
+/**
+* `vertical-align: top`, not `middle`: a cap is exactly its paired step's line height, so
+* top-aligning fills the line box without growing it (`middle` grew every pairing by 0.7–1.6px).
+*/
+var Root = /*#__PURE__*/ styled("kbd")({
+	name: "Root",
+	class: "gx-Kbd-r6hth3n",
+	propsAsIs: false
+});
+var Cap = /*#__PURE__*/ styled("kbd")({
+	name: "Cap",
+	class: "gx-Kbd-Cap-c1so6cec",
+	propsAsIs: false
+});
+/** Cap fill per surface step, each with the hairline. */
+var KBD_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-Kbd-BASE-beclkzj",
+	["PRIMARY"]: "gx-Kbd-PRIMARY-p8zu6lo",
+	["SECONDARY"]: "gx-Kbd-SECONDARY-sobm7cf",
+	["TERTIARY"]: "gx-Kbd-TERTIARY-t1lp4ank"
+};
+/** `isPlain`: no fill, no border, the host's color. Replaces the variant class. */
+var PLAIN_CSS = "gx-Kbd-PLAIN_CSS-p1jb0ang";
+/** `isDisabled`: the hairline turns `border.disabled`; the fill stays. Declared after the variant map. */
+var DISABLED_CSS = "gx-Kbd-DISABLED_CSS-d1jismue";
+/** Cap height = min-width = the line height of the rung's text step, so a cap never grows its line. */
+var KBD_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Kbd-X_SMALL-xnczwsn",
+	["SMALL"]: "gx-Kbd-SMALL-s1ynxulf",
+	["MEDIUM"]: "gx-Kbd-MEDIUM-mx5trnq",
+	["LARGE"]: "gx-Kbd-LARGE-l1qhwd6g",
+	["X_LARGE"]: "gx-Kbd-X_LARGE-xzxpes5"
+};
+/**
+* Cap text: one step below the rung's text (Constitution III-A.4), as in 1.x. Built when called at
+* render: Text, Tooltip and Kbd import each other, so no load-time reads of `TextSize`.
+*/
+var KBD_SIZE_TO_TEXT_SIZE_MAP = () => ({
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_MD,
+	["X_LARGE"]: TextSize.BODY_MD
+});
+/**
+* Cap text color: secondary on every fill (`isPlain` inherits the host's color instead). Built
+* when called at render, like `KBD_SIZE_TO_TEXT_SIZE_MAP` (no load-time reads of `TextVariant`).
+*/
+var KBD_VARIANT_TO_TEXT_VARIANT_MAP = () => ({
+	["BASE"]: TextVariant.SECONDARY,
+	["PRIMARY"]: TextVariant.SECONDARY,
+	["SECONDARY"]: TextVariant.SECONDARY,
+	["TERTIARY"]: TextVariant.SECONDARY
+});
+/** A keyboard shortcut as key caps, with platform-aware labels. Display only. */
+var Kbd = forwardRef(function Kbd({ hotKeys, variant = "TERTIARY", isPlain = false, size = "MEDIUM", family = FontFamily.SANS, isDisabled = false, id, className, style, ...rest }, ref) {
+	const isMac = useIsMac();
+	if (hotKeys.length === 0) return null;
+	const capKeys = toCapKeys(hotKeys);
+	const capClassName = cx(isPlain ? PLAIN_CSS : KBD_VARIANT_TO_CSS_MAP[variant], isDisabled && DISABLED_CSS, KBD_SIZE_TO_CSS_MAP[size]);
+	const textSize = KBD_SIZE_TO_TEXT_SIZE_MAP()[size];
+	const textVariant = isDisabled ? TextVariant.DISABLED : isPlain ? TextVariant.INHERIT : KBD_VARIANT_TO_TEXT_VARIANT_MAP()[variant];
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: hotKeys.map((entry, position) => {
+			const { label, spokenName } = resolveCapLabel(entry, isMac);
+			return /* @__PURE__ */ jsxs(Fragment, { children: [position > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: "+" }), /* @__PURE__ */ jsxs(Cap, {
+				className: capClassName,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: textSize,
+					variant: textVariant,
+					family,
+					...spokenName === void 0 ? {} : { "aria-hidden": true },
+					children: label
+				}), spokenName !== void 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: spokenName })]
+			})] }, capKeys[position]);
+		})
+	});
+});
+Kbd.displayName = "Kbd";
+//#endregion
+export { KbdSize, KbdVariant, Kbd as default };

package/dist/text/MarkdownText.d.ts

@@ -1,15 +1,32 @@
+import { type AriaAttributes, type CSSProperties } from "react";
 import { type Components } from "react-markdown";
-export interface MarkdownTextProps {
-    /** Markdown source. GitHub-flavored, and raw HTML is allowed through. */
+import { FontFamily } from "../theme/enums.js";
+/** The families MarkdownText sets prose in. */
+type MarkdownTextFamily = FontFamily.SANS | FontFamily.SERIF;
+export interface MarkdownTextProps extends AriaAttributes {
+    /** Markdown source, GitHub-flavored (tables, task lists, strikethrough, autolinks, footnotes). */
     content: string;
-    /** Replace the renderer for specific tags. Merged over the DLS defaults. */
+    /**
+     * Family for prose (paragraphs, lists, quotes, headings). `SERIF` (Cardo) is for editorial copy and sets the body at `body_lg`. Code stays mono and tables stay sans.
+     * @default FontFamily.SANS
+     */
+    family?: MarkdownTextFamily;
+    /**
+     * Render raw HTML found in `content`. Off by default: HTML is dropped. Only turn it on for trusted content.
+     * @default false
+     */
+    shouldRenderHtml?: boolean;
+    /** Replace the renderer for specific elements (`a`, `span`, `h1`…). Merged over the DLS renderers; an override owns its element's styling and semantics. */
     componentOverrides?: Partial<Components>;
+    /** 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;
 }
-/**
- * Renders Markdown using DLS components — headings, lists, tables and code all
- * come out on theme tokens rather than browser defaults.
- *
- * Raw HTML in `content` is rendered, not escaped. Don't pass untrusted input.
- */
-declare const MarkdownText: ({ content, componentOverrides }: MarkdownTextProps) => import("react").JSX.Element;
+/** Markdown as DLS typography: prose line height, real headings, CodeBlock fences, Link. */
+declare const MarkdownText: import("react").ForwardRefExoticComponent<MarkdownTextProps & import("react").RefAttributes<HTMLDivElement>>;
 export default MarkdownText;