@green-on-grey/ui-kit 0.0.0-stage → 0.1.1

package/dist/components/Icon.d.ts

@@ -0,0 +1,83 @@
+declare const PATHS: {
+    readonly user: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6 8-6s8 2 8 6"/>';
+    readonly hash: '<path d="M5 9h14M5 15h14M10 4 8 20M16 4l-2 16"/>';
+    readonly graph: '<circle cx="6" cy="7" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8.3 8l2.5 7.8M16 7.8l-3 8M8.5 6.8l7-.6"/>';
+    readonly table: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18M9 4v16"/>';
+    readonly ext: '<path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>';
+    readonly pause: '<path d="M8 5v14M16 5v14"/>';
+    readonly search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>';
+    readonly mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/>';
+    readonly archive: '<rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/>';
+    readonly key: '<circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M16 7l3 3M14 9l2 2"/>';
+    readonly gear: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>';
+    readonly mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>';
+    readonly clip: '<path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L15 7"/>';
+    readonly send: '<path d="M5 12h14M13 6l6 6-6 6"/>';
+    readonly x: '<path d="M6 6l12 12M18 6 6 18"/>';
+    readonly menu: '<path d="M4 7h16M4 12h16M4 17h16"/>';
+    readonly check: '<path d="m5 12 5 5 9-10"/>';
+    readonly lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>';
+    readonly branch: '<circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7v10M18 10c0 5-8 4-11 7"/>';
+    readonly plus: '<path d="M12 5v14M5 12h14"/>';
+    readonly back: '<path d="M19 12H5M11 6l-6 6 6 6"/>';
+    readonly files: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>';
+    readonly clock: '<circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/>';
+    readonly msg: '<path d="M4 5h16v11H9l-5 4z"/>';
+    readonly out: '<path d="M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10"/>';
+    readonly users: '<circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 5a3 3 0 0 1 0 6M21 20a6 6 0 0 0-4-5.6"/>';
+    readonly grid: '<rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/>';
+    readonly book: '<path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z"/><path d="M5 17a3 3 0 0 1 3-3h11"/>';
+    readonly wrench: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9z"/>';
+    readonly upload: '<path d="M12 16V4M7 9l5-5 5 5M5 20h14"/>';
+    readonly dots: '<circle cx="5" cy="12" r="1.3"/><circle cx="12" cy="12" r="1.3"/><circle cx="19" cy="12" r="1.3"/>';
+    readonly trash: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6"/>';
+    readonly cpu: '<rect x="7" y="7" width="10" height="10" rx="1.5"/><rect x="10" y="10" width="4" height="4"/><path d="M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4"/>';
+    readonly alert: '<path d="M12 4 2 20h20z"/><path d="M12 10v4M12 17v.5"/>';
+    readonly sparkle: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/>';
+    readonly stop: '<rect x="7" y="7" width="10" height="10" rx="1.5"/>';
+    readonly bulb: '<path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/>';
+    readonly bug: '<rect x="8" y="7" width="8" height="12" rx="4"/><path d="M12 7V5M9 5l1.5 2M15 5l-1.5 2M4 11h4M16 11h4M4 17l4-2M20 17l-4-2"/>';
+    readonly rocket: '<path d="M5 15c-1.5 1.5-2 4-2 6 2 0 4.5-.5 6-2M9 15l-3-3c1.5-5 5.5-8 12-9-1 6.5-4 10.5-9 12z"/><circle cx="14.5" cy="9.5" r="1.5"/>';
+    readonly undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/>';
+    readonly flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>';
+    readonly code: '<path d="m8 8-4 4 4 4M16 8l4 4-4 4M13 5l-2 14"/>';
+    readonly flask: '<path d="M9 3h6M10 3v6L5 19a1.5 1.5 0 0 0 1.3 2h11.4a1.5 1.5 0 0 0 1.3-2l-5-10V3"/>';
+    readonly target: '<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r=".6"/>';
+    readonly merge: '<circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/><path d="M6 7v10M6 7c0 6 12 4 12 10"/>';
+    readonly server: '<rect x="4" y="4" width="16" height="7" rx="1.5"/><rect x="4" y="13" width="16" height="7" rx="1.5"/><path d="M8 7.5h.01M8 16.5h.01"/>';
+    readonly copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>';
+    readonly briefcase: '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 13h18"/>';
+    readonly smile: '<circle cx="12" cy="12" r="8"/><path d="M8.5 14a4 4 0 0 0 7 0M9.5 10h.01M14.5 10h.01"/>';
+    readonly bolt: '<path d="M13 3 5 14h6l-1 7 8-11h-6z"/>';
+    readonly link: '<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/>';
+    readonly refresh: '<path d="M20 11a8 8 0 0 0-14.5-4.5L4 8M4 4v4h4M4 13a8 8 0 0 0 14.5 4.5L20 16M20 20v-4h-4"/>';
+    readonly tBusiness: '<rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5h6v2M3 12h18"/>';
+    readonly tFriendly: '<circle cx="12" cy="12" r="9"/><path d="M8 14c1 1.5 2.4 2.2 4 2.2s3-.7 4-2.2M9 9.5h.01M15 9.5h.01"/>';
+    readonly tBrief: '<path d="M13 3L5 13h6l-1 8 8-10h-6z"/>';
+    readonly tMentor: '<path d="M3 6c3-1 6-1 9 1 3-2 6-2 9-1v13c-3-1-6-1-9 1-3-2-6-2-9-1zM12 7v13"/>';
+    readonly tg: '<path d="M3 11l18-7-3 16-6-5-3 3v-5l9-7-11 6z"/>';
+    readonly msg2: '<path d="M4 5h16v11H8l-4 4z"/>';
+    readonly plug: '<path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4"/>';
+    readonly repeat: '<path d="M17 2l3 3-3 3M4 11V9a4 4 0 0 1 4-4h12M7 22l-3-3 3-3M20 13v2a4 4 0 0 1-4 4H4"/>';
+    readonly shield: '<path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/>';
+    readonly box: '<path d="M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10"/>';
+    readonly brain: '<path d="M9 4a3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 6 1V5a3 3 0 0 0-3-1zM15 4a3 3 0 0 1 3 3 3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-6 1"/>';
+    readonly chart: '<path d="M4 20h16M6 16l4-5 3 3 5-7"/>';
+    readonly play: '<path d="M7 5l12 7-12 7z"/>';
+    readonly spark: '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>';
+    readonly tag: '<path d="M3 12V4h8l9 9-8 8z"/><circle cx="7.5" cy="8.5" r="1.3"/>';
+    readonly globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>';
+    readonly download: '<path d="M12 4v12M7 11l5 5 5-5M5 20h14"/>';
+    readonly pin: '<path d="M9 4h6l-1 6 4 4H6l4-4zM12 14v6"/>';
+    readonly edit: '<path d="M4 20h4L19 9l-4-4L4 16zM14 6l4 4"/>';
+};
+export type IconName = keyof typeof PATHS;
+export declare function Icon({ name, size, className }: {
+    name: IconName;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function GitHubIcon(): import("react").JSX.Element;
+/** Names of all icons, for the showcase. */
+export declare const ICON_NAMES: IconName[];
+export {};

package/dist/components/Markdown.d.ts

@@ -0,0 +1,3 @@
+export declare function Markdown({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/components/Menu.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/** `.menu`: a popover closed by Escape and by a click outside; it is mounted while
+ * open. `onClose` must keep its identity between renders. What is inside
+ * (sections `.sec`, lines `.line`, actions `.action`) belongs to the product. */
+export declare function Menu({ onClose, label, className, children }: {
+    onClose: () => void;
+    label?: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Tabs.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+/** `.tabs` with the keyboard of a tab list: arrows, Home and End move the choice. */
+export declare function Tabs<K extends string>({ items, value, onChange, label }: {
+    items: {
+        key: K;
+        label: ReactNode;
+    }[];
+    value: K;
+    onChange: (key: K) => void;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/components/TopBar.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/** The link of the product: the kit does not depend on a router (arch §4.2). */
+export type LinkComponent = (props: {
+    href: string;
+    className?: string;
+    onClick?: () => void;
+    "aria-current"?: "page";
+    children: ReactNode;
+}) => ReactNode;
+export interface TopBarSection {
+    key: string;
+    label: ReactNode;
+    href: string;
+    active: boolean;
+}
+/** The top bar (FTR.NAB.CMN-0005 R5, design §4): the logo and the name, the
+ * sections in a row and behind the burger on a phone, the actions of the product,
+ * the avatar that opens the profile menu. The profile menu and the list of
+ * sections are never open together. */
+export declare function TopBar({ logo, name, home, sections, Link, center, actions, avatar, profileMenu }: {
+    logo: string;
+    name: string;
+    home?: string;
+    sections: TopBarSection[];
+    Link: LinkComponent;
+    /** Between the sections and the actions: the search of Hammurapi. */
+    center?: ReactNode;
+    /** Before the avatar. */
+    actions?: ReactNode;
+    avatar: ReactNode;
+    profileMenu: (close: () => void) => ReactNode;
+}): import("react").JSX.Element;

package/dist/components/ui.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+import { type IconName } from "./Icon";
+export declare function Modal({ title, onClose, children, footer, wide }: {
+    title: ReactNode;
+    onClose: () => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    wide?: boolean;
+}): import("react").JSX.Element;
+export interface ToastSpec {
+    kind?: "error" | "ok" | "info";
+    title: string;
+    text?: ReactNode;
+    actions?: {
+        label: string;
+        primary?: boolean;
+        onClick: () => void;
+    }[];
+    sticky?: boolean;
+}
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useToast: () => (t: ToastSpec) => void;
+/** Two letters of a name for an avatar without a picture. */
+export declare function initials(name: string): string;
+/** The avatar of a user or of an agent. What an agent looks like is decided by the
+ * product (R7): it gives the icon and the colour variant — a class beside `.avatar.agent`. */
+export declare function Avatar({ name, url, small, agent, icon, variant }: {
+    name: string;
+    url?: string | null;
+    small?: boolean;
+    agent?: boolean;
+    icon?: IconName;
+    variant?: string;
+}): import("react").JSX.Element;
+export declare function Switch({ on, onChange, label, disabled }: {
+    on: boolean;
+    onChange: (v: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function Empty({ icon, title, children }: {
+    icon: IconName;
+    title: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Loading(): import("react").JSX.Element;
+/** Popover menu closed by an outside click. */
+export declare function useOutside<T extends HTMLElement>(open: boolean, close: () => void): import("react").RefObject<T | null>;

package/dist/i18n-BJ8rsBp6.js

@@ -0,0 +1,7 @@
+import { useTranslation as e } from "react-i18next";
+//#region src/i18n.ts
+var t = "uikit", n = () => e(t).t;
+//#endregion
+export { n, t };
+
+//# sourceMappingURL=i18n-BJ8rsBp6.js.map

package/dist/i18n-BJ8rsBp6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-BJ8rsBp6.js","names":["UIKIT_NS","useKitT","useTranslation"],"sources":["../src/i18n.ts"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\n\n/** The namespace of the strings of the kit in the i18next instance of a product\n * (FTR.NAB.CMN-0005 arch §4.1): `resources[lng].uikit = kit[lng]`. */\nexport const UIKIT_NS = \"uikit\";\n\n/** `t` of the strings of the kit. */\nexport const useKitT = () => useTranslation(UIKIT_NS).t;\n"],"mappings":";;AAIA,IAAaA,IAAW,SAGXC,UAAgBC,EAAeF,CAAQ,CAAC,CAAC"}

package/dist/i18n.d.ts

@@ -0,0 +1,5 @@
+/** The namespace of the strings of the kit in the i18next instance of a product
+ * (FTR.NAB.CMN-0005 arch §4.1): `resources[lng].uikit = kit[lng]`. */
+export declare const UIKIT_NS = "uikit";
+/** `t` of the strings of the kit. */
+export declare const useKitT: () => import("i18next").TFunction<"uikit", undefined>;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Icon, GitHubIcon, type IconName } from "./components/Icon";
+export { Markdown } from "./components/Markdown";
+export { Button, IconButton } from "./components/Button";
+export { Tabs } from "./components/Tabs";
+export { Menu } from "./components/Menu";
+export { TopBar, type LinkComponent, type TopBarSection } from "./components/TopBar";
+export { Modal, ToastProvider, useToast, Avatar, Switch, Empty, Loading, useOutside, type ToastSpec } from "./components/ui";
+export { UIKIT_NS } from "./i18n";

package/dist/index.js

@@ -0,0 +1,144 @@
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./ui-CGgZtEVm.js";
+import { n as d, t as f } from "./i18n-BJ8rsBp6.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useCallback as h, useEffect as g, useRef as _, useState as v } from "react";
+//#region src/components/Button.tsx
+function y({ variant: e, size: t, className: n, type: r = "button", ...i }) {
+	let a = [
+		"btn",
+		e,
+		t,
+		n
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ p("button", {
+		type: r,
+		className: a,
+		...i
+	});
+}
+function b({ label: e, fill: t, on: n, className: r, type: i = "button", ...a }) {
+	let o = [
+		"iconbtn",
+		t && "fill",
+		n && "on",
+		r
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ p("button", {
+		type: i,
+		className: o,
+		"aria-label": e,
+		...a
+	});
+}
+//#endregion
+//#region src/components/Tabs.tsx
+function x({ items: e, value: t, onChange: n, label: r }) {
+	let i = _(null);
+	return /* @__PURE__ */ p("div", {
+		className: "tabs",
+		role: "tablist",
+		"aria-label": r,
+		ref: i,
+		onKeyDown: (r) => {
+			let a = e.findIndex((e) => e.key === t), o = r.key === "ArrowRight" ? (a + 1) % e.length : r.key === "ArrowLeft" ? (a - 1 + e.length) % e.length : r.key === "Home" ? 0 : r.key === "End" ? e.length - 1 : -1;
+			o < 0 || (r.preventDefault(), n(e[o].key), i.current?.querySelectorAll("[role=\"tab\"]")[o]?.focus());
+		},
+		children: e.map((e) => /* @__PURE__ */ p("button", {
+			type: "button",
+			role: "tab",
+			"aria-selected": e.key === t,
+			tabIndex: e.key === t ? 0 : -1,
+			className: e.key === t ? "on" : void 0,
+			onClick: () => n(e.key),
+			children: e.label
+		}, e.key))
+	});
+}
+//#endregion
+//#region src/components/Menu.tsx
+function S({ onClose: e, label: t, className: n, children: r }) {
+	let i = c(!0, e);
+	return g(() => {
+		let e = document.activeElement;
+		return () => e?.focus?.();
+	}, []), /* @__PURE__ */ p("div", {
+		className: `menu${n ? ` ${n}` : ""}`,
+		role: "dialog",
+		"aria-label": t,
+		ref: i,
+		children: r
+	});
+}
+//#endregion
+//#region src/components/TopBar.tsx
+function C({ logo: e, name: t, home: r = "/", sections: i, Link: a, center: o, actions: s, avatar: l, profileMenu: u }) {
+	let f = d(), [g, _] = v(!1), [y, b] = v(!1), x = h(() => b(!1), []), S = h(() => _(!1), []), C = c(y, x), w = i.map((e) => /* @__PURE__ */ p(a, {
+		href: e.href,
+		className: e.active ? "on" : void 0,
+		"aria-current": e.active ? "page" : void 0,
+		onClick: x,
+		children: e.label
+	}, e.key));
+	return /* @__PURE__ */ m("div", {
+		className: "topbar",
+		children: [
+			/* @__PURE__ */ m(a, {
+				href: r,
+				className: "brand",
+				children: [/* @__PURE__ */ p("img", {
+					src: e,
+					alt: ""
+				}), /* @__PURE__ */ p("span", {
+					className: "hide-m",
+					children: t
+				})]
+			}),
+			/* @__PURE__ */ p("nav", {
+				className: "nav hide-m",
+				"aria-label": f("topbar.sections"),
+				children: w
+			}),
+			o,
+			/* @__PURE__ */ m("div", {
+				className: "top-actions",
+				children: [
+					s,
+					/* @__PURE__ */ p("button", {
+						className: "avatar",
+						style: g ? { boxShadow: "0 0 0 2px var(--violet)" } : void 0,
+						onClick: () => {
+							b(!1), _((e) => !e);
+						},
+						"aria-label": f("topbar.profile"),
+						"aria-expanded": g,
+						children: l
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "burger",
+						ref: C,
+						children: [/* @__PURE__ */ p("button", {
+							className: `iconbtn${y ? " on" : ""}`,
+							onClick: () => {
+								_(!1), b((e) => !e);
+							},
+							"aria-label": f("topbar.sections"),
+							"aria-expanded": y,
+							"aria-controls": "nav-sections",
+							children: /* @__PURE__ */ p(n, { name: y ? "x" : "menu" })
+						}), y && /* @__PURE__ */ p("nav", {
+							id: "nav-sections",
+							className: "navmenu",
+							"aria-label": f("topbar.sections"),
+							children: w
+						})]
+					})
+				]
+			}),
+			g && u(S)
+		]
+	});
+}
+//#endregion
+export { l as Avatar, y as Button, a as Empty, u as GitHubIcon, n as Icon, b as IconButton, s as Loading, i as Markdown, S as Menu, r as Modal, e as Switch, x as Tabs, o as ToastProvider, C as TopBar, f as UIKIT_NS, c as useOutside, t as useToast };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Switch","useToast","Icon","Modal","Markdown","Empty","Loading","useOutside","Avatar","useKitT","UIKIT_NS","Button","rest","cls","variant","size","className","IconButton","fill","on","label","Tabs","ref","useRef","i","items","it","value","to","e","onChange","Menu","onClose","useEffect","opener","TopBar","t","profileOpen","setProfileOpen","useState","sectionsOpen","setSectionsOpen","closeSections","useCallback","closeProfile","links","sections","Link","s","home","logo","name","center","actions","v","avatar","profileMenu","GitHubIcon","ToastProvider"],"sources":["../src/components/Button.tsx","../src/components/Tabs.tsx","../src/components/Menu.tsx","../src/components/TopBar.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\ntype Native = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** `button.btn` with its variants. The classes stay a legitimate way to use a\n * button (FTR.NAB.CMN-0005 tech, decision 1); the component is for new code. */\nexport function Button({ variant, size, className, type = \"button\", ...rest }: Native & {\n  variant?: \"primary\" | \"ghost\" | \"danger\"; size?: \"sm\";\n}) {\n  const cls = [\"btn\", variant, size, className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} {...rest} />;\n}\n\n/** `button.iconbtn`: a button with an icon only, so the label is required. */\nexport function IconButton({ label, fill, on, className, type = \"button\", ...rest }: Omit<Native, \"aria-label\"> & {\n  label: string; fill?: boolean; on?: boolean;\n}) {\n  const cls = [\"iconbtn\", fill && \"fill\", on && \"on\", className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} aria-label={label} {...rest} />;\n}\n","import { useRef, type KeyboardEvent, type ReactNode } from \"react\";\n\n/** `.tabs` with the keyboard of a tab list: arrows, Home and End move the choice. */\nexport function Tabs<K extends string>({ items, value, onChange, label }: {\n  items: { key: K; label: ReactNode }[]; value: K; onChange: (key: K) => void; label?: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const onKey = (e: KeyboardEvent) => {\n    const i = items.findIndex((it) => it.key === value);\n    const to = e.key === \"ArrowRight\" ? (i + 1) % items.length\n      : e.key === \"ArrowLeft\" ? (i - 1 + items.length) % items.length\n      : e.key === \"Home\" ? 0 : e.key === \"End\" ? items.length - 1 : -1;\n    if (to < 0) return;\n    e.preventDefault();\n    onChange(items[to].key);\n    ref.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[to]?.focus();\n  };\n  return (\n    <div className=\"tabs\" role=\"tablist\" aria-label={label} ref={ref} onKeyDown={onKey}>\n      {items.map((it) => (\n        <button key={it.key} type=\"button\" role=\"tab\" aria-selected={it.key === value} tabIndex={it.key === value ? 0 : -1}\n          className={it.key === value ? \"on\" : undefined} onClick={() => onChange(it.key)}>\n          {it.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { useOutside } from \"./ui\";\n\n/** `.menu`: a popover closed by Escape and by a click outside; it is mounted while\n * open. `onClose` must keep its identity between renders. What is inside\n * (sections `.sec`, lines `.line`, actions `.action`) belongs to the product. */\nexport function Menu({ onClose, label, className, children }: {\n  onClose: () => void; label?: string; className?: string; children: ReactNode;\n}) {\n  const ref = useOutside<HTMLDivElement>(true, onClose);\n  // the focus returns to what opened the menu (CMP-05)\n  useEffect(() => {\n    const opener = document.activeElement as HTMLElement | null;\n    return () => opener?.focus?.();\n  }, []);\n  return (\n    <div className={`menu${className ? ` ${className}` : \"\"}`} role=\"dialog\" aria-label={label} ref={ref}>\n      {children}\n    </div>\n  );\n}\n","import { useCallback, useState, type ReactNode } from \"react\";\nimport { useKitT } from \"../i18n\";\nimport { Icon } from \"./Icon\";\nimport { useOutside } from \"./ui\";\n\n/** The link of the product: the kit does not depend on a router (arch §4.2). */\nexport type LinkComponent = (props: {\n  href: string; className?: string; onClick?: () => void; \"aria-current\"?: \"page\"; children: ReactNode;\n}) => ReactNode;\n\nexport interface TopBarSection { key: string; label: ReactNode; href: string; active: boolean }\n\n/** The top bar (FTR.NAB.CMN-0005 R5, design §4): the logo and the name, the\n * sections in a row and behind the burger on a phone, the actions of the product,\n * the avatar that opens the profile menu. The profile menu and the list of\n * sections are never open together. */\nexport function TopBar({ logo, name, home = \"/\", sections, Link, center, actions, avatar, profileMenu }: {\n  logo: string; name: string; home?: string; sections: TopBarSection[]; Link: LinkComponent;\n  /** Between the sections and the actions: the search of Hammurapi. */\n  center?: ReactNode;\n  /** Before the avatar. */\n  actions?: ReactNode;\n  avatar: ReactNode;\n  profileMenu: (close: () => void) => ReactNode;\n}) {\n  const t = useKitT();\n  const [profileOpen, setProfileOpen] = useState(false);\n  const [sectionsOpen, setSectionsOpen] = useState(false);\n  const closeSections = useCallback(() => setSectionsOpen(false), []);\n  const closeProfile = useCallback(() => setProfileOpen(false), []);\n  const ref = useOutside<HTMLDivElement>(sectionsOpen, closeSections);\n  const links = sections.map((s) => (\n    <Link key={s.key} href={s.href} className={s.active ? \"on\" : undefined} aria-current={s.active ? \"page\" : undefined} onClick={closeSections}>\n      {s.label}\n    </Link>\n  ));\n  return (\n    <div className=\"topbar\">\n      <Link href={home} className=\"brand\">\n        <img src={logo} alt=\"\" />\n        <span className=\"hide-m\">{name}</span>\n      </Link>\n      <nav className=\"nav hide-m\" aria-label={t(\"topbar.sections\")}>{links}</nav>\n      {center}\n      <div className=\"top-actions\">\n        {actions}\n        <button className=\"avatar\" style={profileOpen ? { boxShadow: \"0 0 0 2px var(--violet)\" } : undefined}\n          onClick={() => { setSectionsOpen(false); setProfileOpen((v) => !v); }} aria-label={t(\"topbar.profile\")} aria-expanded={profileOpen}>\n          {avatar}\n        </button>\n        <div className=\"burger\" ref={ref}>\n          <button className={`iconbtn${sectionsOpen ? \" on\" : \"\"}`} onClick={() => { setProfileOpen(false); setSectionsOpen((v) => !v); }}\n            aria-label={t(\"topbar.sections\")} aria-expanded={sectionsOpen} aria-controls=\"nav-sections\">\n            <Icon name={sectionsOpen ? \"x\" : \"menu\"} />\n          </button>\n          {sectionsOpen && <nav id=\"nav-sections\" className=\"navmenu\" aria-label={t(\"topbar.sections\")}>{links}</nav>}\n        </div>\n      </div>\n      {profileOpen && profileMenu(closeProfile)}\n    </div>\n  );\n}\n"],"mappings":"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"}