@reltio/design 0.2.0 → 0.3.0

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.3.0",
 	"description": "Reltio Design Platform",
 	"peerDependencies": {
 		"react": ">=17 <20",