@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/TopBar/TopBar.js

@@ -0,0 +1,36 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { TopBarStart } from "./TopBarStart.js";
+import { TopBarEnd } from "./TopBarEnd.js";
+import { TopBarSearch } from "./TopBarSearch.js";
+import { TopBarIconButton } from "./TopBarIconButton.js";
+import TopBar_module_default from "./TopBar.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/TopBar/TopBar.tsx
+/**
+* Sticky application top-bar primitive; a layout-owning compound (`TopBar.Start`, `.End`, `.Search`, `.IconButton`).
+* @see docs/components/TopBar.md
+*/
+var TopBarRoot = forwardRef(function TopBar({ as = "header", "aria-label": ariaLabel, className, children, ...props }, ref) {
+	const t = useTranslation();
+	return /* @__PURE__ */ jsx(as, {
+		ref,
+		"aria-label": ariaLabel || t("topBar.label"),
+		className: clsx(TopBar_module_default.topBar, className),
+		...props,
+		children
+	});
+});
+/**
+* Compound `<TopBar>`; subcomponents are attached via `Object.assign`.
+* @see docs/components/TopBar.md
+*/
+var TopBar = Object.assign(TopBarRoot, {
+	Start: TopBarStart,
+	End: TopBarEnd,
+	Search: TopBarSearch,
+	IconButton: TopBarIconButton
+});
+export { TopBar };

package/dist/components/TopBar/TopBar.module.js

@@ -0,0 +1,47 @@
+import "./TopBar.css";
+// src/components/TopBar/TopBar.module.scss
+var topBar = "TopBar__topBar__9y5a2";
+var start = "TopBar__start__yo0Sa";
+var end = "TopBar__end__eY1c9";
+var search = "TopBar__search__gPRVu";
+var searchIcon = "TopBar__searchIcon__YdlNj";
+var searchInput = "TopBar__searchInput__4D-mj";
+var results = "TopBar__results__GE1tr";
+var groupLabel = "TopBar__groupLabel__pA285";
+var option = "TopBar__option__45BNh";
+var optionActive = "TopBar__optionActive__-VxWg";
+var optionIcon = "TopBar__optionIcon__wzLl9";
+var optionLabel = "TopBar__optionLabel__XcYko";
+var optionMeta = "TopBar__optionMeta__mKien";
+var footer = "TopBar__footer__QmJVt";
+var status = "TopBar__status__Uzopp";
+var iconButton = "TopBar__iconButton__X2brf";
+var indicator = "TopBar__indicator__D0G_5";
+var indicatorDanger = "TopBar__indicatorDanger__Oto-d";
+var indicatorWarning = "TopBar__indicatorWarning__fijtT";
+var indicatorInfo = "TopBar__indicatorInfo__p5WqS";
+var indicatorAccent = "TopBar__indicatorAccent__Vfm-m";
+var TopBar_module_default = {
+	topBar,
+	start,
+	end,
+	search,
+	searchIcon,
+	searchInput,
+	results,
+	groupLabel,
+	option,
+	optionActive,
+	optionIcon,
+	optionLabel,
+	optionMeta,
+	footer,
+	status,
+	iconButton,
+	indicator,
+	indicatorDanger,
+	indicatorWarning,
+	indicatorInfo,
+	indicatorAccent
+};
+export { TopBar_module_default as default, end, footer, groupLabel, iconButton, indicator, indicatorAccent, indicatorDanger, indicatorInfo, indicatorWarning, option, optionActive, optionIcon, optionLabel, optionMeta, results, search, searchIcon, searchInput, start, status, topBar };

package/dist/components/TopBar/TopBarEnd.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+/**
+ * Props for `<TopBar.End>`. Inherits the full `<div>` HTML attribute set;
+ * use the standard `className` / `style` / event-handler props as usual.
+ */
+export type TopBarEndProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Right-side cluster of a `<TopBar>` that shrinks to its content.
+ * @see docs/components/TopBar.md
+ */
+export declare const TopBarEnd: import("react").ForwardRefExoticComponent<TopBarEndProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TopBar/TopBarEnd.js

@@ -0,0 +1,18 @@
+'use client';
+import TopBar_module_default from "./TopBar.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/TopBar/TopBarEnd.tsx
+/**
+* Right-side cluster of a `<TopBar>` that shrinks to its content.
+* @see docs/components/TopBar.md
+*/
+var TopBarEnd = forwardRef(function TopBarEnd({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: clsx(TopBar_module_default.end, className),
+		...props
+	});
+});
+export { TopBarEnd };

package/dist/components/TopBar/TopBarIconButton.d.ts

@@ -0,0 +1,47 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Tone of the optional notification-indicator dot. Selects the dot color.
+ * - `'danger'` (default) — red, for unread / urgent notifications.
+ * - `'warning'` — dark amber, for soft-warning cues (maintenance banner, etc.).
+ * - `'info'` — blue, for informational badges.
+ * - `'accent'` — accent color, for "new content" cues.
+ */
+export type TopBarIndicatorTone = 'danger' | 'warning' | 'info' | 'accent';
+/**
+ * Props for `<TopBar.IconButton>` — a thin wrapper over `<Button iconOnly
+ * variant="ghost" size="sm">` sized for the bar with one addition: an
+ * optional notification-indicator dot positioned in the upper-right corner.
+ */
+export interface TopBarIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> {
+    /**
+     * Icon to render inside the button. Typically a single lucide icon
+     * (e.g. `<Bell size={16} />`). The wrapping button supplies the
+     * accessible name via `aria-label` — the icon itself is decorative.
+     */
+    children: ReactNode;
+    /**
+     * Show a small dot in the upper-right corner of the button. Useful for
+     * "unread notifications", "pending updates", etc. The dot is purely
+     * visual (`aria-hidden`); the consumer is responsible for surfacing
+     * count / status text to assistive tech, typically via the button's
+     * `aria-label` or a hidden span.
+     */
+    indicator?: boolean;
+    /**
+     * Dot color. Defaults to `'danger'` (red). See `TopBarIndicatorTone` for
+     * the full option set.
+     */
+    indicatorTone?: TopBarIndicatorTone;
+    /**
+     * **Required.** Accessible name for the icon-only button — without it,
+     * screen readers announce nothing. Phrase as an action (`'Notifications'`,
+     * `'Create new'`). Include count info here when the indicator is on
+     * (e.g. `'Notifications, 3 unread'`).
+     */
+    'aria-label': string;
+}
+/**
+ * Icon-only ghost button for `<TopBar>` with an optional notification-indicator dot.
+ * @see docs/components/TopBar.md
+ */
+export declare const TopBarIconButton: import("react").ForwardRefExoticComponent<TopBarIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/TopBar/TopBarIconButton.js

@@ -0,0 +1,33 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import TopBar_module_default from "./TopBar.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/TopBar/TopBarIconButton.tsx
+/** Per-tone CSS class lookup. Kept as a record so adding a tone is one edit. */
+var TONE_CLASS = {
+	danger: TopBar_module_default.indicatorDanger,
+	warning: TopBar_module_default.indicatorWarning,
+	info: TopBar_module_default.indicatorInfo,
+	accent: TopBar_module_default.indicatorAccent
+};
+/**
+* Icon-only ghost button for `<TopBar>` with an optional notification-indicator dot.
+* @see docs/components/TopBar.md
+*/
+var TopBarIconButton = forwardRef(function TopBarIconButton({ children, indicator = false, indicatorTone = "danger", className, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		className: clsx(TopBar_module_default.iconButton, className),
+		...props,
+		children: [children, indicator && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: clsx(TopBar_module_default.indicator, TONE_CLASS[indicatorTone])
+		})]
+	});
+});
+export { TopBarIconButton };

package/dist/components/TopBar/TopBarSearch.d.ts

@@ -0,0 +1,96 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+/** One result row in `<TopBar.Search>` combobox mode. */
+export interface TopBarSearchItem {
+    /** Unique across ALL groups. Identifies the result set: the highlight resets to the first row when the set of ids changes. */
+    id: string;
+    /** Primary text. Truncates to one line. */
+    label: ReactNode;
+    /** Trailing muted text, e.g. the entity type or an email. */
+    meta?: ReactNode;
+    /** Leading decorative icon (e.g. `<User size={16} />`); hidden from assistive tech. */
+    icon?: ReactNode;
+    /**
+     * Renders the row as a link so Cmd/Ctrl/Shift/middle-click and "copy link"
+     * work natively. A plain click or Enter still calls `onSelect` (the library
+     * never navigates) — route there.
+     */
+    href?: string;
+}
+/** A labelled block of results. Groups with no items are not rendered. */
+export interface TopBarSearchGroup {
+    /** Visible heading; also the group's accessible name. */
+    label: string;
+    /** Result rows in this group. */
+    items: TopBarSearchItem[];
+}
+/** Trailing row in the ↑/↓ cycle, e.g. "View all results". */
+export interface TopBarSearchFooterAction {
+    /** Row content. */
+    label: ReactNode;
+    /** Called on Enter or click. */
+    onSelect: () => void;
+    /** Optional link target, same semantics as `TopBarSearchItem.href`. */
+    href?: string;
+}
+/**
+ * Props for `<TopBar.Search>` — a styled `<input type="search">` with a
+ * leading magnifying-glass icon and an optional trailing `<Kbd>` hotkey
+ * hint. Passing `results` turns it into a combobox with a results panel.
+ *
+ * Inherits the standard `<input>` HTML attribute surface (minus `type`,
+ * fixed to `'search'`, the legacy `results` attribute, and the native
+ * `onSelect` text-selection event, replaced by the combobox `onSelect`). Spread `value` / `defaultValue` /
+ * `onChange` / `name` / `id` through normally — they reach the input.
+ */
+export interface TopBarSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onSelect' | 'results'> {
+    /**
+     * Optional hotkey hint shown after the input. Rendered internally via
+     * `<Kbd size="sm">`. Pass an **array** of key labels for a multi-key
+     * combo (`['⌘', 'K']` → two chips joined with `+`) or a single string
+     * for a one-chip hint (`'Esc'` → one chip). Note: `'⌘K'` is treated as
+     * a single chip — use the array form for multi-key combos.
+     *
+     * The hint is **visual only**; the library does not bind any keyboard
+     * shortcut to it. Omit for no hint.
+     */
+    hotkey?: string | string[];
+    /**
+     * `className` for the wrapping `<div>` (the search surface itself).
+     * The input's own className lives on the underlying `<input>` via the
+     * spread input-props (use the standard `inputClassName` pattern if you
+     * need to target the inner element specifically — not exposed in v1).
+     */
+    className?: string;
+    /**
+     * Turns on combobox mode: the input gets `role="combobox"` and a results
+     * panel opens under it. Presence switches the mode — pass `[]` (not
+     * `undefined`) while there are no results yet. You filter or fetch; the
+     * library owns keyboard, focus, dismissal, positioning and announcements.
+     * The first row is highlighted whenever the set of ids changes, so Enter
+     * opens the top hit.
+     */
+    results?: TopBarSearchGroup[];
+    /** Controlled panel visibility. Omit for uncontrolled. */
+    open?: boolean;
+    /** Uncontrolled initial visibility. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called when the panel wants to open (focus, typing, ↓) or close (Esc, blur, selection). */
+    onOpenChange?: (open: boolean) => void;
+    /** Called on Enter or click on a result. The input text is left as is — clear it here if wanted. */
+    onSelect?: (item: TopBarSearchItem, groupIndex: number) => void;
+    /** Shows a loading row and sets `aria-busy`; existing results stay visible and the live region keeps announcing their count. */
+    loading?: boolean;
+    /**
+     * Row shown for a non-empty query with no results. Default `t('topBar.searchEmpty')`
+     * (also used when this is an empty string). A non-string node is rendered but the
+     * live region still announces the default text — pass a string to have it announced.
+     */
+    emptyMessage?: ReactNode;
+    /** Trailing row in the ↑/↓ cycle (e.g. "View all results"). Rendered whenever the panel is shown (results, loading row, or empty row), as the last row. */
+    footerAction?: TopBarSearchFooterAction;
+}
+/**
+ * Search input for `<TopBar>`: a pill with a leading icon, a native search input, an optional hotkey hint and an optional results combobox.
+ * @see docs/components/TopBar.md
+ */
+export declare const TopBarSearch: import("react").ForwardRefExoticComponent<TopBarSearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TopBar/TopBarSearch.js

@@ -0,0 +1,171 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { Kbd } from "../Kbd/Kbd.js";
+import { isTourHeld } from "../_internal/overlay/tourHold.js";
+import { useInOverlay } from "../_internal/overlay/useInOverlay.js";
+import { TopBarSearchPanel, optionId } from "./TopBarSearchPanel.js";
+import TopBar_module_default from "./TopBar.module.js";
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+// src/components/TopBar/TopBarSearch.tsx
+/**
+* Search input for `<TopBar>`: a pill with a leading icon, a native search input, an optional hotkey hint and an optional results combobox.
+* @see docs/components/TopBar.md
+*/
+var TopBarSearch = forwardRef(function TopBarSearch({ hotkey, placeholder, className, "aria-label": ariaLabel, results, open, defaultOpen = false, onOpenChange, onSelect, loading = false, emptyMessage, footerAction, onChange, onFocus, onBlur, onClick, onKeyDown, ...inputProps }, ref) {
+	const t = useTranslation();
+	const listboxId = useId();
+	const wrapperRef = useRef(null);
+	const combobox = results !== void 0;
+	const name = ariaLabel || placeholder || t("topBar.search");
+	const [openState, setOpenState] = useState(defaultOpen);
+	const isOpen = open ?? openState;
+	const setOpen = (next) => {
+		if (next === isOpen) return;
+		if (open === void 0) setOpenState(next);
+		onOpenChange?.(next);
+	};
+	const [uncontrolledValue, setUncontrolledValue] = useState(String(inputProps.defaultValue ?? ""));
+	const value = inputProps.value !== void 0 ? String(inputProps.value) : uncontrolledValue;
+	const { groups, options } = useMemo(() => {
+		const groups = [];
+		const options = [];
+		(results ?? []).forEach((g, groupIndex) => {
+			if (g.items.length === 0) return;
+			groups.push({
+				label: g.label,
+				groupIndex,
+				start: options.length,
+				items: g.items
+			});
+			for (const item of g.items) options.push({
+				kind: "item",
+				item,
+				groupIndex
+			});
+		});
+		if (footerAction) options.push({
+			kind: "footer",
+			action: footerAction
+		});
+		return {
+			groups,
+			options
+		};
+	}, [results, footerAction]);
+	const hasItems = groups.length > 0;
+	const shown = combobox && isOpen && (loading || hasItems || value.trim() !== "");
+	const inOverlay = useInOverlay(wrapperRef, shown);
+	const empty = !loading && !hasItems ? emptyMessage || t("topBar.searchEmpty") : null;
+	const announcement = !shown ? "" : hasItems ? t("topBar.searchResults", { count: options.filter((o) => o.kind === "item").length }) : loading ? t("topBar.searchLoading") : typeof empty === "string" ? empty : t("topBar.searchEmpty");
+	const signature = options.flatMap((o) => o.kind === "item" ? [o.item.id] : []).join("\0");
+	const [active, setActive] = useState(0);
+	const [prevSignature, setPrevSignature] = useState(signature);
+	if (signature !== prevSignature) {
+		setPrevSignature(signature);
+		setActive(0);
+	}
+	const activeIndex = options.length === 0 ? -1 : Math.min(active, options.length - 1);
+	const choose = (option) => {
+		if (option.kind === "footer") option.action.onSelect();
+		else onSelect?.(option.item, option.groupIndex);
+		setOpen(false);
+	};
+	const handleChange = (e) => {
+		onChange?.(e);
+		if (inputProps.value === void 0) setUncontrolledValue(e.target.value);
+		if (combobox) setOpen(true);
+	};
+	const handleFocus = (e) => {
+		onFocus?.(e);
+		if (combobox && !e.defaultPrevented) setOpen(true);
+	};
+	const handleBlur = (e) => {
+		onBlur?.(e);
+		const panel = document.getElementById(listboxId);
+		if (isTourHeld(e.relatedTarget, panel, wrapperRef.current)) return;
+		if (combobox) setOpen(false);
+	};
+	const handleClick = (e) => {
+		onClick?.(e);
+		if (combobox && !e.defaultPrevented) setOpen(true);
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (!combobox || e.defaultPrevented) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			if (!shown) {
+				if (e.key === "ArrowDown") {
+					e.preventDefault();
+					setOpen(true);
+				}
+				return;
+			}
+			if (options.length === 0) return;
+			e.preventDefault();
+			const step = e.key === "ArrowDown" ? 1 : -1;
+			setActive((activeIndex + step + options.length) % options.length);
+		} else if (e.key === "Enter" && !e.nativeEvent.isComposing && e.keyCode !== 229 && shown && activeIndex >= 0) {
+			e.preventDefault();
+			choose(options[activeIndex]);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: clsx(TopBar_module_default.search, className),
+		children: [
+			/* @__PURE__ */ jsx(Search, {
+				"aria-hidden": true,
+				className: TopBar_module_default.searchIcon
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				type: "search",
+				placeholder,
+				"aria-label": name,
+				className: TopBar_module_default.searchInput,
+				autoComplete: "off",
+				"data-1p-ignore": true,
+				"data-lpignore": "true",
+				"data-form-type": "other",
+				...inputProps,
+				...combobox && {
+					role: "combobox",
+					"aria-expanded": shown,
+					"aria-controls": shown ? listboxId : void 0,
+					"aria-activedescendant": shown && activeIndex >= 0 ? optionId(listboxId, activeIndex) : void 0,
+					"aria-autocomplete": "list"
+				},
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			}),
+			hotkey != null && /* @__PURE__ */ jsx(Kbd, {
+				keys: Array.isArray(hotkey) ? hotkey : [hotkey],
+				size: "sm"
+			}),
+			combobox && /* @__PURE__ */ jsx(TopBarSearchPanel, {
+				id: listboxId,
+				shown,
+				label: name,
+				groups,
+				options,
+				activeIndex,
+				onActivate: setActive,
+				onChoose: choose,
+				anchorRef: wrapperRef,
+				inOverlay,
+				onClose: () => setOpen(false),
+				loading,
+				emptyMessage: shown ? empty : null,
+				announcement,
+				announceKey: signature
+			})
+		]
+	});
+});
+export { TopBarSearch };

package/dist/components/TopBar/TopBarSearchPanel.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode, type RefObject } from 'react';
+import type { TopBarSearchFooterAction, TopBarSearchItem } from './TopBarSearch.js';
+/** A row in the ↑/↓ cycle: a result item or the trailing footer action. */
+export type SearchOption = {
+    kind: 'item';
+    item: TopBarSearchItem;
+    groupIndex: number;
+} | {
+    kind: 'footer';
+    action: TopBarSearchFooterAction;
+};
+/** A non-empty group with the flat index of its first option. */
+export interface PanelGroup {
+    /** Group heading text. */
+    label: string;
+    /** Index of the group in the consumer's `results`. */
+    groupIndex: number;
+    /** Flat option index of the group's first item. */
+    start: number;
+    /** The group's rows. */
+    items: TopBarSearchItem[];
+}
+export interface TopBarSearchPanelProps {
+    /** listbox id (input's `aria-controls`); option ids derive from it. */
+    id: string;
+    /** Render the portalled listbox. The component itself stays mounted in combobox mode. */
+    shown: boolean;
+    /** The listbox's accessible name (the input's name). */
+    label: string;
+    /** Non-empty groups to render. */
+    groups: PanelGroup[];
+    /** Flat ↑/↓ cycle: items, then the footer. */
+    options: SearchOption[];
+    /** Index of the highlighted option, or -1. */
+    activeIndex: number;
+    /** Called when hover moves the highlight. */
+    onActivate: (index: number) => void;
+    /** Called when an option is clicked. */
+    onChoose: (option: SearchOption) => void;
+    /** The search pill — Floating UI reference. */
+    anchorRef: RefObject<HTMLDivElement | null>;
+    /** The pill sits inside a Modal/Drawer, so the panel elevates above it. Probed by the parent (a child's layout effect runs before the parent's ref attaches). */
+    inOverlay: boolean;
+    /** Close request (Escape). */
+    onClose: () => void;
+    /** Loading row + `aria-busy`. */
+    loading: boolean;
+    /** Empty row content, or `null` for no empty row. */
+    emptyMessage: ReactNode | null;
+    /** Live-region text ('' when the panel is hidden). */
+    announcement: string;
+    /** Identifies the result set; a change re-announces even when the text is identical. */
+    announceKey: string;
+}
+export declare const optionId: (listboxId: string, index: number) => string;
+/** Internal: the combobox results panel of `<TopBar.Search>`. */
+export declare function TopBarSearchPanel({ id, shown, label, groups, options, activeIndex, onActivate, onChoose, anchorRef, inOverlay, onClose, loading, emptyMessage, announcement, announceKey, }: TopBarSearchPanelProps): import("react").JSX.Element;