@galaxy-io/dls 1.2.6 → 1.3.0

package/README.md

@@ -2,6 +2,8 @@
 
 Galaxy Design Language System — a React component library with precompiled styles. Zero bundler configuration required.
 
+![NPM Version](https://img.shields.io/npm/v/%40galaxy-io%2Fdls)
+
 ## Installation
 
 ```bash

package/dist/avatar/Avatar.d.ts

@@ -3,6 +3,7 @@ export interface AvatarProps {
     isLoading?: boolean;
     size?: number;
     hex?: string;
+    seed?: string;
 }
-declare const Avatar: ({ img, isLoading, size, hex }: AvatarProps) => import("react").JSX.Element;
+declare const Avatar: ({ img, isLoading, size, hex, seed }: AvatarProps) => import("react").JSX.Element;
 export default Avatar;

package/dist/avatar/Avatar.js

@@ -1,26 +1,115 @@
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import { getDarkerHexColor, getLighterHexColor, getOpaqueHexColor } from "../utils/colors.js";
 import AvatarShimmer from "./AvatarShimmer.js";
-import AvatarEmpty from "./AvatarEmpty.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
+import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/avatar/Avatar.tsx
 var _exp2 = () => ({ $size }) => $size;
-var StyledAvatar = /*#__PURE__*/ styled("img")({
-	name: "StyledAvatar",
-	class: "sve5wdp",
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var _exp4 = () => ({ theme }) => theme.color.background.secondary;
+var AvatarSurface = withTheme(/*#__PURE__*/ styled("div")({
+	name: "AvatarSurface",
+	class: "ave5wdp",
 	propsAsIs: false,
-	vars: { "sve5wdp-0": [_exp2(), "px"] }
+	vars: {
+		"ave5wdp-0": [_exp2(), "px"],
+		"ave5wdp-1": [_exp3()],
+		"ave5wdp-2": [_exp4()]
+	}
+}));
+var AvatarImage = /*#__PURE__*/ styled("img")({
+	name: "AvatarImage",
+	class: "a3r0r1h",
+	propsAsIs: false
 });
-var Avatar = ({ img, isLoading, size = 16, hex }) => {
-	if (isLoading) return /* @__PURE__ */ jsx(AvatarShimmer, { size });
-	if (!img) return /* @__PURE__ */ jsx(AvatarEmpty, {
+var _exp6 = () => ({ $dotSize }) => $dotSize;
+var _exp7 = () => ({ $color }) => $color;
+var _exp8 = () => ({ $x }) => $x;
+var _exp9 = () => ({ $y }) => $y;
+var Dot = /*#__PURE__*/ styled("div")({
+	name: "Dot",
+	class: "d1n32hoy",
+	propsAsIs: false,
+	vars: {
+		"d1n32hoy-0": [_exp6(), "px"],
+		"d1n32hoy-1": [_exp7()],
+		"d1n32hoy-2": [_exp8(), "px"],
+		"d1n32hoy-3": [_exp9(), "px"]
+	}
+});
+var seededRandom = (seed) => {
+	let hash = 0;
+	for (let i = 0; i < seed.length; i++) {
+		const char = seed.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash;
+	}
+	return () => {
+		hash = hash * 1103515245 + 12345 & 2147483647;
+		return hash / 2147483647;
+	};
+};
+var Avatar = ({ img, isLoading, size = 16, hex, seed }) => {
+	const { theme } = useGalaxyTheme();
+	const [failedSrc, setFailedSrc] = useState(null);
+	const handleError = useCallback(() => {
+		setFailedSrc(img ?? null);
+	}, [img]);
+	const dots = useMemo(() => {
+		const baseHex = hex ?? theme.color.text.tertiary;
+		const colors = [
+			baseHex,
+			getLighterHexColor(baseHex, 30),
+			getDarkerHexColor(baseHex, 25),
+			getOpaqueHexColor(baseHex, .3),
+			getOpaqueHexColor(baseHex, .15)
+		];
+		const gridSize = size <= 24 ? 5 : size <= 48 ? 7 : 9;
+		const step = size / gridSize;
+		const dotSize = Math.round(step * .6);
+		const random = seededRandom(seed ?? hex ?? "default");
+		const halfCols = Math.ceil(gridSize / 2);
+		const pattern = [];
+		for (let row = 0; row < gridSize; row++) {
+			pattern[row] = [];
+			for (let col = 0; col < halfCols; col++) pattern[row][col] = { colorIndex: Math.floor(random() * colors.length) };
+			for (let col = halfCols; col < gridSize; col++) pattern[row][col] = pattern[row][gridSize - 1 - col];
+		}
+		const dotPositions = [];
+		for (let row = 0; row < gridSize; row++) for (let col = 0; col < gridSize; col++) {
+			const x = col * step + (step - dotSize) / 2;
+			const y = row * step + (step - dotSize) / 2;
+			dotPositions.push({
+				x,
+				y,
+				color: colors[pattern[row][col].colorIndex],
+				key: `${row}-${col}`
+			});
+		}
+		return {
+			dotSize,
+			dotPositions
+		};
+	}, [
 		size,
-		hex
-	});
-	return /* @__PURE__ */ jsx(StyledAvatar, {
-		src: img,
-		alt: "Avatar",
-		$size: size
+		hex,
+		seed,
+		theme
+	]);
+	return /* @__PURE__ */ jsx(AvatarSurface, {
+		$size: size,
+		children: isLoading ? /* @__PURE__ */ jsx(AvatarShimmer, { size }) : Boolean(img) && failedSrc !== img ? /* @__PURE__ */ jsx(AvatarImage, {
+			src: img,
+			alt: "Avatar",
+			onError: handleError
+		}) : dots.dotPositions.map(({ x, y, color, key }) => /* @__PURE__ */ jsx(Dot, {
+			$dotSize: dots.dotSize,
+			$x: x,
+			$y: y,
+			$color: color
+		}, key))
 	});
 };
 //#endregion

package/dist/buttons/Button.d.ts

@@ -13,6 +13,11 @@ export interface ButtonProps {
     fillWidth?: boolean;
     isEllipsis?: boolean;
     cursor?: React.CSSProperties["cursor"];
+    /** Accessible name — required when the button renders an icon with no label. */
+    ariaLabel?: string;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+    ariaHasPopup?: boolean;
 }
 export declare enum ButtonVariant {
     PRIMARY = "PRIMARY",
@@ -27,5 +32,5 @@ export declare enum ButtonSize {
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
-declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor, }: ButtonProps) => import("react").JSX.Element;
+declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
 export default Button;

package/dist/buttons/Button.js

@@ -40,14 +40,14 @@ var _exp7 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
 };
 var _exp8 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
+	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
 };
 var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
 var _exp0 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
 var _exp1 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.tertiary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
 };
 var _exp10 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("PRIMARY_ALT", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
@@ -98,7 +98,7 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 	["MEDIUM"]: 14,
 	["LARGE"]: 16
 };
-var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor }) => {
+var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
 	const { activeTheme } = useGalaxyTheme();
 	const handleClick = useCallback((e) => {
 		if (isDisabled || isLoading) return;
@@ -163,6 +163,10 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 		disabled: isDisabled || isLoading,
 		onMouseEnter,
 		onMouseLeave,
+		"aria-label": ariaLabel,
+		"aria-expanded": ariaExpanded,
+		"aria-controls": ariaControls,
+		"aria-haspopup": ariaHasPopup,
 		children: [
 			!isIconTrailing && renderIcon(),
 			label && renderLabel(),

package/dist/charts/BarChart.d.ts

@@ -1,21 +1,31 @@
-import type { BaseChartProps } from "./types";
-export declare enum BarChartMode {
-    GROUPED = "GROUPED",
-    STACKED = "STACKED"
-}
-export interface BarChartProps extends BaseChartProps {
-    /** Stacked or grouped bar mode */
-    mode?: BarChartMode;
-    /** Corner radius for bar tops (px) */
-    barRadius?: number;
-    /** Padding between bars within a group (0-1 fraction of bandwidth) */
-    barPaddingInner?: number;
-    /** Padding around outer bar groups (0-1 fraction of step) */
-    barPaddingOuter?: number;
-    /** Show value labels on bars */
-    showValues?: boolean;
-    /** Show grid lines */
-    showGrid?: boolean;
-}
-declare const BarChart: ({ data, series, width, height, margin: marginOverride, fillWidth, aspectRatio, mode, barRadius, barPaddingInner, barPaddingOuter, valueFormatter, labelFormatter, tooltipRenderer, noTooltip, showLegend, showValues, showGrid, ariaLabel, }: BarChartProps) => import("react").JSX.Element;
+import { BarChartNormalization } from "./types";
+import type { BarChartGroupDatum, BaseCartesianChartProps, ChartSeriesStyles, ChartSize } from "./types";
+export type BarChartProps<TMetric extends string, TPivot extends string = string, TComponentKey extends string = string> = BaseCartesianChartProps & ChartSize & {
+    /**
+     * Presentation for every metric, keyed by metric.
+     *
+     * `TMetric` is inferred from these keys and from nowhere else — every data
+     * prop below wraps it in `NoInfer` — which is what turns a mistyped metric
+     * into a compile error instead of a silently missing bar.
+     */
+    series: ChartSeriesStyles<TMetric>;
+    /** Categories along the x-axis, left to right. */
+    groups: BarChartGroupDatum<NoInfer<TMetric>, NoInfer<TPivot>, NoInfer<TComponentKey>>[];
+    /** @default BarChartNormalization.NONE */
+    normalization?: BarChartNormalization;
+    /**
+     * Notified when a group is pinned or unpinned by a click.
+     *
+     * The index is a position in `groups`.
+     */
+    onPinnedChange?: (groupIndex: number | null) => void;
+};
+/**
+ * Bar chart with a three-level data model.
+ *
+ * Grouping and stacking are properties of the data rather than a mode: several
+ * `bars` in a group render side by side, several `components` in a bar stack,
+ * and a chart doing both at once needs no extra configuration.
+ */
+declare const BarChart: <TMetric extends string, TPivot extends string = string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, onPinnedChange, }: BarChartProps<TMetric, TPivot, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;