@qeetrix/react 0.0.2 → 0.0.4

package/dist/experimental/password-input/password-input.js

@@ -0,0 +1,103 @@
+"use client";
+import { IconButton } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { mergeRefs } from "../../internal/refs.js";
+import { Input } from "../../input/input.js";
+import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { ArrowBigUpIcon } from "@qeetrix/icons/icons/arrow-big-up";
+import { EyeIcon } from "@qeetrix/icons/icons/eye";
+import { EyeOffIcon } from "@qeetrix/icons/icons/eye-off";
+// src/experimental/password-input/password-input.tsx
+/**
+* A password or secret field (07-components.md, C2): an Input with a Show password toggle. It
+* hides again when its form is submitted, so the browser never stores it as plain text; spelling
+* and capitalisation tools stay off; paste always works, and there's no length cap.
+*/
+function PasswordInput({ autoComplete = "current-password", visible, defaultVisible = false, onVisibleChange, capsLockWarning = true, messages, endAdornment, disabled, ref, onKeyDown, onKeyUp, onBlur, className, ...props }) {
+	const strings = useMessages("passwordInput", messages);
+	const input = useRef(null);
+	const [own, setOwn] = useState(defaultVisible);
+	const shown = visible ?? own;
+	const [announcement, setAnnouncement] = useState("");
+	const [capsLock, setCapsLock] = useState(false);
+	const setShown = (next) => {
+		if (visible === void 0) setOwn(next);
+		onVisibleChange?.(next);
+	};
+	const hideOnSubmit = useEffectEvent(() => {
+		if (input.current) input.current.type = "password";
+		if (shown) setShown(false);
+	});
+	useEffect(() => {
+		const form = input.current?.form;
+		if (!form) return;
+		const onSubmit = () => hideOnSubmit();
+		form.addEventListener("submit", onSubmit);
+		return () => form.removeEventListener("submit", onSubmit);
+	}, []);
+	const toggle = () => {
+		const field = input.current;
+		const selection = field ? [field.selectionStart, field.selectionEnd] : [null, null];
+		setShown(!shown);
+		setAnnouncement(shown ? strings.hidden : strings.shown);
+		requestAnimationFrame(() => {
+			const [start, end] = selection;
+			if (field && start != null && end != null) field.setSelectionRange(start, end);
+		});
+	};
+	const readCapsLock = (event) => {
+		if (capsLockWarning) setCapsLock(event.getModifierState("CapsLock"));
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		ref: mergeRefs(ref, input),
+		type: shown ? "text" : "password",
+		autoComplete,
+		spellCheck: false,
+		autoCapitalize: "none",
+		autoCorrect: "off",
+		disabled,
+		className: className ? `qx-password-input ${className}` : "qx-password-input",
+		onKeyDown: (event) => {
+			readCapsLock(event);
+			onKeyDown?.(event);
+		},
+		onKeyUp: (event) => {
+			readCapsLock(event);
+			onKeyUp?.(event);
+		},
+		onBlur: (event) => {
+			setCapsLock(false);
+			onBlur?.(event);
+		},
+		endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+			capsLock && /* @__PURE__ */ jsxs("span", {
+				className: "qx-password-input-caps",
+				"data-slot": "password-input-caps",
+				children: [/* @__PURE__ */ jsx(ArrowBigUpIcon, {
+					shape: "sharp",
+					size: 14,
+					"aria-hidden": true
+				}), strings.capsLock]
+			}),
+			endAdornment,
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: shown ? EyeOffIcon : EyeIcon,
+				"aria-label": strings.show,
+				"aria-pressed": shown,
+				size: "sm",
+				tone: "neutral",
+				disabled,
+				onClick: toggle,
+				className: "qx-password-input-toggle"
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				"aria-live": "polite",
+				children: announcement
+			})
+		] })
+	});
+}
+export { PasswordInput };

package/dist/experimental/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import { Sidebar, SidebarGroup, SidebarGroupProps, SidebarItem, SidebarItemProps, SidebarProps } from "./sidebar.js";
+export { Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps };

package/dist/experimental/sidebar/sidebar.d.ts

@@ -0,0 +1,64 @@
+import { RenderProp } from "../../internal/render.js";
+import { QeetrixIcon } from "../../internal/control.js";
+import { QeetrixMessages } from "../../internal/messages.js";
+import { CSSProperties, ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
+export interface SidebarProps extends Omit<ComponentProps<"div">, "children" | "title"> {
+  /** Names the navigation landmark, e.g. the product: "Qeet Pay". */
+  label: string;
+  /** The area's heading at the top, e.g. "Identity". */
+  title?: ReactNode;
+  /** Add "Filter navigation", which narrows the items by label as you type. */
+  filter?: boolean;
+  /** Below the items, e.g. a link to what's new. */
+  footer?: ReactNode;
+  /** SidebarGroups. */
+  children?: ReactNode;
+  /** The filter's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["sidebar"]>;
+}
+export interface SidebarGroupProps extends Omit<ComponentProps<"div">, "children"> {
+  /** The group's label; without one, the group is separated by space alone. */
+  label?: ReactNode;
+  /** SidebarItems. */
+  children?: ReactNode;
+}
+export interface SidebarItemProps {
+  /** The item's text. In the rail it becomes the tooltip and stays the accessible name. */
+  label: string;
+  /** Where it goes. A category (an item with children) takes no `href`. */
+  href?: string;
+  /** A router link instead of `<a>`, e.g. `render={<Link to="/users" />}`. */
+  render?: RenderProp;
+  /**
+   * A 16px icon from `@qeetrix/icons`, in its round shape: navigation is the one place Qeetrix uses
+   * round icons. Icons represent destinations, not actions.
+   */
+  icon?: QeetrixIcon;
+  /** Show the icon's filled drawing while current. Only for icons that have one. */
+  filledWhenCurrent?: boolean;
+  /** This item is the current page: `aria-current="page"` and the Ember bar. */
+  current?: boolean;
+  /** At the end: a count or a Badge. Hidden in the rail. */
+  badge?: ReactNode;
+  /** A category's initial state. By default it starts open when it holds the current page. */
+  defaultOpen?: boolean;
+  /** Called when the link is followed. */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** One level of nested SidebarItems: the item becomes a category. */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * A console's navigation (07-components.md, C1): links only, one level of nesting, every item in
+ * the Tab order. Inside an AppShell it follows the shell: a rail when collapsed, a drawer on narrow
+ * screens.
+ */
+export declare function Sidebar({ label, title, filter, footer, messages, className, children, ...props }: SidebarProps): ReactElement;
+/** Items under one label. */
+export declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): ReactElement;
+/**
+ * A destination, or a category of destinations. A closed category carries the current mark for its
+ * current child, so the current page is always marked.
+ */
+export declare function SidebarItem({ label, href, render, icon: Icon, filledWhenCurrent, current, badge, defaultOpen, onClick, className, style, children }: SidebarItemProps): ReactElement | null;

package/dist/experimental/sidebar/sidebar.js

@@ -0,0 +1,200 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { renderElement } from "../../internal/render.js";
+import { Tooltip } from "../../tooltip/tooltip.js";
+import { IconButton } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { Input } from "../../input/input.js";
+import { useShellState } from "../app-shell/app-shell.js";
+import { ChevronDownIcon } from "@qeetrix/icons/icons/chevron-down";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, use, useId, useRef, useState } from "react";
+import { SearchIcon } from "@qeetrix/icons/icons/search";
+// src/experimental/sidebar/sidebar.tsx
+/** The filter's text, lower-cased; and whether an enclosing category matched it by its own label. */
+const FilterContext = createContext("");
+const ParentMatchContext = createContext(false);
+/**
+* A console's navigation (07-components.md, C1): links only, one level of nesting, every item in
+* the Tab order. Inside an AppShell it follows the shell: a rail when collapsed, a drawer on narrow
+* screens.
+*/
+function Sidebar({ label, title, filter, footer, messages, className, children, ...props }) {
+	const shell = useShellState();
+	const rail = shell.collapsed && !shell.inDrawer;
+	const strings = useMessages("sidebar", messages);
+	const [query, setQuery] = useState("");
+	const filterRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("qx-sidebar", className),
+		"data-slot": "sidebar",
+		"data-rail": rail ? "" : void 0,
+		children: [
+			(title != null || filter) && /* @__PURE__ */ jsxs("div", {
+				className: "qx-sidebar-header",
+				"data-slot": "sidebar-header",
+				children: [
+					filter && rail && /* @__PURE__ */ jsx(IconButton, {
+						icon: SearchIcon,
+						"aria-label": strings.filter,
+						tone: "neutral",
+						className: "qx-sidebar-rail-search",
+						onClick: () => {
+							shell.expand();
+							requestAnimationFrame(() => filterRef.current?.focus());
+						}
+					}),
+					title != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-sidebar-title",
+						children: title
+					}),
+					filter && /* @__PURE__ */ jsx(Input, {
+						ref: filterRef,
+						type: "search",
+						icon: SearchIcon,
+						value: query,
+						onValueChange: setQuery,
+						"aria-label": strings.filter,
+						placeholder: strings.filter,
+						className: "qx-sidebar-filter"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("nav", {
+				"aria-label": label,
+				className: "qx-sidebar-nav",
+				"data-slot": "sidebar-nav",
+				children: [/* @__PURE__ */ jsx(FilterContext, {
+					value: query.trim().toLocaleLowerCase(),
+					children
+				}), /* @__PURE__ */ jsx("p", {
+					className: "qx-sidebar-empty",
+					role: "status",
+					children: query.trim() ? strings.noMatches : ""
+				})]
+			}),
+			footer != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-sidebar-footer",
+				"data-slot": "sidebar-footer",
+				children: footer
+			})
+		]
+	});
+}
+/** Items under one label. */
+function SidebarGroup({ label, className, children, ...props }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("qx-sidebar-group", className),
+		"data-slot": "sidebar-group",
+		children: [label != null && /* @__PURE__ */ jsx("div", {
+			id,
+			className: "qx-sidebar-group-label",
+			"data-slot": "sidebar-group-label",
+			children: label
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "qx-sidebar-list",
+			"aria-labelledby": label != null ? id : void 0,
+			children
+		})]
+	});
+}
+/**
+* A destination, or a category of destinations. A closed category carries the current mark for its
+* current child, so the current page is always marked.
+*/
+function SidebarItem({ label, href, render, icon: Icon, filledWhenCurrent, current, badge, defaultOpen, onClick, className, style, children }) {
+	const shell = useShellState();
+	const query = use(FilterContext);
+	const parentMatched = use(ParentMatchContext);
+	const rail = shell.collapsed && !shell.inDrawer;
+	const panelId = useId();
+	const nested = Children.toArray(children).filter(isValidElement);
+	const isCategory = nested.length > 0;
+	const holdsCurrent = nested.some((child) => child.props.current);
+	const [open, setOpen] = useState(defaultOpen ?? holdsCurrent);
+	const matches = (text) => text.toLocaleLowerCase().includes(query);
+	const selfMatch = query === "" || parentMatched || matches(label);
+	const childMatch = query !== "" && nested.some((child) => matches(String(child.props.label)));
+	if (!selfMatch && !childMatch) return null;
+	const expanded = (query !== "" ? true : open) && !rail;
+	const marked = current || isCategory && holdsCurrent && !expanded;
+	const Filled = Icon;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		Icon && /* @__PURE__ */ jsx(Icon, {
+			shape: "round",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-sidebar-icon qx-sidebar-icon-outline"
+		}),
+		Filled && filledWhenCurrent && /* @__PURE__ */ jsx(Filled, {
+			shape: "round",
+			variant: "filled",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-sidebar-icon qx-sidebar-icon-filled"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "qx-sidebar-label",
+			children: label
+		}),
+		badge != null && /* @__PURE__ */ jsx("span", {
+			className: "qx-sidebar-badge",
+			children: badge
+		}),
+		isCategory && /* @__PURE__ */ jsx(ChevronDownIcon, {
+			shape: "round",
+			size: 16,
+			"aria-hidden": true,
+			className: "qx-sidebar-chevron"
+		})
+	] });
+	let control = isCategory ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "qx-sidebar-item",
+		"aria-expanded": expanded,
+		"aria-controls": panelId,
+		"data-current": marked ? "" : void 0,
+		"data-open": expanded ? "" : void 0,
+		onClick: () => {
+			if (rail) {
+				shell.expand();
+				setOpen(true);
+			} else setOpen(!open);
+		},
+		children: content
+	}) : renderElement("a", render, {
+		href,
+		className: "qx-sidebar-item",
+		"aria-current": current ? "page" : void 0,
+		"data-current": current ? "" : void 0,
+		onClick: (event) => {
+			onClick?.(event);
+			if (shell.inDrawer) shell.closeDrawer();
+		},
+		children: content
+	});
+	control = /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: "inline-end",
+		disabled: !rail,
+		children: control
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: cx("qx-sidebar-entry", className),
+		style,
+		"data-slot": "sidebar-item",
+		children: [control, isCategory && /* @__PURE__ */ jsx("ul", {
+			id: panelId,
+			className: "qx-sidebar-list qx-sidebar-sublist",
+			hidden: !expanded,
+			children: /* @__PURE__ */ jsx(ParentMatchContext, {
+				value: query !== "" && matches(label),
+				children: nested
+			})
+		})]
+	});
+}
+export { Sidebar, SidebarGroup, SidebarItem };

package/dist/experimental/stat/index.d.ts

@@ -0,0 +1,2 @@
+import { Stat, StatGroup, StatGroupProps, StatProps, StatTone } from "./stat.js";
+export { Stat, StatGroup, type StatGroupProps, type StatProps, type StatTone };

package/dist/experimental/stat/stat.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** What the note says about the number: `positive`, `negative` or `warning` colour it. */
+export type StatTone = "neutral" | "positive" | "negative" | "warning";
+export interface StatGroupProps extends ComponentProps<"dl"> {
+  /** Stats, side by side in equal ruled cells. */
+  children?: ReactNode;
+}
+export interface StatProps extends Omit<ComponentProps<"div">, "children"> {
+  /** What's counted: "Total users". */
+  label: ReactNode;
+  /** The number. A `number` is formatted for `locale`; pass a string for units or percentages. */
+  value: ReactNode;
+  /** One line under the value: the change or the context, e.g. "+38 this week". */
+  note?: ReactNode;
+  /** Colours the note. Default `neutral`. */
+  tone?: StatTone;
+  /**
+   * Recent values, oldest first, drawn as a small line beside the number. It's decorative: say what
+   * matters about the trend in `note`.
+   */
+  trend?: readonly number[];
+  /** The locale for a numeric `value`. Default `en-IN`. */
+  locale?: string;
+}
+/**
+ * Key numbers in a ruled strip (07-components.md, C1): a `<dl>` of Stats in equal cells with rules
+ * between them. In a PageHeader's `summary` it runs edge to edge. Server-safe.
+ */
+export declare function StatGroup({ className, ...props }: StatGroupProps): ReactElement;
+/** One number with its label, a note and an optional trend. Use inside a StatGroup. Server-safe. */
+export declare function Stat({ label, value, note, tone, trend, locale, className, ...props }: StatProps): ReactElement;

package/dist/experimental/stat/stat.js

@@ -0,0 +1,90 @@
+import { cx } from "../../internal/cx.js";
+import { formatNumber } from "../../format/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/experimental/stat/stat.tsx
+const TREND = {
+	width: 88,
+	height: 28,
+	pad: 3
+};
+/** The trend line and its area, scaled into the box; the last point is marked. */
+function trendGeometry(values) {
+	const { width, height, pad } = TREND;
+	const min = Math.min(...values);
+	const span = Math.max(...values) - min;
+	const points = values.map((value, index) => ({
+		x: index / (values.length - 1) * width,
+		y: span === 0 ? height / 2 : height - pad - (value - min) / span * (height - 2 * pad)
+	}));
+	const line = points.map(({ x, y }, i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`);
+	return {
+		line: line.join(" "),
+		area: `${line.join(" ")} L${width} ${height} L0 ${height} Z`,
+		end: points[points.length - 1]
+	};
+}
+/**
+* Key numbers in a ruled strip (07-components.md, C1): a `<dl>` of Stats in equal cells with rules
+* between them. In a PageHeader's `summary` it runs edge to edge. Server-safe.
+*/
+function StatGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		...props,
+		className: cx("qx-stat-group", className),
+		"data-slot": "stat-group"
+	});
+}
+/** One number with its label, a note and an optional trend. Use inside a StatGroup. Server-safe. */
+function Stat({ label, value, note, tone = "neutral", trend, locale, className, ...props }) {
+	const geometry = trend && trend.length > 1 ? trendGeometry(trend) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("qx-stat", className),
+		"data-slot": "stat",
+		children: [
+			/* @__PURE__ */ jsx("dt", {
+				className: "qx-stat-label",
+				"data-slot": "stat-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				className: "qx-stat-value",
+				"data-slot": "stat-value",
+				children: typeof value === "number" ? formatNumber(value, locale) : value
+			}),
+			geometry && /* @__PURE__ */ jsx("dd", {
+				className: "qx-stat-trend-cell",
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "qx-stat-trend",
+					"data-slot": "stat-trend",
+					viewBox: `0 0 ${TREND.width} ${TREND.height}`,
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							className: "qx-stat-trend-area",
+							d: geometry.area
+						}),
+						/* @__PURE__ */ jsx("path", {
+							className: "qx-stat-trend-line",
+							d: geometry.line
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							className: "qx-stat-trend-end",
+							cx: geometry.end.x,
+							cy: geometry.end.y,
+							r: 2.5
+						})
+					]
+				})
+			}),
+			note != null && /* @__PURE__ */ jsx("dd", {
+				className: "qx-stat-note",
+				"data-slot": "stat-note",
+				"data-tone": tone,
+				children: note
+			})
+		]
+	});
+}
+export { Stat, StatGroup };

package/dist/experimental/top-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { TopBar, TopBarProps, TopBarSearch, TopBarSearchProps, TopBarStatus, TopBarSwitcher, TopBarSwitcherProps } from "./top-bar.js";
+export { TopBar, type TopBarProps, TopBarSearch, type TopBarSearchProps, type TopBarStatus, TopBarSwitcher, type TopBarSwitcherProps };

package/dist/experimental/top-bar/top-bar.d.ts

@@ -0,0 +1,60 @@
+import { RenderProp } from "../../internal/render.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+export interface TopBarProps extends Omit<ComponentProps<"header">, "children"> {
+  /** The suite launcher: a Menu of Qeet products behind a neutral IconButton. */
+  launcher?: ReactNode;
+  /** The product's mark, e.g. `<QeetLogo variant="dark" height={20} />`. */
+  logo?: ReactNode;
+  /** The product's name, beside the mark: "Qeet ID". */
+  product: string;
+  /** The identity's link home. */
+  href?: string;
+  /** A router link for the identity instead of `<a>`. */
+  render?: RenderProp;
+  /**
+   * The scope, outermost first: organisation, then project or environment. Usually
+   * TopBarSwitchers; a slash is drawn before each.
+   */
+  context?: ReactNode;
+  /** The global search, centred: a TopBarSearch. Hidden below 840px. */
+  search?: ReactNode;
+  /** Utility IconButtons in the neutral tone, after the AppShell's panel triggers. */
+  actions?: ReactNode;
+  /** The account menu: an Avatar trigger, after a rule. */
+  account?: ReactNode;
+}
+/** An environment's colour: production, staging, development… The word says which. */
+export type TopBarStatus = "neutral" | "success" | "info" | "warning" | "danger";
+export interface TopBarSwitcherProps extends Omit<Button.Props, "children" | "className"> {
+  /** The current organisation, project or environment. */
+  label: ReactNode;
+  /** A small square before the label: the organisation's initials or logo. */
+  mark?: ReactNode;
+  /** A dot before the label, for an environment. Never colour alone: the label names it. */
+  status?: TopBarStatus;
+  className?: string;
+}
+export interface TopBarSearchProps extends Omit<Button.Props, "children" | "className"> {
+  /** The prompt, which is also the button's name: "Search or jump to…". */
+  placeholder: string;
+  /** Keys shown at the end, e.g. `["⌘", "K"]`. Wire the shortcut itself in the product. */
+  shortcut?: readonly string[];
+  className?: string;
+}
+/**
+ * The scope bar of a Qeet console (07-components.md, C1): launcher, product, the scope path,
+ * search, tools and account across the full width. It's black in light and dark alike (it renders
+ * the dark scheme on itself), topped by a 2px Ember line.
+ */
+export declare function TopBar({ launcher, logo, product, href, render, context, search, actions, account, className, ...props }: TopBarProps): ReactElement;
+/**
+ * A step of the TopBar's scope path: the current organisation or environment, which opens a Menu
+ * to switch it. Use it as the trigger: `<MenuTrigger render={<TopBarSwitcher label="Acme" />} />`.
+ */
+export declare function TopBarSwitcher({ label, mark, status, className, ...props }: TopBarSwitcherProps): ReactElement;
+/**
+ * The global search in the TopBar: a field-shaped button that opens the product's search or command
+ * palette, with its shortcut shown at the end.
+ */
+export declare function TopBarSearch({ placeholder, shortcut, className, ...props }: TopBarSearchProps): ReactElement;