@reltio/design 0.2.0 → 0.2.1

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;

package/components/Divider/Divider.module.css.js

@@ -0,0 +1,40 @@
+import styleInject from 'style-inject';
+import json from './Divider.module.css.json';
+styleInject(`
+.Divider_root__L29wd {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+.Divider_plain__L29wd {
+	height: 1px;
+	background-color: var(--reltio-color-surface-3);
+}
+
+.Divider_labeled__L29wd {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--reltio-color-text-secondary);
+}
+
+.Divider_labeled__L29wd::before,
+.Divider_labeled__L29wd::after {
+	content: "";
+	flex: 1;
+	height: 1px;
+	background-color: var(--reltio-color-surface-3);
+}
+
+.Divider_start__L29wd::before {
+	display: none;
+}
+
+.Divider_end__L29wd::after {
+	display: none;
+}
+`);
+export default json;

package/components/Divider/Divider.module.css.json

@@ -0,0 +1 @@
+{ "root": "Divider_root__L29wd", "plain": "Divider_plain__L29wd", "labeled": "Divider_labeled__L29wd", "start": "Divider_start__L29wd", "end": "Divider_end__L29wd" }

package/components/Divider/Divider.types.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { HtmlProps } from "../../utils/types";
+export type DividerAlign = "start" | "center" | "end";
+export type DividerProps = HtmlProps<"div", {
+    /** Position of the label text relative to the line.
+     * @default "start"
+     */
+    align?: DividerAlign;
+    /** Optional label text displayed alongside the divider line. */
+    children?: React.ReactNode;
+}>;

package/components/Divider/Divider.types.js

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

package/components/Divider/index.d.ts

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

package/components/Divider/index.js

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

package/components/Popover/Popover.d.ts

@@ -0,0 +1,36 @@
+import type { PopoverProps } from "./Popover.types";
+/**
+ * Uncontrolled anchored popover built on the native Popover API and CSS Anchor Positioning.
+ *
+ * Use the `trigger` prop to provide the element that toggles the popover.
+ * Positioning is handled automatically via CSS Anchor Positioning relative
+ * to the trigger. Light dismiss (Esc + click outside) is built in.
+ *
+ * Optional `header` and `footer` props render in fixed areas — only `children`
+ * scroll when content overflows.
+ *
+ * **Auto-close on content click:** clicking any element inside the popover
+ * closes it (click bubbles to the root and triggers toggle). This is the
+ * expected behavior for menus and action lists. For interactive content
+ * (inputs, forms), call `e.stopPropagation()` on the container to prevent
+ * auto-close.
+ *
+ * **Focus management:** add a `data-autofocus` attribute to an element inside
+ * the popover to focus it when the popover opens.
+ *
+ * @example
+ * ```tsx
+ * <Popover trigger={<Button>Actions</Button>}>
+ *   <button onClick={handleEdit}>Edit</button>
+ *   <button onClick={handleDelete}>Delete</button>
+ * </Popover>
+ *
+ * // With form content — stopPropagation prevents auto-close
+ * <Popover trigger={<Button>Add Note</Button>} header="New Note">
+ *   <div onClick={e => e.stopPropagation()}>
+ *     <TextArea label="Note" data-autofocus />
+ *   </div>
+ * </Popover>
+ * ```
+ */
+export declare const Popover: ({ trigger, positionArea, onToggle, header, footer, children, className, style, ...rest }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/Popover/Popover.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./Popover.module.css";
+/**
+ * Uncontrolled anchored popover built on the native Popover API and CSS Anchor Positioning.
+ *
+ * Use the `trigger` prop to provide the element that toggles the popover.
+ * Positioning is handled automatically via CSS Anchor Positioning relative
+ * to the trigger. Light dismiss (Esc + click outside) is built in.
+ *
+ * Optional `header` and `footer` props render in fixed areas — only `children`
+ * scroll when content overflows.
+ *
+ * **Auto-close on content click:** clicking any element inside the popover
+ * closes it (click bubbles to the root and triggers toggle). This is the
+ * expected behavior for menus and action lists. For interactive content
+ * (inputs, forms), call `e.stopPropagation()` on the container to prevent
+ * auto-close.
+ *
+ * **Focus management:** add a `data-autofocus` attribute to an element inside
+ * the popover to focus it when the popover opens.
+ *
+ * @example
+ * ```tsx
+ * <Popover trigger={<Button>Actions</Button>}>
+ *   <button onClick={handleEdit}>Edit</button>
+ *   <button onClick={handleDelete}>Delete</button>
+ * </Popover>
+ *
+ * // With form content — stopPropagation prevents auto-close
+ * <Popover trigger={<Button>Add Note</Button>} header="New Note">
+ *   <div onClick={e => e.stopPropagation()}>
+ *     <TextArea label="Note" data-autofocus />
+ *   </div>
+ * </Popover>
+ * ```
+ */
+export const Popover = ({ trigger, positionArea = "bottom", onToggle, header, footer, children, className, style, ...rest }) => {
+    const contentRef = useRef(null);
+    const isOpen = useRef(false);
+    const handleToggle = (e) => {
+        isOpen.current = e.newState === "open";
+        if (isOpen.current) {
+            const target = contentRef.current?.querySelector("[data-autofocus]");
+            target?.focus();
+        }
+        onToggle?.(e);
+    };
+    const handleClick = () => {
+        if (isOpen.current) {
+            contentRef.current?.hidePopover();
+        }
+        else {
+            contentRef.current?.showPopover();
+        }
+    };
+    return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: trigger child handles its own keyboard interaction
+    // biome-ignore lint/a11y/noStaticElementInteractions: wrapper delegates to interactive trigger child
+    _jsxs("span", { className: classNames(styles.root), onClick: handleClick, children: [trigger, _jsxs("div", { ref: contentRef, popover: "auto", className: classNames(styles.container, className), style: { ...style, positionArea }, onToggle: handleToggle, ...rest, children: [header && _jsx("div", { className: classNames(styles.header), children: header }), _jsx("div", { className: classNames(styles.body), children: children }), footer && _jsx("div", { className: classNames(styles.footer), children: footer })] })] }));
+};

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

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

package/components/Popover/Popover.module.css.js

@@ -0,0 +1,62 @@
+import styleInject from 'style-inject';
+import json from './Popover.module.css.json';
+styleInject(`
+.Popover_root__L29wd {
+	display: inline-flex;
+	width: fit-content;
+	anchor-scope: --trigger;
+	anchor-name: --trigger;
+}
+
+.Popover_container__L29wd {
+	position-anchor: --trigger;
+	box-sizing: border-box;
+	margin: 8px;
+	padding: 0;
+	border: 1px solid var(--reltio-color-border-2);
+	border-radius: 12px;
+	background: var(--reltio-color-surface-1);
+	color: var(--reltio-color-text);
+	box-shadow:
+		0 4px 16px var(--reltio-color-shadow-2),
+		0 1px 4px var(--reltio-color-shadow-1);
+	inset: auto;
+	max-width: calc(100vw - 16px);
+	max-height: calc(100vh - 16px);
+}
+
+.Popover_container__L29wd:popover-open {
+	display: flex;
+	flex-direction: column;
+}
+
+.Popover_header__L29wd {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 12px;
+	border-bottom: 1px solid var(--reltio-color-border-1);
+	font-weight: 600;
+	font-size: 14px;
+	flex-shrink: 0;
+	min-height: 32px;
+}
+
+.Popover_body__L29wd {
+	flex: 1 1 auto;
+	overflow-y: auto;
+	min-height: 0;
+	padding: 0;
+}
+
+.Popover_footer__L29wd {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 12px;
+	border-top: 1px solid var(--reltio-color-border-1);
+	flex-shrink: 0;
+}
+`);
+export default json;

package/components/Popover/Popover.module.css.json

@@ -0,0 +1 @@
+{ "root": "Popover_root__L29wd", "container": "Popover_container__L29wd", "header": "Popover_header__L29wd", "body": "Popover_body__L29wd", "footer": "Popover_footer__L29wd" }

package/components/Popover/Popover.types.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+import type { HtmlProps } from "../../utils/types";
+export type PopoverProps = HtmlProps<"div", {
+    /** The element that toggles the popover on click. Clicks on content also bubble to the root and close the popover — use `e.stopPropagation()` to prevent this for interactive content. */
+    trigger: React.ReactElement;
+    /** CSS `position-area` value controlling placement relative to the trigger.
+     * Common values: `"bottom"`, `"top"`, `"left"`, `"right"`, `"bottom span-right"`, `"top span-left"`.
+     * See https://developer.mozilla.org/en-US/docs/Web/CSS/position-area for more details.
+     * @default "bottom"
+     */
+    positionArea?: string;
+    /** Called when the popover opens or closes. Forwards the native `toggle` event — check `event.newState` for `"open"` or `"closed"`. */
+    onToggle?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+    /** Content rendered in a fixed header area at the top, with a bottom border separator */
+    header?: React.ReactNode;
+    /** Content rendered in a fixed footer area at the bottom, right-aligned by default, with a top border separator */
+    footer?: React.ReactNode;
+}>;

package/components/Popover/Popover.types.js

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

package/components/Popover/index.d.ts

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

package/components/Popover/index.js

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

package/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AppSelector";
 export * from "./AssistantLoader";
 export * from "./Button";
 export * from "./Chat";

package/components/index.js

@@ -1,3 +1,4 @@
+export * from "./AppSelector";
 export * from "./AssistantLoader";
 export * from "./Button";
 export * from "./Chat";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reltio/design",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "Reltio Design Platform",
 	"peerDependencies": {
 		"react": ">=17 <20",