@reltio/design 0.2.0 → 0.3.0

package/charts/SetOverlapChart/components/IntersectionsMatrix/index.js

@@ -0,0 +1 @@
+export { IntersectionsMatrix } from "./IntersectionsMatrix";

package/charts/SetOverlapChart/components/SetsChart/SetsChart.d.ts

@@ -0,0 +1,2 @@
+import type { SetsChartProps } from "./SetsChart.types";
+export declare const SetsChart: ({ mode, sets, intersections, width, yScale, transform, labels, hoveredSet, hoveredIntersection, hoverAreaWidth, axisLabel, onSetHover, }: SetsChartProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/components/SetsChart/SetsChart.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { scaleLinear } from "d3-scale";
+import { useMemo } from "react";
+import { classNames } from "../../../../utils/classNames";
+import { GAP_BEFORE_LEFT_BAR, SET_BAR_HEIGHT, SET_LABEL_SIZE, TEXT_GAP, } from "../../constants";
+import { SetsChartAxis } from "../SetsChartAxis";
+import styles from "./SetsChart.module.css";
+export const SetsChart = ({ mode, sets, intersections, width, yScale, transform, labels, hoveredSet, hoveredIntersection, hoverAreaWidth, axisLabel, onSetHover, }) => {
+    const hoveredElementsSet = useMemo(() => {
+        const elements = hoveredIntersection?.elements || hoveredSet?.elements;
+        return elements ? new Set(elements) : null;
+    }, [hoveredIntersection, hoveredSet]);
+    const setOverlappingColumns = useMemo(() => {
+        const result = {};
+        sets.forEach((set) => {
+            result[set.name] = intersections.filter((intersection) => intersection.sets.includes(set.name));
+        });
+        return result;
+    }, [sets, intersections]);
+    const xScale = useMemo(() => {
+        const maxSetSize = sets.length > 0 ? Math.max(...sets.map((set) => set.size)) : 0;
+        return scaleLinear().domain([0, maxSetSize]).range([0, width]);
+    }, [width, sets]);
+    const rootStyle = {
+        "--set-label-size": SET_LABEL_SIZE,
+    };
+    return (_jsxs("g", { transform: transform, style: rootStyle, role: "listbox", "aria-label": "Set bars", children: [_jsx(SetsChartAxis, { width: width, label: axisLabel }), sets.map((set, i) => {
+                const { name, size, elements } = set;
+                const label = labels[i];
+                const height = yScale.bandwidth();
+                const y = (yScale(name) ?? 0) + height / 2 - SET_BAR_HEIGHT / 2;
+                const lineY = (yScale(name) ?? 0) + height;
+                let barSize = size;
+                if (mode === "distinctIntersection" &&
+                    (hoveredIntersection || hoveredSet)) {
+                    if (hoveredIntersection) {
+                        const containsSet = hoveredIntersection?.sets.includes(name);
+                        barSize = containsSet ? hoveredIntersection?.size : 0;
+                    }
+                    else if (hoveredSet && setOverlappingColumns[hoveredSet.name]) {
+                        const hoveredSetOverlappingColumns = new Set(setOverlappingColumns[hoveredSet.name]);
+                        barSize = setOverlappingColumns[set.name]
+                            .filter((item) => hoveredSetOverlappingColumns.has(item))
+                            .reduce((acc, item) => acc + item.size, 0);
+                    }
+                }
+                else {
+                    barSize = hoveredElementsSet
+                        ? elements.filter((el) => hoveredElementsSet.has(el)).length
+                        : size;
+                }
+                return (_jsxs("g", { children: [_jsx("rect", { className: classNames(styles.setsBarBackground), x: 0, y: y, width: width, height: SET_BAR_HEIGHT }), _jsx("rect", { className: classNames(styles.setsBarDimmed), x: width - xScale(size), y: y, width: xScale(size), height: SET_BAR_HEIGHT }), _jsx("rect", { className: classNames(styles.setsBar), x: width - xScale(barSize), y: y, width: xScale(barSize), height: SET_BAR_HEIGHT }), i !== sets.length - 1 && (_jsx("line", { className: classNames(styles.gridLine), x1: 0, x2: hoverAreaWidth, y1: lineY, y2: lineY })), _jsx("text", { className: classNames(styles.setsLabel), x: width + TEXT_GAP, y: (yScale(name) ?? 0) + height / 2, children: label }), _jsx("rect", { className: classNames(styles.hoverBar), "data-reltio-id": "set-hover-area", role: "option", "aria-selected": hoveredSet === set, x: -GAP_BEFORE_LEFT_BAR + 1, y: yScale(name), width: hoverAreaWidth - 2, height: height, tabIndex: 0, "aria-label": `Set: ${name}, size: ${size}`, onMouseEnter: () => onSetHover(set), onMouseLeave: () => onSetHover(null), onFocus: () => onSetHover(set), onBlur: () => onSetHover(null) })] }, `set-group-${name}`));
+            })] }));
+};

package/charts/SetOverlapChart/components/SetsChart/SetsChart.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './SetsChart.module.css.json';
+export default json;

package/charts/SetOverlapChart/components/SetsChart/SetsChart.module.css.js

@@ -0,0 +1,55 @@
+import styleInject from 'style-inject';
+import json from './SetsChart.module.css.json';
+styleInject(`
+.SetsChart_setsBarBackground__L29wd {
+	fill: var(--reltio-color-brand-blue);
+	opacity: 0.08;
+	transition:
+		x ease-in-out 0.3s,
+		width ease-in-out 0.3s;
+}
+
+.SetsChart_setsBarDimmed__L29wd {
+	fill: var(--reltio-color-border-3);
+	transition:
+		x ease-in-out 0.3s,
+		width ease-in-out 0.3s;
+}
+
+.SetsChart_setsBar__L29wd {
+	fill: var(--reltio-color-brand-blue);
+	transition:
+		x ease-in-out 0.3s,
+		width ease-in-out 0.3s;
+}
+
+.SetsChart_hoverBar__L29wd {
+	fill: transparent;
+	stroke-width: 1px;
+	cursor: pointer;
+	stroke: var(--reltio-color-brand-blue);
+	opacity: 0;
+	transition: opacity ease-in-out 0.3s;
+	outline: none;
+
+	&:hover,
+	&:focus-visible {
+		opacity: 1;
+	}
+}
+
+.SetsChart_setsLabel__L29wd {
+	font-size: var(--set-label-size);
+	fill: var(--reltio-color-text);
+	text-anchor: start;
+	dominant-baseline: middle;
+	transition: all ease-in-out 0.3s;
+}
+
+.SetsChart_gridLine__L29wd {
+	stroke: var(--reltio-color-border-black);
+	opacity: 0.04;
+	stroke-width: 1px;
+}
+`);
+export default json;

package/charts/SetOverlapChart/components/SetsChart/SetsChart.module.css.json

@@ -0,0 +1 @@
+{ "setsBarBackground": "SetsChart_setsBarBackground__L29wd", "setsBarDimmed": "SetsChart_setsBarDimmed__L29wd", "setsBar": "SetsChart_setsBar__L29wd", "hoverBar": "SetsChart_hoverBar__L29wd", "setsLabel": "SetsChart_setsLabel__L29wd", "gridLine": "SetsChart_gridLine__L29wd" }

package/charts/SetOverlapChart/components/SetsChart/SetsChart.types.d.ts

@@ -0,0 +1,16 @@
+import type { ScaleBand } from "d3-scale";
+import type { DataSet, Intersection, SetOverlapChartMode } from "../../SetOverlapChart.types";
+export type SetsChartProps = {
+    mode: SetOverlapChartMode;
+    sets: DataSet[];
+    intersections: Intersection[];
+    width: number;
+    yScale: ScaleBand<string>;
+    labels: string[];
+    transform?: string;
+    hoverAreaWidth: number;
+    hoveredSet?: DataSet | null;
+    hoveredIntersection?: Intersection | null;
+    axisLabel?: string;
+    onSetHover: (set: DataSet | null) => void;
+};

package/charts/SetOverlapChart/components/SetsChart/SetsChart.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/SetsChart/index.d.ts

@@ -0,0 +1 @@
+export { SetsChart } from "./SetsChart";

package/charts/SetOverlapChart/components/SetsChart/index.js

@@ -0,0 +1 @@
+export { SetsChart } from "./SetsChart";

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.d.ts

@@ -0,0 +1,2 @@
+import type { SetsChartAxisProps } from "./SetsChartAxis.types";
+export declare const SetsChartAxis: ({ width, label }: SetsChartAxisProps) => import("react/jsx-runtime").JSX.Element;

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../../../utils/classNames";
+import styles from "./SetsChartAxis.module.css";
+const AXIS_LABEL_OFFSET = 12;
+const AXIS_TICK_LABEL_OFFSET = 9;
+const LABEL_OFFSET = AXIS_LABEL_OFFSET + AXIS_TICK_LABEL_OFFSET;
+export const SetsChartAxis = ({ width, label }) => {
+    return (_jsxs("g", { children: [_jsxs("g", { transform: "translate(0,0)", children: [_jsx("line", { y2: -6, className: classNames(styles.axisTick) }), _jsx("text", { x: 0, y: -AXIS_TICK_LABEL_OFFSET, className: classNames(styles.axisTickLabel), children: "100%" })] }), _jsxs("g", { transform: `translate(${width},0)`, children: [_jsx("line", { y2: -6, className: classNames(styles.axisTick) }), _jsx("text", { x: 0, y: -AXIS_TICK_LABEL_OFFSET, className: classNames(styles.axisTickLabel), children: "0%" })] }), label && (_jsx("text", { className: classNames(styles.axisLabel), transform: `translate(${width / 2},${-LABEL_OFFSET})`, children: label }))] }));
+};

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './SetsChartAxis.module.css.json';
+export default json;

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.module.css.js

@@ -0,0 +1,24 @@
+import styleInject from 'style-inject';
+import json from './SetsChartAxis.module.css.json';
+styleInject(`
+.SetsChartAxis_axisTick__L29wd {
+	stroke: var(--reltio-color-border-black);
+	stroke-width: 1px;
+	opacity: 0.54;
+}
+
+.SetsChartAxis_axisTickLabel__L29wd {
+	font-size: 10px;
+	fill: var(--reltio-color-text);
+	opacity: 0.54;
+	text-anchor: middle;
+}
+
+.SetsChartAxis_axisLabel__L29wd {
+	fill: var(--reltio-color-text);
+	opacity: 0.54;
+	font-size: 12px;
+	text-anchor: middle;
+}
+`);
+export default json;

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.module.css.json

@@ -0,0 +1 @@
+{ "axisTick": "SetsChartAxis_axisTick__L29wd", "axisTickLabel": "SetsChartAxis_axisTickLabel__L29wd", "axisLabel": "SetsChartAxis_axisLabel__L29wd" }

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.types.d.ts

@@ -0,0 +1,4 @@
+export type SetsChartAxisProps = {
+    width: number;
+    label?: string;
+};

package/charts/SetOverlapChart/components/SetsChartAxis/SetsChartAxis.types.js

@@ -0,0 +1 @@
+export {};

package/charts/SetOverlapChart/components/SetsChartAxis/index.d.ts

@@ -0,0 +1 @@
+export { SetsChartAxis } from "./SetsChartAxis";

package/charts/SetOverlapChart/components/SetsChartAxis/index.js

@@ -0,0 +1 @@
+export { SetsChartAxis } from "./SetsChartAxis";

package/charts/SetOverlapChart/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const TOP_GAP = 24;
+export declare const TEXT_GAP = 16;
+export declare const GAP_BETWEEN_TABLE_AND_CHART = 8;
+export declare const GAP_BEFORE_LEFT_BAR = 12;
+export declare const AXIS_TICK_LABEL_SIZE = "12px";
+export declare const SET_LABEL_SIZE = "13px";
+export declare const SET_BAR_HEIGHT = 12;
+export declare const MATRIX_ROW_HEIGHT = 29;
+export declare const MIN_MATRIX_COLUMN_WIDTH = 28;
+export declare const MIN_INTERSECTION_CHART_HEIGHT = 120;
+export declare const MIN_SETS_CHART_WIDTH = 100;
+export declare const MAX_SETS_CHART_WIDTH = 200;
+export declare const MAX_CHARACTERS = 20;
+export declare const MIN_CHARACTERS = 8;

package/charts/SetOverlapChart/constants.js

@@ -0,0 +1,16 @@
+// Gaps
+export const TOP_GAP = 24;
+export const TEXT_GAP = 16;
+export const GAP_BETWEEN_TABLE_AND_CHART = 8;
+export const GAP_BEFORE_LEFT_BAR = 12;
+// Sizes
+export const AXIS_TICK_LABEL_SIZE = "12px";
+export const SET_LABEL_SIZE = "13px";
+export const SET_BAR_HEIGHT = 12;
+export const MATRIX_ROW_HEIGHT = 29;
+export const MIN_MATRIX_COLUMN_WIDTH = 28;
+export const MIN_INTERSECTION_CHART_HEIGHT = 120;
+export const MIN_SETS_CHART_WIDTH = 100;
+export const MAX_SETS_CHART_WIDTH = 200;
+export const MAX_CHARACTERS = 20;
+export const MIN_CHARACTERS = 8;

package/charts/SetOverlapChart/helpers.d.ts

@@ -0,0 +1,15 @@
+import type { DataSet } from "./SetOverlapChart.types";
+export declare const measureText: (text: string, fontSize: string) => number;
+export declare const truncateLabels: (sets: DataSet[], maxLabelsWidth: number) => {
+    labels: string[];
+    maxWidth: number;
+};
+export declare const createMatrixXScale: (intersectionCount: number, width: number) => import("d3-scale").ScaleBand<string>;
+export declare const createMatrixYScale: (setNames: string[], height: number) => import("d3-scale").ScaleBand<string>;
+export declare const getEmptyGridDimensions: (width: number, height: number) => {
+    width: number;
+    height: number;
+    left: number;
+};
+export declare const createEmptyGridXScale: (width: number) => import("d3-scale").ScaleBand<string>;
+export declare const createEmptyGridYScale: (height: number) => import("d3-scale").ScaleLinear<number, number, never>;

package/charts/SetOverlapChart/helpers.js

@@ -0,0 +1,52 @@
+import { scaleBand, scaleLinear } from "d3-scale";
+import { MAX_CHARACTERS, MIN_CHARACTERS, SET_LABEL_SIZE, TOP_GAP, } from "./constants";
+const ctxCache = new Map();
+const getContext = (fontSize) => {
+    const cached = ctxCache.get(fontSize);
+    if (cached)
+        return cached;
+    if (typeof OffscreenCanvas !== "undefined") {
+        const ctx = new OffscreenCanvas(0, 0).getContext("2d");
+        if (ctx) {
+            ctx.font = `${fontSize} "Inter", sans-serif`;
+            ctxCache.set(fontSize, ctx);
+            return ctx;
+        }
+    }
+    return null;
+};
+export const measureText = (text, fontSize) => {
+    const ctx = getContext(fontSize);
+    if (ctx)
+        return ctx.measureText(text).width;
+    return text.length * Number.parseFloat(fontSize) * 0.6;
+};
+export const truncateLabels = (sets, maxLabelsWidth) => {
+    const newTruncatedLabels = [];
+    let maxWidth = 0;
+    sets.forEach(({ name }) => {
+        let truncatedText = name.length > MAX_CHARACTERS
+            ? `${name.slice(0, MAX_CHARACTERS)}...`
+            : name;
+        let textWidth = measureText(truncatedText, SET_LABEL_SIZE);
+        while (textWidth > maxLabelsWidth &&
+            truncatedText.length > MIN_CHARACTERS) {
+            truncatedText = `${truncatedText.slice(0, -4)}...`;
+            textWidth = measureText(truncatedText, SET_LABEL_SIZE);
+        }
+        newTruncatedLabels.push(truncatedText);
+        maxWidth = Math.max(maxWidth, textWidth);
+    });
+    return { labels: newTruncatedLabels, maxWidth };
+};
+export const createMatrixXScale = (intersectionCount, width) => scaleBand([0, width])
+    .domain(Array.from({ length: intersectionCount }, (_, i) => String(i)))
+    .paddingInner(0.2);
+export const createMatrixYScale = (setNames, height) => scaleBand([0, height]).domain(setNames);
+export const getEmptyGridDimensions = (width, height) => ({
+    width: width * 0.9,
+    height: height - TOP_GAP * 2,
+    left: (width - width * 0.9) / 2,
+});
+export const createEmptyGridXScale = (width) => scaleBand().domain([]).range([0, width]);
+export const createEmptyGridYScale = (height) => scaleLinear().domain([0, 1000]).range([height, 0]);

package/charts/SetOverlapChart/index.d.ts

@@ -0,0 +1,2 @@
+export { SetOverlapChart } from "./SetOverlapChart";
+export type { DataSet, Intersection, SetOverlapChartMode, SetOverlapChartProps, } from "./SetOverlapChart.types";

package/charts/SetOverlapChart/index.js

@@ -0,0 +1 @@
+export { SetOverlapChart } from "./SetOverlapChart";

package/charts/SetOverlapChart/useSetOverlapChartSizes.d.ts

@@ -0,0 +1,19 @@
+import type { DataSet, Intersection } from "./SetOverlapChart.types";
+type Props = {
+    width: number;
+    height: number;
+    intersections: Intersection[];
+    sets: DataSet[];
+};
+export declare const useSetOverlapChartSizes: ({ width, height, intersections, sets, }: Props) => {
+    labels: string[];
+    svgWidth: number;
+    svgHeight: number;
+    intersectionsChartWidth: number;
+    intersectionsChartHeight: number;
+    matrixY: number;
+    matrixHeight: number;
+    leftPadding: number;
+    setsChartWidth: number;
+};
+export {};

package/charts/SetOverlapChart/useSetOverlapChartSizes.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { GAP_BEFORE_LEFT_BAR, GAP_BETWEEN_TABLE_AND_CHART, MATRIX_ROW_HEIGHT, MAX_SETS_CHART_WIDTH, MIN_INTERSECTION_CHART_HEIGHT, MIN_MATRIX_COLUMN_WIDTH, MIN_SETS_CHART_WIDTH, TEXT_GAP, TOP_GAP, } from "./constants";
+import { truncateLabels } from "./helpers";
+export const useSetOverlapChartSizes = ({ width, height, intersections, sets, }) => useMemo(() => {
+    const minMatrixWidth = intersections.length * MIN_MATRIX_COLUMN_WIDTH * 1.2;
+    const matrixHeight = sets.length * MATRIX_ROW_HEIGHT;
+    const availableLabelsWidth = width -
+        minMatrixWidth -
+        TEXT_GAP * 2 -
+        GAP_BEFORE_LEFT_BAR -
+        MIN_SETS_CHART_WIDTH;
+    const { labels, maxWidth: labelsWidth } = truncateLabels(sets, availableLabelsWidth);
+    const availableSetsChartWidth = width - minMatrixWidth - TEXT_GAP * 2 - GAP_BEFORE_LEFT_BAR - labelsWidth;
+    const setsChartWidth = Math.min(Math.max(availableSetsChartWidth, MIN_SETS_CHART_WIDTH), MAX_SETS_CHART_WIDTH);
+    const leftPadding = setsChartWidth + labelsWidth + TEXT_GAP * 2 + GAP_BEFORE_LEFT_BAR;
+    const intersectionsChartWidth = Math.max(minMatrixWidth, width - leftPadding);
+    const intersectionsChartHeight = Math.max(MIN_INTERSECTION_CHART_HEIGHT, height - TOP_GAP - matrixHeight - GAP_BETWEEN_TABLE_AND_CHART);
+    const svgWidth = leftPadding + intersectionsChartWidth;
+    const svgHeight = intersectionsChartHeight +
+        matrixHeight +
+        TOP_GAP +
+        GAP_BETWEEN_TABLE_AND_CHART;
+    const matrixY = svgHeight - matrixHeight - 1;
+    return {
+        labels,
+        svgWidth,
+        svgHeight,
+        intersectionsChartWidth,
+        intersectionsChartHeight,
+        matrixY,
+        matrixHeight,
+        leftPadding,
+        setsChartWidth,
+    };
+}, [width, height, intersections, sets]);

package/charts/index.d.ts

@@ -1 +1,2 @@
 export * from "./LineChart";
+export * from "./SetOverlapChart";

package/charts/index.js

@@ -1 +1,2 @@
 export * from "./LineChart";
+export * from "./SetOverlapChart";

package/components/AppSelector/AppSelector.d.ts

@@ -0,0 +1,5 @@
+import type { AppSelectorProps } from "./AppSelector.types";
+/** Navigation popover for switching between Reltio platform applications.
+ * Displays apps grouped by category in a grid layout.
+ */
+export declare const AppSelector: ({ apps, env, tenant, className, positionArea, ...rest }: AppSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/components/AppSelector/AppSelector.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/Button";
+import { Divider } from "../../components/Divider";
+import { Popover } from "../../components/Popover";
+import { Applications } from "../../icons/Applications";
+import { Link } from "../../icons/Link";
+import { classNames } from "../../utils/classNames";
+import styles from "./AppSelector.module.css";
+const DEFAULT_CATEGORY = "Applications";
+/** Navigation popover for switching between Reltio platform applications.
+ * Displays apps grouped by category in a grid layout.
+ */
+export const AppSelector = ({ apps, env, tenant, className, positionArea = "right span-top", ...rest }) => {
+    const validApps = apps.filter((app) => app.name && app.uri);
+    const groups = Object.groupBy(validApps, ({ category }) => category || DEFAULT_CATEGORY);
+    return (_jsx("nav", { className: classNames(className), "aria-label": "Applications", ...rest, children: _jsx(Popover, { trigger: _jsx(Button, { variant: "text", "aria-label": "Applications", children: _jsx(Applications, {}) }), positionArea: positionArea, children: _jsx("div", { className: classNames(styles.content), children: Object.entries(groups).map(([category, apps]) => (_jsxs("div", { className: classNames(styles.group), children: [_jsx(Divider, { className: classNames(styles.divider), children: category }), _jsx("div", { className: classNames(styles.grid), children: apps?.map((app) => (_jsxs("a", { href: resolveUri(app.uri, env, tenant), target: "_blank", rel: "noopener noreferrer", className: classNames(styles.app), children: [app.icon ? (_jsx("img", { src: app.icon, alt: "", className: classNames(styles.appIcon) })) : (_jsx(Link, { size: "xlarge" })), app.name] }, app.name))) })] }, category))) }) }) }));
+};
+const resolveUri = (uri, env, tenant) => uri
+    ?.replaceAll("${environment}", String(env))
+    .replaceAll("${tenant}", String(tenant));

package/components/AppSelector/AppSelector.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './AppSelector.module.css.json';
+export default json;

package/components/AppSelector/AppSelector.module.css.js

@@ -0,0 +1,61 @@
+import styleInject from 'style-inject';
+import json from './AppSelector.module.css.json';
+styleInject(`
+.AppSelector_content__L29wd {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px;
+	width: 316px;
+	max-height: 485px;
+	overflow-y: auto;
+	box-sizing: border-box;
+}
+
+.AppSelector_group__L29wd {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.AppSelector_grid__L29wd {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	column-gap: 16px;
+	row-gap: 24px;
+}
+
+.AppSelector_divider__L29wd {
+	margin-left: 12px;
+}
+
+.AppSelector_app__L29wd {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+	border-radius: 12px;
+	text-align: center;
+	font-size: 13px;
+	line-height: 1.3;
+	color: var(--reltio-color-text);
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.AppSelector_app__L29wd:hover {
+	background: var(--reltio-color-bg-transparent-1);
+}
+
+.AppSelector_appIcon__L29wd {
+	width: 48px;
+	height: 48px;
+	object-fit: contain;
+}
+
+.AppSelector_error__L29wd {
+	margin-bottom: -8px;
+}
+`);
+export default json;

package/components/AppSelector/AppSelector.module.css.json

@@ -0,0 +1 @@
+{ "content": "AppSelector_content__L29wd", "group": "AppSelector_group__L29wd", "grid": "AppSelector_grid__L29wd", "divider": "AppSelector_divider__L29wd", "app": "AppSelector_app__L29wd", "appIcon": "AppSelector_appIcon__L29wd", "error": "AppSelector_error__L29wd" }

package/components/AppSelector/AppSelector.types.d.ts

@@ -0,0 +1,29 @@
+import type { HtmlProps } from "../../utils/types";
+export type AppEntry = {
+    /** Application display name. Apps without a name are ignored. */
+    name?: string;
+    /** URL opened in a new tab on click. Apps without a URI are ignored. */
+    uri?: string;
+    /** Absolute URL to the application icon (SVG). Falls back to a generic link icon. */
+    icon?: string;
+    /** Application category for grouping in navigation.
+     * @default "Applications"
+     */
+    category?: string;
+};
+export type AppSelectorProps = HtmlProps<"div", {
+    /** List of apps to display, grouped by category.
+     * Apps missing `name` or `uri` are silently ignored.
+     * The list of available apps for a given tenant
+     * can be retrieved from Reltio Config Service.
+     */
+    apps: AppEntry[];
+    /** Environment identifier substituted into URI templates (`${environment}`). */
+    env?: string;
+    /** Tenant identifier substituted into URI templates (`${tenant}`). */
+    tenant?: string;
+    /** CSS `position-area` value controlling popover placement relative to the trigger.
+     * @default "right span-top"
+     */
+    positionArea?: string;
+}>;

package/components/AppSelector/AppSelector.types.js

@@ -0,0 +1 @@
+export {};

package/components/AppSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AppSelector";
+export type * from "./AppSelector.types";

package/components/AppSelector/index.js

@@ -0,0 +1 @@
+export * from "./AppSelector";

package/components/Button/Button.d.ts

@@ -5,5 +5,8 @@ import type { ButtonProps } from "./Button.types";
  * A flexible, accessible button component that supports multiple variants
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
+ *
+ * Automatically switches to circular icon-only layout when children
+ * is a single React component element.
  */
 export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, href, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { classNames } from "../../utils/classNames";
 import styles from "./Button.module.css";
 /**
@@ -8,6 +8,9 @@ import styles from "./Button.module.css";
  * A flexible, accessible button component that supports multiple variants
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
+ *
+ * Automatically switches to circular icon-only layout when children
+ * is a single React component element.
  */
 export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, href, type = "button", ...rest }) => {
     const buttonRef = useRef(null);
@@ -19,8 +22,11 @@ export const Button = ({ variant = "filled", color = "inherited", size = "medium
             buttonRef.current.blur();
         }
     }, [disabled]);
-    // Compose className using classNames utility
-    const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, className);
+    const isIconOnly = React.Children.count(children) === 1 &&
+        React.isValidElement(children) &&
+        typeof children.type !== "string" &&
+        children.type !== React.Fragment;
+    const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, isIconOnly && styles.iconOnly, className);
     // Render as anchor if href is provided
     if (href) {
         return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, "aria-disabled": disabled ? true : undefined, ...rest, children: children }));

package/components/Button/Button.module.css.js

@@ -115,20 +115,20 @@ styleInject(`
 /* Size: Small */
 .Button_small__L29wd {
 	min-height: 32px;
-	padding: 8px 16px;
+	padding: 8px 12px;
 	font-size: 0.875rem;
 }
 
 /* Size: Medium */
 .Button_medium__L29wd {
 	min-height: 40px;
-	padding: 12px 20px;
+	padding: 12px 18px;
 }
 
 /* Size: Large */
 .Button_large__L29wd {
 	min-height: 48px;
-	padding: 16px 32px;
+	padding: 16px 24px;
 }
 
 /* State: Disabled */
@@ -137,6 +137,12 @@ styleInject(`
 	cursor: not-allowed;
 }
 
+/* Icon Only */
+.Button_iconOnly__L29wd {
+	aspect-ratio: 1;
+	padding: 0;
+}
+
 /* Full Width */
 .Button_fullWidth__L29wd {
 	width: 100%;

package/components/Button/Button.module.css.json

@@ -1 +1 @@
-{ "root": "Button_root__L29wd", "filled": "Button_filled__L29wd", "outlined": "Button_outlined__L29wd", "text": "Button_text__L29wd", "primary": "Button_primary__L29wd", "inherited": "Button_inherited__L29wd", "small": "Button_small__L29wd", "medium": "Button_medium__L29wd", "large": "Button_large__L29wd", "disabled": "Button_disabled__L29wd", "fullWidth": "Button_fullWidth__L29wd" }
+{ "root": "Button_root__L29wd", "filled": "Button_filled__L29wd", "outlined": "Button_outlined__L29wd", "text": "Button_text__L29wd", "primary": "Button_primary__L29wd", "inherited": "Button_inherited__L29wd", "small": "Button_small__L29wd", "medium": "Button_medium__L29wd", "large": "Button_large__L29wd", "disabled": "Button_disabled__L29wd", "iconOnly": "Button_iconOnly__L29wd", "fullWidth": "Button_fullWidth__L29wd" }

package/components/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import type { DividerProps } from "./Divider.types";
+export declare const Divider: ({ align, children, className, ...rest }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/components/Divider/Divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utils/classNames";
+import styles from "./Divider.module.css";
+export const Divider = ({ align = "start", children, className, ...rest }) => {
+    return (_jsx("div", { role: "separator", className: classNames(styles.root, children ? styles.labeled : styles.plain, children ? styles[align] : undefined, className), ...rest, children: children }));
+};

package/components/Divider/Divider.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Divider.module.css.json';
+export default json;