@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/brand/GalaxyLogomark.d.ts

@@ -0,0 +1,26 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyLogomarkProps extends AriaAttributes {
+    /**
+     * Height of the mark in px. The mark is square. 20 fits the 48px SidebarNav header and Topbar.
+     * @default 20
+     */
+    size?: number;
+    /**
+     * For a mark on an inverted fill (`text.primary`): paints `background.base` instead of `text.primary`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /** Accessible name ("Galaxy"). Without it the mark is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`. */
+    style?: CSSProperties;
+}
+/** The Galaxy brand mark, painted `text.primary`. Decorative unless `ariaLabel` is set. */
+declare const GalaxyLogomark: import("react").ForwardRefExoticComponent<GalaxyLogomarkProps & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyLogomark;

package/dist/brand/GalaxyLogomark.js

@@ -0,0 +1,41 @@
+import { BRAND_MARK_CSS, BRAND_MARK_INVERSE_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyLogomark.tsx
+/**
+* The Galaxy brand mark: the two-circle, one-ribbon glyph as one inline SVG. It paints with the
+* monochrome fill (`color.solid.primary.background`, which is `text.primary`: the 1.x look). Color
+* is CSS (`fill="currentColor"`), so it is SSR-safe and a theme switch needs no re-render. 1.x swapped a dark and a light svgr asset by reading the theme in JS.
+*/
+/**
+* The two circles (top left, bottom right): the `d` of the first two `<path>`s of the 1.x
+* `galaxy-logomark-dark.svg`, verbatim, joined (each starts with its own `M`).
+*/
+var GALAXY_LOGOMARK_CIRCLES_PATH = "M239.88,479.75c132.27,0,239.88-107.61,239.88-239.88S372.14,0,239.88,0,0,107.61,0,239.88s107.61,239.88,239.88,239.88M840.12,600.25c-132.27,0-239.88,107.61-239.88,239.88s107.61,239.88,239.88,239.88,239.88-107.61,239.88-239.88-107.61-239.88-239.88-239.88";
+/** The ribbon joining them: the `d` of the third `<path>` of the 1.x asset, verbatim. */
+var GALAXY_LOGOMARK_RIBBON_PATH = "M473.59,894.23c27.96-103.95.03-195.9,112.41-308.28,112.37-112.38,204.13-84.39,308.07-112.32,8.08-1.87,16.02-4.15,23.77-6.81.07-.02.13-.04.19-.06h.01c94.13-32.43,161.95-121.88,161.95-226.88C1080,107.61,972.39,0,840.12,0,735.12,0,645.68,67.82,613.25,161.95h-.01c-.03.1-.05.18-.08.26-2.65,7.72-4.92,15.61-6.78,23.67-27.93,103.9-.72,196.5-112.24,308.02-111.53,111.52-204.35,84.54-308.26,112.48-8.06,1.86-15.95,4.13-23.67,6.78-.08.02-.16.05-.25.08h-.01C67.82,645.68,0,735.13,0,840.13,0,972.39,107.61,1079.99,239.88,1079.99c105,0,194.46-67.82,226.88-161.95,0,0,0,0,0,0,0-.02,0-.04.01-.06,1.66-4.8,3.16-9.67,4.51-14.6.83-3.02,1.59-6.07,2.3-9.14";
+/** The Galaxy brand mark, painted `text.primary`. Decorative unless `ariaLabel` is set. */
+var GalaxyLogomark = forwardRef(function GalaxyLogomark({ size = 20, isInverse = false, ariaLabel, id, className, style, ...rest }, ref) {
+	const aria = brandMarkAriaProps(ariaLabel ?? rest["aria-label"]);
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 1080 1080",
+		width: size,
+		height: size,
+		fill: "currentColor",
+		focusable: "false",
+		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_CSS, className),
+		style,
+		children: [/* @__PURE__ */ jsx("path", { d: GALAXY_LOGOMARK_CIRCLES_PATH }), /* @__PURE__ */ jsx("path", { d: GALAXY_LOGOMARK_RIBBON_PATH })]
+	});
+});
+GalaxyLogomark.displayName = "GalaxyLogomark";
+//#endregion
+export { GalaxyLogomark as default };

package/dist/brand/GalaxyLogomarkAnimation.d.ts

@@ -0,0 +1,36 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyLogomarkAnimationProps extends AriaAttributes {
+    /**
+     * Width and height in px (the mark is square).
+     * @default 32
+     */
+    size?: number;
+    /**
+     * For a mark on an inverted fill (`text.primary`): paints `background.base` instead of `text.primary`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Show the still mark instead of the loop. The animation data is not loaded while paused.
+     * @default false
+     */
+    isPaused?: boolean;
+    /**
+     * Playback rate. `1` is the authored speed (one loop ≈ 7 s); `2` is twice as fast.
+     * @default 1
+     */
+    speed?: number;
+    /** Accessible name. Without it the animation is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root, merged after its own `--gx-galaxy-logomark-animation-size`. */
+    style?: CSSProperties;
+}
+/** The Galaxy mark as a looping animation, painted `text.primary`. Decorative unless named. */
+declare const GalaxyLogomarkAnimation: import("react").ForwardRefExoticComponent<GalaxyLogomarkAnimationProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default GalaxyLogomarkAnimation;

package/dist/brand/GalaxyLogomarkAnimation.js

@@ -0,0 +1,107 @@
+import { BRAND_MARK_CSS, BRAND_MARK_INVERSE_CSS, brandMarkAriaProps } from "./brandMark.js";
+import GalaxyLogomark from "./GalaxyLogomark.js";
+import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+/* empty css                                  */
+import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyLogomarkAnimation.tsx
+/**
+* The Galaxy mark drawing itself in a loop: a Lottie animation for splash and loading moments.
+* It paints like `GalaxyLogomark` (`text.primary`) and always starts as that still mark: the server
+* and first client render are the static `GalaxyLogomark`. After mount, the player (`lottie-react`,
+* an optional peer) and the ~2 MB animation data load lazily and the loop takes over in the same
+* box. With `isPaused`, under reduced motion, or when the peer is missing, it stays the still mark
+* and loads nothing. 1.x imported the player and the data statically and read the fill from JS.
+*/
+/** The box: a square of the requested size, centered content, recolored on `duration.fast`. */
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-GalaxyLogomarkAnimation-rm4g622",
+	propsAsIs: false
+});
+/**
+* The player's output fills the box and its drawn shapes take the root's color. `svg > g path`
+* repaints the shapes but not the `<defs>` mask paths, whose fill drives the reveal mask.
+*/
+var PLAYER_CSS = "gx-GalaxyLogomarkAnimation-PLAYER_CSS-p1gw38va";
+/** One load per page: the player and the data, shared by every instance. Created on first use. */
+var playerPromise;
+/**
+* The player component from a loaded `lottie-react` module. Bundlers that pre-bundle its CommonJS
+* build (Vite's dev server does) hand back the whole module as `default`, so unwrap one level.
+*/
+function lottieComponent(module) {
+	const candidate = module.default;
+	const component = typeof candidate === "function" ? candidate : candidate?.default;
+	if (typeof component !== "function") throw new Error("lottie-react: no player component");
+	return component;
+}
+/** Loads `lottie-react` and the animation data once; a failed load can be retried later. */
+async function importPlayer() {
+	const [lottie, data] = await Promise.all([import("lottie-react"), import("./assets/galaxy-logomark-animation.js")]);
+	return {
+		Lottie: lottieComponent(lottie),
+		animationData: data.default
+	};
+}
+/** The shared load, created on first use and cleared on failure so a later mount can retry. */
+function loadPlayer() {
+	playerPromise ??= importPlayer().catch((error) => {
+		playerPromise = void 0;
+		throw error;
+	});
+	return playerPromise;
+}
+/** The Galaxy mark as a looping animation, painted `text.primary`. Decorative unless named. */
+var GalaxyLogomarkAnimation = forwardRef(function GalaxyLogomarkAnimation({ size = 32, isInverse = false, isPaused = false, speed = 1, ariaLabel, id, className, style, ...rest }, ref) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const [player, setPlayer] = useState(null);
+	const lottieRef = useRef(null);
+	const shouldAnimate = !isPaused && !prefersReducedMotion;
+	useEffect(() => {
+		if (!shouldAnimate || player !== null) return;
+		let isCancelled = false;
+		const frame = requestAnimationFrame(() => {
+			loadPlayer().then((loaded) => {
+				if (!isCancelled) setPlayer(loaded);
+			}, () => {});
+		});
+		return () => {
+			isCancelled = true;
+			cancelAnimationFrame(frame);
+		};
+	}, [shouldAnimate, player]);
+	const isPlaying = shouldAnimate && player !== null;
+	useEffect(() => {
+		if (isPlaying) lottieRef.current?.setSpeed(speed);
+	}, [isPlaying, speed]);
+	const aria = brandMarkAriaProps(ariaLabel ?? rest["aria-label"]);
+	const variables = { "--gx-galaxy-logomark-animation-size": `${size}px` };
+	return /* @__PURE__ */ jsx(Root, {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		className: cx(isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_CSS, PLAYER_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: isPlaying ? /* @__PURE__ */ jsx(player.Lottie, {
+			lottieRef,
+			animationData: player.animationData,
+			loop: true,
+			autoplay: true
+		}) : /* @__PURE__ */ jsx(GalaxyLogomark, {
+			size,
+			isInverse
+		})
+	});
+});
+GalaxyLogomarkAnimation.displayName = "GalaxyLogomarkAnimation";
+//#endregion
+export { GalaxyLogomarkAnimation as default };

package/dist/brand/GalaxyWordmark.d.ts

@@ -0,0 +1,30 @@
+import { type AriaAttributes, type CSSProperties } from "react";
+export interface GalaxyWordmarkProps extends AriaAttributes {
+    /**
+     * Height of the wordmark in px. The width follows the aspect ratio (≈ 3.04 × height).
+     * @default 20
+     */
+    size?: number;
+    /**
+     * For a wordmark on an inverted fill (`text.primary`): paints `background.base`.
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Accessible name. Pass `""` to make it decorative (`aria-hidden`) when the name is already in
+     * the surrounding text.
+     * @default Galaxy
+     */
+    ariaLabel?: string;
+    /** DOM id on the `<svg>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<svg>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the `<svg>`. */
+    className?: string;
+    /** Inline style on the `<svg>`. */
+    style?: CSSProperties;
+}
+/** The Galaxy wordmark, painted `text.primary`. Labelled "Galaxy" unless `ariaLabel=""`. */
+declare const GalaxyWordmark: import("react").ForwardRefExoticComponent<GalaxyWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
+export default GalaxyWordmark;

package/dist/brand/GalaxyWordmark.js

@@ -0,0 +1,63 @@
+import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/brand/GalaxyWordmark.tsx
+/**
+* The word "galaxy" in the Galaxy brand lettering, as one inline SVG. It is type, so it paints
+* with the monochrome hierarchy (`text.primary`), like the `GalaxyLogomark` beside it. Color is
+* CSS (`fill="currentColor"`), so it is SSR-safe and follows the theme with no re-render. 1.x swapped a dark and a light svgr
+* asset by reading the theme in JS.
+*/
+/** Width ÷ height of the artwork (its viewBox, `0 0 1080 355.84`). */
+var GALAXY_WORDMARK_ASPECT_RATIO = 1080 / 355.84;
+/** "g". */
+var GALAXY_WORDMARK_G_PATH = "M55.16,176.18c0,40.12,20.28,53.2,46.88,53.2s46.01-13.08,46.01-53.2-19.41-53.2-46.01-53.2-46.88,13.08-46.88,53.2M98.34,355.84c-63.01,0-98.34-22.68-98.34-74.13h61.05c-.87,25.95,15.26,30.96,40.99,30.96s45.35-6.98,45.35-37.72v-17.66c-11.56,11.34-28.56,18.97-50.58,18.97C37.5,276.26,0,243.55,0,176.18s38.81-102.26,90.92-102.26c22.68,0,42.3,8.94,56.47,22.02v-18.53h55.6v197.54c0,58.22-37.29,80.89-104.66,80.89";
+/** The first "a". */
+var GALAXY_WORDMARK_FIRST_A_PATH = "M300.69,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M346.69,255.11c-15.26,15.7-32.71,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z";
+/** "l": `<rect x width height>`. */
+var GALAXY_WORDMARK_L_RECT = {
+	x: "419.1",
+	width: "55.6",
+	height: "274.95"
+};
+/** The second "a". */
+var GALAXY_WORDMARK_SECOND_A_PATH = "M572.39,231.56c19.62,0,37.94-8.07,46.01-27.47v-31.4c-9.59,10.25-21.59,17.88-40.77,21.8l-10.9,2.18c-14.83,3.05-20.93,7.41-20.93,17.88s10.47,17.01,26.6,17.01M618.39,255.11c-15.26,15.7-32.7,23.33-59.09,23.33-41.65,0-71.08-23.77-71.08-63.89,0-32.71,17.88-48.62,74.79-58.22l31.18-5.23c19.19-3.27,24.2-7.2,24.2-15.92s-3.49-14.83-32.05-14.83c-21.37,0-37.94,6.11-35.76,26.6h-57.56c-3.93-53.2,45.57-73.04,92.89-73.04,55.6,0,87.87,21.59,87.87,72.82v128.21h-55.38v-19.84Z";
+/** "x": `<polygon points>`. */
+var GALAXY_WORDMARK_X_POINTS = "776.09 221.75 739.25 274.95 672.53 274.95 742.3 176.61 673.62 77.4 740.12 77.4 776.75 131.26 813.38 77.4 879.01 77.4 809.24 176.39 878.57 274.95 812.29 274.95 776.09 221.75";
+/** "y". */
+var GALAXY_WORDMARK_Y_PATH = "M1080,77.4l-82.85,226.98c-10.25,27.91-20.93,51.46-52.55,51.46-13.08,0-27.47-3.05-41.43-7.2v-50.37l10.03,3.05c20.06,6.11,29,1.31,34.01-12.65l5.45-15.26-75.44-196.02h60.83l41.21,120.58,42.74-120.58h58Z";
+/** The Galaxy wordmark, painted `text.primary`. Labelled "Galaxy" unless `ariaLabel=""`. */
+var GalaxyWordmark = forwardRef(function GalaxyWordmark({ size = 20, isInverse = false, ariaLabel = "Galaxy", id, className, style, ...rest }, ref) {
+	const aria = brandMarkAriaProps(ariaLabel);
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		id,
+		role: aria.role,
+		"aria-label": aria["aria-label"],
+		"aria-hidden": aria["aria-hidden"],
+		...rest,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 1080 355.84",
+		width: size * GALAXY_WORDMARK_ASPECT_RATIO,
+		height: size,
+		fill: "currentColor",
+		focusable: "false",
+		className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_G_PATH }), /* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_FIRST_A_PATH })] }),
+			/* @__PURE__ */ jsx("rect", {
+				x: GALAXY_WORDMARK_L_RECT.x,
+				width: GALAXY_WORDMARK_L_RECT.width,
+				height: GALAXY_WORDMARK_L_RECT.height
+			}),
+			/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_SECOND_A_PATH }),
+			/* @__PURE__ */ jsx("polygon", { points: GALAXY_WORDMARK_X_POINTS }),
+			/* @__PURE__ */ jsx("path", { d: GALAXY_WORDMARK_Y_PATH })
+		]
+	});
+});
+GalaxyWordmark.displayName = "GalaxyWordmark";
+//#endregion
+export { GalaxyWordmark as default };